#login_id_text {display: inline-block;font-size:14px;margin-left:6px;margin-bottom: 2px;width:60px}

#login_text {text-decoration-line:none;color:#F7FAFC;}
#aside_hr{border:0;height:1px;background:#aaa}
#growth_pct {font-size: 14px;color: black;text-decoration-line: none;padding-left:6px;}

/*#calc {width: 78%;background-color:white;padding:10px;margin-left: 5px}*/

#name_title, #id_title, #writename_title, #hospital_name_title, #doclicense_title, #doclicenseimg_title, #pw_title,#pw_check_title, #email_title, #hospital_title,#setting,#doclicense_title
{display: inline-block;font-size:15px; font-weight:bold;width:210px;height:25px;margin-bottom:7px;}
#verif_title,#id_title_log,#pw_title_log
{display: inline-block;font-size:15px; font-weight:bold;width:210px;height:25px;margin-bottom:7px;}

.check_one_title {display:inline-block;width: 50px;}
#setting_item {margin-left:20px;}
#setting_newdata {font-size:15px; font-weight:bold;}
#setting_newdata_item {margin-left:20px;font-size:14px;}
#item_select,#graph_select,#X_axis_select {font-weight:bold;}
#column_select_box_input,#column_select_box_output,#column_select_box_extra,
#column_select_box_option, #graph_type,#X_axis_select_type {margin-left:20px;}
#save_select {margin-top:20px;}
#login_id, #login_password {width:175px;}

#signup_name,#signup_id,#signup_writename,#signup_hospital_name,#signup_password,#signup_repassword,#signup_email,#temp_no
{height: 18px}

#name_explain,#id_explain,#writename_explain,#hospital_name_explain,#pw_explain, #doclicense_explain, #doclicenseimg_explain
    /*{display: inline-block;font-size:14px; font-weight:normal;margin-bottom:7px;}*/
{display: block;font-size:14px; font-weight:normal;margin-bottom:7px;}

#signup_btn,#verif_no,#confirm_btn, #confirm {
    text-decoration-line:none;
    color:#F7FAFC;}
#confirm_btn,#signup_btn{margin-top:30px;font-size:15px;}
#verif_no {margin-left:3px;font-size:13px;}

#login_btn {padding: 3px 120px;margin-top: 20px;color:white;font-size:15px;width:500px}


/*추가*/

ul,li {list-style: none; padding-left:0px;}
button {background-color:#9c5d42; color:#ffffe4;border-color:#9c5d42;}
:checked {accent-color:darkgray}
#top {margin: 10px 10px 10px 10px;
    padding:30px 0px;
    /*    background-color:#173473;*/
    /*    background-color:#9c5d42;*/
    /*    background-color:#003333;*/
    background-color:#004c63;

    color:#F7FAFC;
    text-align: center}

#title {font-size: 28px;margin:0px 0px;}

#container {width:auto;margin:10px;}
#wrapper {max-width: 1960px;display: flex; flex-wrap:nowrap;justify-content:center;margin:0px auto;}
/*부분창에서는 width는 마우스를 올렸을 때 나오는 window창의 width보다 작음.
이때문에 마우스 올렸을 때 나오는 window width 2000을 기준으로 디자인 변경할 때,
wrapper의 width= 2000 - container margin X 2 = 1980으로 하면 wrapper가 화면보다 더 커지게 됨 */

#upperbar_1 {display:none;}

#aside_1,#aside_2
{padding:10px;background-color:#F7FAFC;flex-basis:180px;
    flex-grow:0;flex-shirink:0;font-size:14px}

#login_bar
{width:100%;margin-bottom: 20px;background-color: #99cccc;
    border-color: #99cccc;padding:3px}

#login_bar_title {text-decoration-line:none;color:#003333;}

#writename {font-size: 15px;margin-bottom:20px;cursor:pointer;}
.logged_item {font-size: 15px;color: black;text-decoration-line: none;padding-left:6px}
button.logged_item {background-color: transparent; color: black; border: none;
padding-left:6px; margin: 0; font-family: inherit; line-height: normal; appearance: none; -webkit-appearance: none; -moz-appearance: none;}

#newdata, #recall,#compare {font-size: 15px;color: black;border:0;outline:0;cursor:pointer;background-color:#F7FAFC}
#growth_pct,#sign_up, #id_find, #pw_find, #approve_signup, #manage_user_tier, #compare, #to_main_page, #users_profile
{font-size: 15px;color: black;text-decoration-line: none;padding-left:6px;}
#writename:hover,.logged_item:hover,#newdata:hover,#recall:hover,#growth_pct:hover,#sign_up:hover, #id_find:hover, #pw_find:hover,#compare:hover,
#to_main_page:hover, #users_profile:hover, #approve_signup:hover, #manage_user_tier:hover
{font-size: 16px;font-weight:bold}
#aside_hr{border:0;height:1px;background:#aaa}

#page_title {text-align:center; margin-top:10px;margin-bottom:10px;font-size:24px;}

#calc {flex-basis: 1520px;flex-grow:0;flex-shirink:0;background-color:white;
    padding:10px;margin:5px 0px 5px 0px;}



#flexbox{display: flex;flex-wrap: nowrap;gap: 1em;padding: 5px;}
#user_info {margin-right: 30px}
#lt_blank_signup,#rt_blank_signup {
    flex-basis:20px;flex-shrink: 1;flex-grow: 1;
}
#main_part_signup {
    flex-basis: 1250px;flex-shrink: 0;flex-grow: 0;
}
#show_info {display:flex;flex-wrap: wrap;}
#user_info, #using_info {margin-bottom:50px}
#change_pw {margin-top:70px;margin-bottom: 30px;}
#main_part_center {display: flex; flex-direction:column;justify-content: center;}
/*#login_form {display: flex; flex-direction:column;justify-content: center;}*/
/*p {margin-left: 100px}*/

#hospital_name {
    border:none;
    border-bottom: 1px solid #333; /* 아래쪽 실선 */
}
a.btn{
    display:block;
    width:110px;
    line-height:20px;
    font-size: 14px;
    text-align:center;
    background-color:#9c5d42;
    color:#ffffe4;
    border-color:#9c5d42;
    text-decoration-line: none;
    box-shadow: 1.5px 1.5px black;

}

button.disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

#bottom {
    margin: 10px;
    padding: 10px 0;
    color:#F7FAFC;
    background-color:#004c63;
    text-align: center;
}

@media (max-width:2000px) {

    #container {width:auto;margin:10px 10px 10px 10px;}
    #wrapper {max-width:1100px;display: flex;justify-content: center;flex-wrap:nowrap;}
    #aside_1,#aside_2 {padding:10px;background-color:#F7FAFC;font-size:14px;
        flex-basis:140px;flex-grow:0;flex-shrink:0;}
    #calc {flex-basis:850px;flex-grow: 1;flex-shrink: 1;
        background-color:white;padding:10px;margin:5px 0px 5px 0px;}
    #flexbox{display: flex;flex-wrap: nowrap;padding: 2px;}
    #lt_blank_signup,#rt_blank_signup {
        flex-basis:20px;flex-shrink: 1;flex-grow: 0.5;
    }
    #main_part_signup {
        flex-basis: 680px;flex-shrink: 0;flex-grow: 0;
    }
}

@media (max-width:1050px) {
    #main_part_signup {
        flex-shrink:1;flex-grow: 0;
    }
}

@media (max-width:850px) {
    #top {margin: 10px 10px 10px 10px;
        padding: 20px 0;
        background-color:#004c63;
        color:#F7FAFC;
        text-align: center}

    #title {font-size: 20px;font-weight: bold}
    #container {margin:0px 5px 0px 5px;}
    #wrapper {display: flex;flex-direction:column;}
    #aside_1 {display:none;}

    #upperbar_1 {display:flex;justify-content:space-around;}
    #login_bar_small {width:100px;background-color: #99cccc;border-color: #99cccc;padding:1px;font-size:14px;font-weight:bold}
    #auth_menu_title,#growth_pct{cursor:pointer; font-size: 15px;font-weight:bold}
    #login_bar_small:hover,#auth_menu_title:hover,#growth_pct:hover
    {font-weight:bold;font-size: 16px;}

    #sign_up_small,#id_find_small,#pw_find_small {font-size:14px;text-decoration-line: none;}
    #sign_up_small:hover,#id_find_small:hover,#pw_find_small:hover
    {font-weight:bold;font-size: 15px;}
    #auth_form_small {width:150px;text-align:center;}
    .hide {display:none;}

    .logged_item,#writename_small {text-decoration-line: none;color:black;} /*logged_item:myinfo,로그아웃으로 연결되는 class  */
    #writename_small,.logged_item,#function_menu_title {cursor:pointer; font-size: 15px;font-weight:bold}
    #writename_small:hover,.logged_item:hover, #function_menu_title:hover {font-weight:bold;font-size: 16px;}
    .function_menu_hide {display:none;}
    #newdata_small,#recall_small,#compare_small {font-size:14px;}
    #newdata_small:hover,#recall_small:hover,#compare_small:hover {font-weight:bold;font-size: 15px;}
    #newdata_small {cursor:pointer;color:purple}
    #recall_small,#compare_small {text-decoration-line: none;}


    #page_title {text-align:center;font-size:18px;font-weight: bold}

    #calc {flex-basis:auto;background-color:white;margin:5px 5px;}
    #lt_blank_signup,#rt_blank_signup {flex-basis:10px;flex-shrink: 1;flex-grow: 0.5;}
    #aside_2 {flex-basis:100px;flex-grow:1;flex-shrink:1;background-color:brown;margin:5px 5px;}

    #main_part {display:flex;flex-direction:row;justify-content:space-around;}
    #main_part_center {flex-shrink:0;flex-grow:0;}
    #main_part_left,#main_part_right {flex-basis:20px;flex-shrink:1;flex-grow:1;}

}

/* =========================
   Admin - 회원가입 승인 패널 전용 레이아웃
   ========================= */

/* 이 페이지에서만 #wrapper를 풀폭으로 쓰도록 제한을 해제
   :has()는 최신 브라우저에서 지원됩니다. */
#wrapper:has(#approval_panel_wrap) {
    max-width: none;          /* 1100px 제한 해제 */
    width: min(1680px, 96vw); /* 화면 꽉 차되 너무 과도하게 넓어지지 않도록 */
    justify-content: flex-start;
    gap: 16px;                /* aside와 본문 사이 여백 */
    align-items: flex-start;
}

/* 승인 패널이 가로 공간을 충분히 가져가도록 */
#approval_panel_wrap {
    flex: 1 1 auto;
    min-width: 0;             /* overflow-x 스크롤 시 필수 */
}

/* 카드 느낌의 컨테이너 */
#approval_panel {
    background: #fff;
    padding: 16px;
    border-radius: 10px;
    box-shadow: 0 2px 10px rgba(0,0,0,.06);
}

/* 툴바: 첫 줄에 검색창을 넓게, 나머지는 버튼/셀렉트 */
#approval_toolbar {
    display: grid;
    grid-template-columns: 1fr auto auto auto auto; /* 검색 1fr, 필터/버튼 auto */
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
}
#approval_toolbar input[type="text"],
#approval_toolbar select,
#approval_toolbar button {
    height: 36px;
    padding: 0 10px;
    border: 1px solid #dcdcdc;
    border-radius: 8px;
    background: #fff;
}
#approval_toolbar button {
    border-color: #9c5d42;
    background-color: #9c5d42;
    color: #ffffe4;
}

#approval_toolbar button:hover {
    background-color: #834b37;    /* hover 시 살짝 어둡게 */
    border-color: #834b37;
}

#approval_toolbar button:active {
    transform: translateY(1px);   /* 클릭 감각 */
}

/* 테이블 래퍼: 가로 스크롤 허용(열이 많아도 깨지지 않게) */
#users_table_wrap {
    overflow: auto;           /* 가로/세로 스크롤 자동 */
    -webkit-overflow-scrolling: touch;
    border: 1px solid #eee;
    border-radius: 10px;
}

/* 테이블 기본 */
#users_table {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;       /* 내용에 맞게 열 너비 조절 */
    font-size: 14px;
}

/* sticky 헤더 + 스타일 */
#users_table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    background: #f7fafc;
    border-bottom: 1px solid #eaeaea;
    text-align: left;
}

/* 셀 공통 */
#users_table th,
#users_table td {
    padding: 10px 12px;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

/* 컬럼별 최소 너비(가독성) */
#users_table th:nth-child(1),
#users_table td:nth-child(1) { min-width: 8rem; }   /* 이름 */
#users_table th:nth-child(2),
#users_table td:nth-child(2) { min-width: 16rem; word-break: break-all; } /* 이메일 */
#users_table th:nth-child(3),
#users_table td:nth-child(3) { min-width: 8rem; }   /* 면허번호 */
#users_table th:nth-child(4),
#users_table td:nth-child(4) { min-width: 12rem; }  /* 면허 이미지 */
#users_table th:nth-child(5),
#users_table td:nth-child(5) { min-width: 7rem; }   /* 승인 상태 */
#users_table th:nth-child(6),
#users_table td:nth-child(6) { min-width: 10rem; white-space: nowrap; } /* 가입일 */

/* 면허 이미지 썸네일 */
#users_table td:nth-child(4) img {
    display: block;
    height: 64px;
    width: auto;
    border-radius: 6px;
    box-shadow: 0 1px 2px rgba(0,0,0,.06);
}

/* 행 hover */
#users_table tbody tr:hover {
    background: #fafcff;
}

/* 페이지네이션: 우측 정렬 */
#users_pagination {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: flex-end;
    margin-top: 12px;
}
/* Pagination buttons — 더 선명한 색상 & 상태 */
#users_pagination button {
    height: 32px;
    padding: 0 12px;
    border-radius: 8px;
    border: 1px solid #9c5d42;
    background-color: #9c5d42;   /* 기본 배경 */
    color: #ffffe4;               /* 글자색 */
    box-shadow: 0 1px 2px rgba(0,0,0,.08);
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}

#users_pagination button:hover {
    background-color: #834b37;    /* hover 시 살짝 어둡게 */
    border-color: #834b37;
}

#users_pagination button:active {
    transform: translateY(1px);   /* 클릭 감각 */
}

#users_pagination button:focus-visible {
    outline: 3px solid #004c63;   /* 브랜드 톤 포커스 링 */
    outline-offset: 2px;
}

#users_pagination button:disabled {
    background-color: #e9e9e9;
    border-color: #e1e1e1;
    color: #aaaaaa;
    box-shadow: none;
    cursor: not-allowed;
}

#users_pagination #page_info {
    font-weight: 600;
}

/* 반응형: 폭이 좁아질 때 툴바를 세로 쌓기 + 테이블 가로 스크롤 확보 */
@media (max-width: 1200px) {
    #approval_toolbar {
        grid-template-columns: 1fr auto auto; /* 검색, 필터, 새로고침/일괄버튼은 줄바꿈 될 수 있음 */
        row-gap: 6px;
    }
}
@media (max-width: 850px) {
    #wrapper:has(#approval_panel_wrap) {
        width: 100%;
        gap: 10px;
    }
    #approval_panel {
        padding: 12px;
        border-radius: 8px;
    }
    #approval_toolbar {
        grid-template-columns: 1fr; /* 한 줄씩 */
    }
    #users_table { min-width: 720px; } /* 모바일에서도 좌우 스크롤로 전체 열 확인 가능 */
    #users_pagination { justify-content: center; }
}

/* =========================
   Lightbox (면허 이미지 확대)
   ========================= */
#users_tbody img.doc-thumb { cursor: zoom-in; }

#img_lightbox {
    position: fixed;
    inset: 0;
    display: none;                  /* 기본 숨김 */
    z-index: 9999;                  /* 최상단 */
}
#img_lightbox.show { display: block; }

#img_lightbox .lb_backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(1px);
}

#img_lightbox .lb_content {
    position: absolute;
    inset: 0;
    margin: auto;                   /* 중앙 정렬 */
    max-width: 92vw;
    max-height: 88vh;
    padding: 0;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0,0,0,.25);
    background: #111;
    display: flex;
    flex-direction: column;
}

#img_lightbox #lb_img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 82vh;
    object-fit: contain;
    background: #000;
}

#img_lightbox #lb_caption {
    color: #ffffe4;
    background: #004c63;            /* 브랜드 톤 */
    font-size: 14px;
    padding: 8px 12px;
}

#img_lightbox .lb_close {
    position: absolute;
    top: 6px;
    right: 8px;
    width: 36px;
    height: 36px;
    line-height: 32px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,.3);
    background: rgba(0,0,0,.4);
    color: #fff;
    font-size: 22px;
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0,0,0,.35);
}
#img_lightbox .lb_close:hover {
    background: rgba(0,0,0,.55);
}