/* reset */
*{
    box-sizing: border-box;
}
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,figure, figcaption, footer, header, hgroup,menu, nav, output, ruby, section, summary,time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	vertical-align: baseline;

}
@font-face {
	font-family: 'Pretendard Variable';
	font-weight: 45 920;
	font-style: normal;
/*	font-display: swap;*/
	src: url('/font/PretendardVariable.woff2') format('woff2-variations');
}
*{
    font-family: 'Pretendard Variable';
    box-sizing: border-box;
    color: var(--text-color);
}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
	display: block;
}
body {
	line-height: 1;
}
ol, ul {
	list-style: none;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
input:focus {
    outline: none;
}
a{
    text-decoration: none;
    color: inherit;
}
/* 색상변수 */
:root {
    /* 기본 색상 */
    --primary-color: #1E3463;
    --primary-hover-color: #7593D1;
    --secondary-color: #31A6FF;
    --secondary-hover-color: #B1C9FF;
    --third-color: #566A95;
    --third-hover-color: #878FA2;
    --fourth-color: #4B7EEB;
    --negative-color: #F26262;
    --negative-hover-color: #EF9191;
    --disabled-color: #D2D2D2;

    /* 사이드바 */
    --sidebar-color: black;
    --sidebar-hover-color: rgb(217 217 217 / 47%);

    /* 배경색 */
    --bg-color: #f1f1f1;
    --light-bg-color: #f3f3f3;
    --white-color: #ffffff;
    --dark-bg-color: var(--primary-color);
    --light-blue-bg: #D5E2FF;

    /* 텍스트 색상 */
    --text-color: #000000;

    /*테두리 색상*/
    --border-color: #D2D2D2;

    /* 상태별 색상 */
    --success-color: var(--secondary-color);
    --alert-color: var(--negative-color);
    --info-color: #1E90FF;
    --warning-color: #FFA500;
    --error-color: #FF0000;

    /* 버튼 색상 */
    --button-primary-bg: var(--primary-color);
    --button-primary-text: var(--white-color);
    --button-primary-hover-bg: var(--primary-hover-color);
    --button-secondary-bg: var(--secondary-color);
    --button-secondary-text: var(--white-color);
    --button-secondary-hover-bg: var(--secondary-hover-color);
    --button-third-bg: var(--third-color);
    --button-third-text: var(--white-color);
    --button-third-hover-bg: var(--third-hover-color);
    --button-negative-bg: var(--negative-color);
    --button-negative-text: var(--white-color);
    --button-negative-hover-bg: var(--negative-hover-color);
    --button-excel-download-bg: #0C6B35;
    --button-excel-download-text: var(--white-color);
    --button-excel-download-hover-bg: #61AF83;
    --button-disabled-bg: var(--disabled-color);
    --button-disabled-text: var(--white-color);
    --button-disabled-hover-bg: var(--disabled-color);

    /* 흑백 계열 */
    --black-050: hsl(0,0%,100%);
    --black-100: hsl(210,8%,98%);
    --black-150: hsl(210,8%,95%);
    --black-200: hsl(210,8%,90%);
    --black-225: hsl(210,8%,85%);
    --black-250: hsl(210,8%,80%);
    --black-300: hsl(210,9%,75%);
    --black-350: hsl(210,8%,68%);
    --black-400: hsl(210,8%,42%);
    --black-500: hsl(210,8%,25%);
    --black-600: hsl(210,8%,5%);
}
button{
    height: 35px;
    background: var(--button-primary-bg);
    color: white;
    border: 0px;
    border-radius: 6px;
    padding: 0 10px;
    white-space: nowrap;
}
button:hover{
    cursor : pointer;
    background-color: var(--button-primary-hover-bg);
}
button.secondary{
    height: 35px;
    background: var(--button-secondary-bg);
    color: var(--white-color);
    border-radius: 6px;
}
button.secondary:hover{
    cursor : pointer;
    background: var(--button-secondary-hover-bg);
}
button.third{
    height: 35px;
    background: var(--button-third-bg);
    color: var(--white-color);
    border-radius: 6px;
}
button.third:hover{
    cursor : pointer;
    background: var(--button-third-hover-bg);
}
button.inverse{
    height: 35px;
    background: var(--white-color);
    color: var(--button-primary-bg);
    border: 1px solid var(--button-primary-bg);
    border-radius: 6px;
}
button.inverse:hover{
    cursor : pointer;
    background: var(--white-color);
    color: var(--button-primary-hover-bg);
    border: 1px solid var(--button-primary-hover-bg);
}
button.negative{
    height: 35px;
    background: var(--white-color);
    color: var(--button-negative-bg);
    border: 1px solid var(--button-negative-bg);
    border-radius: 6px;
}
button.negative:hover{
    background: var(--white-color);
    color: var(--button-negative-hover-bg);
    border: 1px solid var(--button-negative-hover-bg);
}
button.excel-download{
    height: 35px;
    background: var(--button-excel-download-bg);
    color: var(--button-excel-download-text);
    border: 1px solid var(--button-excel-download-bg);
    border-radius: 6px;
}
button.excel-download:hover{
    cursor : pointer;
    background: var(--button-excel-download-hover-bg);
    border: 1px solid var(--button-excel-download-hover-bg);
}
button.underline{
    text-decoration: underline;
    background: none;
    color: var(--primary-color);
    border: none;
}
button.underline:hover{
    background: none;
    color: var(--primary-hover-color);
}
button[disabled]{
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    border: 1px solid var(--button-disabled-bg);
}
button[disabled]:hover{
    cursor : not-allowed;
    background: var(--button-disabled-bg);
    color: var(--button-disabled-text);
    border: 1px solid var(--button-disabled-bg);
}

button.disabled{
    background: var(--button-disabled-bg) !important;
    color: var(--button-disabled-text) !important;
    border: 0px !important;
}
button.disabled:hover{
    cursor : not-allowed;
    background: var(--button-disabled-bg) !important;
    color: var(--button-disabled-text) !important;
    border: 0px !important;
}

#loading-container {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    justify-content: center;
    align-items: center;
    background: var(--black-600);
    opacity: 0.3;
}
#loading-container #loading-bar {
    width: 30px; 
}
select, input {
    margin: 0;
    padding: 0;
    border: 0;
    outline: none;
}
/* 체크박스 디자인 */
input[type="checkbox"], input[type="radio"] {
    display: none;
}
label .checkmark {
    display: inline-block;
    width: 15px;   /* 15px 고정 */
    height: 15px;
    border: 1px solid var(--disabled-color);
    border-radius: 2px;
    background-color: var(--white-color);
    transition: all 0.2s;
    position: relative;
    vertical-align: middle;
}
/* hover시 투명도 0.7 */
label:hover .checkmark {
    opacity: 0.7;
}
/* 체크됐을 때 */
label input[type="checkbox"]:checked + .checkmark {
    border-color: var(--secondary-color);
    background-color: var(--secondary-color);
}
label input[type="checkbox"]:disabled + .checkmark {
    border-color: var(--disabled-color);
    background-color: var(--disabled-color);
    opacity: 0.7;
}
label .checkmark::after {
    content: "";
    position: absolute;
    display: none;
    left: 4px;
    top: 0px;
    width: 4px;
    height: 8px;
    border: solid 1px var(--white-color);
    border-width: 0px 3px 3px 0;
    transform: rotate(45deg);
}
/* 체크됐을 때 체크 표시 보이기 */
label input[type="checkbox"]:checked + .checkmark::after {
    display: block;
}
/* 라디오 버튼 디자인 */
label .radio-mark {
    display: inline-block;
    width: 15px;
    height: 15px;
    border: 1px solid var(--disabled-color);
    border-radius: 50%;
    background-color: var(--white-color);
    transition: all 0.2s;
    position: relative;
    vertical-align: middle;
}
/* hover시 투명도 0.7 */
label:hover {
    opacity: 0.7;
    cursor: pointer;
}

/* 안쪽 input이 disabled이면 hover 효과 없애기 */
label:has(input:disabled):hover {
    opacity: 1;
    cursor: default;
}
/* 체크됐을 때 */
label input[type="radio"]:checked + .radio-mark {
    border-color: var(--secondary-color);
}
/* 라디오 체크 표시 */
label input[type="radio"]:checked + .radio-mark::after {
    content: "";
    position: absolute;
    display: block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--secondary-color);
    left: 3px;
    top: 3px;
}
/* 체크박스: 체크 + disabled인 경우 */
label input[type="checkbox"]:checked:disabled + .checkmark {
    border-color: var(--secondary-hover-color);
    background-color: var(--secondary-hover-color);
    opacity: 0.7; /* 선택사항: 약간 흐리게 */
}

/* 라디오 버튼: 체크 + disabled인 경우 */
label input[type="radio"]:checked:disabled + .radio-mark {
    border-color: var(--secondary-hover-color);
    background-color: var(--white-color);
    opacity: 0.7; /* 선택사항 */
}
label input[type="radio"]:checked:disabled  + .radio-mark::after {
    background: var(--secondary-hover-color);
}
select:disabled {
    pointer-events: none; 
    appearance: none; 
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: none;
}
textarea[readonly]:focus {
    outline: none; 
}
.hidden{
    display: none !important;
}

/* 버튼 위에 툴팁 설명 */
.tooltip-btn {
    position: relative;
}
/* 툴팁 기본 스타일 */
.tooltip-btn::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 124%; /* 버튼 위쪽에 표시 */
    left: 50%;
    transform: translateX(-50%);
    background-color: rgba(51, 51, 51, 0.7);
    color: #fff;
    padding: 6px 10px;
    border-radius: 4px;
    white-space: pre;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
    font-size: 14px;
    z-index: 5000;
}
/* 화살표 만들기 */
.tooltip-btn::before {
    content: "";
    position: absolute;
    bottom: 102%;
    left: 50%;
    transform: translateX(-50%);
    border: 5px solid transparent;
    border-top-color: #333;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 5000;
}
/* 호버 시 툴팁 보이게 */
.tooltip-btn:hover::after,
.tooltip-btn:hover::before {
    opacity: 1;
}
/* 전체 스크롤바 */
.contents-wrap *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.contents-wrap *::-webkit-scrollbar-track {
    background-color: var(--bg-color);
}
.contents-wrap *::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}
.contents-wrap *::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color); 
}
/* 전체 스크롤바 */
.modal *::-webkit-scrollbar {
    width: 5px;
    height: 5px;
}
.modal *::-webkit-scrollbar-track {
    background-color: var(--bg-color);
}
.modal *::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 3px;
}
.modal *::-webkit-scrollbar-thumb:hover {
    background-color: var(--primary-color); 
}

/* .toast{
    position: fixed;
    top: 20px;
    right: 20px;
    min-width: 300px;
    border-radius: 5px;
    padding: 15px;
    box-shadow: rgba(0, 0, 0, 0.1) 0px 2px 10px;
    z-index: 9999;
    animation: 0.3s ease-out 0s 1 normal none running;
}
.toast-info{
    background-color: var(--info-color);
    background: rgb(209, 236, 241);
    border: 1px solid rgb(190, 229, 235);
}
.toast-success{
    background-color: var(--success-color);
    background: rgb(212, 237, 218);
    border: 1px solid rgb(195, 230, 203);
}
.toast-error{
    background-color: var(--error-color);
    background: rgb(248, 215, 218);
    border: 1px solid rgb(245, 198, 203);
}
.toast .toast-header{
    display: flex;
    align-items: center;
}
.toast .toast-header strong{
    flex: 1;
}
.toast .toast-body{
    padding-top: 10px;
}
.toast .toast-header .close{
    height: fit-content;
    background: transparent;
    color: var(--text-color);
    font-size: 1.2rem;
    font-weight: 600;
    margin-top: -10px;
    height: fit-content;
    padding: 0;
}
.toast .toast-header .close:hover{
    cursor: pointer;
    color: var(--text-color);
    opacity: 0.7;
    background: transparent;
} */


/* 자동 로그아웃 팝업창 */
.auto-logout-warning-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
    font-family: inherit;
}

.auto-logout-warning-modal .modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* background: rgba(0, 0, 0, 0.5); */
    display: flex;
    align-items: center;
    justify-content: center;
}

.auto-logout-warning-modal .modal-content {
    background: white;
    border-radius: 8px;
    padding: 0;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    max-width: 400px;
    width: 90%;
    animation: modalFadeIn 0.3s ease-out;
}

@keyframes modalFadeIn {
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

.auto-logout-warning-modal .modal-header {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #eee;
}

.auto-logout-warning-modal .modal-header h3 {
    margin: 0;
    color: #d32f2f;
    font-size: 18px;
}

.auto-logout-warning-modal .modal-body {
    padding: 20px;
    text-align: center;
}

.auto-logout-warning-modal .modal-body p {
    margin: 10px 0;
    color: #333;
    line-height: 1.5;
}

.auto-logout-warning-modal #warning-countdown {
    font-weight: bold;
    color: #d32f2f;
    font-size: 18px;
}

.auto-logout-warning-modal .modal-footer {
    padding: 10px 20px 20px;
    display: flex;
    gap: 10px;
    justify-content: center;
}

.auto-logout-warning-modal .btn-primary {
    background: #1976d2;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.auto-logout-warning-modal .btn-primary:hover {
    background: #1565c0;
}

.auto-logout-warning-modal .btn-secondary {
    background: #757575;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.auto-logout-warning-modal .btn-secondary:hover {
    background: #616161;
}
.force-logout-info {
    font-size: .8rem;
    margin: 10px;
}
.force-logout-info span{
    color: var(--alert-color);
    line-height: 1rem;
}