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

* {
    font-family: "Pretendard Variable";
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/*----- 상단바 -----*/
.topbar {
    width: 100%;
    height: 48px;
    background-color: #1C1C1C;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 20px;
    justify-content: space-between;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

.user_info {
    color: #ffffff;
    font-size: 13px;
    font-weight: 400;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 12px;
}
/*----- 상단바 -----*/

/*----- 사이드바 -----*/
.sidebar {
    width: 240px;
    height: 100vh;
    background-color: #1C1C1C;
    color: white;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: fixed;
    top: 48px;
    left: 0;
}

.menu-item {
    width: 100%;
}

.menu-item span {
    width: 100%;
    white-space: nowrap;
}

.menu-item:hover {
    background-color: #5f5f5f;
}

.menu-item.side_selected {
    background-color: #5f5f5f;
}

.side_active .depth1 {
    background-color: #5f5f5f;
}


.menu-item .icon {
    width: 20px;
    height: 20px;
    display: inline-block;
}

.depth1 {
    padding: 16px 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 16px;
}

.submenu {
    overflow: hidden;
    max-height: 0;
    flex-direction: column;
    width: 100%;
    transition: max-height 0.3s ease;
    background-color: #000000;
}

.submenu-item {
    padding: 16px 20px;
    color: white;
    cursor: pointer;
}

.side_active .submenu {
    max-height: 600px;
}

.submenu-item.side_selected {
    color: #F0FF1C;
}
/*----- 사이드바 -----*/

/*----- Section -----*/
section {
    margin-top: 48px;
    margin-left: 240px;
    padding: 20px;
    background-color: #ffffff;
    height: calc(100vh - 48px);
    display: flex;
    flex-direction: column;
    gap: 20px;
}
/*----- Section -----*/

/*----- Main -----*/
.main {
    width: 100%;
    height: calc(100% - 59px);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
/*----- Main -----*/



/*----- 버튼 -----*/
.login_btn {
    font-size: 15px;
    font-weight: 600;
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background-color: #1C1C1C;
    border: 1px solid #1c1c1c;
    color: #ffffff;
    margin-top: 30px;
}

.btn1 {
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background-color: #1c1c1c;
    border: 1px solid #1c1c1c;
    color: #ffffff;
    white-space: nowrap;
}

.btn1:disabled {
    cursor: not-allowed;
    background-color: #d1d1d1;
    border: 1px solid #d1d1d1;
}

.btn_order_cancel {
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background-color: #1c1c1c;
    border: 1px solid #1c1c1c;
    color: #ffffff;
    white-space: nowrap;
}

.btn_order_cancel:disabled {
    cursor: not-allowed;
    background-color: #d1d1d1;
    border: 1px solid #d1d1d1;
}

.btn2 {
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    border: 1px solid #1c1c1c;
    color: #1c1c1c;
    white-space: nowrap;
}

.btn3 {
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    border: 1px solid #D1D1D1;
    color: #1c1c1c;
    white-space: nowrap;
}

.btn3:disabled {
    color: #D1D1D1 !important;
}

.btn4 {
    font-size: 13px;
    font-weight: 500;
    width: 100%;
    padding: 8px 12px;
    border-radius: 4px;
    cursor: pointer;
    border: 1px solid #1c1c1c;
    background-color: #e7e7e7;
    color: #1c1c1c;
    white-space: nowrap;
}

.delete_btn {
    font-size: 15px;
    font-weight: 500;
    width: 100%;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    background: none;
    border: 1px solid #ED2D2D;
    color: #ED2D2D;
    white-space: nowrap;
}

.add_btn {
    font-size: 15px;
    font-weight: 500;
    width: auto;
    padding: 6px 12px;
    border-radius: 20px;
    cursor: pointer;
    background-color: #E7E7E7;
    border: 1px solid #1c1c1c;
    color: #1c1c1c;
    white-space: nowrap;
    display: flex;
    gap: 6px;
    align-items: center;
}
/*----- 버튼 -----*/


/*----- input -----*/
input {
    width: 100%;
    height: 36px;
    padding: 8px 12px;
    font-size: 15px;
    border: none;
    border-bottom: 1px solid #D1D1D1;
    color: #D1D1D1;
    outline: none;
}

input::placeholder {
    opacity: 0.4;
    font-weight: 400;
}

.active {
    border-bottom: 1px solid #1C1C1C !important;
    color: #1C1C1C !important;
}

.search_input {
    position: relative;
}

.search_input img, .date-range-picker img {
    position: absolute;
    float: right;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.add_detail textarea {
    width: 100%;
    height: 400px;
    border: 1px solid #d1d1d1;
    border-radius: 8px;
    font-size: 15px;
    color: #d1d1d1;
    outline: none;
    padding: 12px;
}

textarea.active {
    border: 1px solid #1c1c1c !important;
}
/*----- input -----*/

/*----- 날짜 선택 -----*/
.date-range-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
}

.date_input_wrap {
    position: relative;
}

.calendar-icon {
    position: absolute;
    right: 5px;
    top: 50%;
    transform: translateY(-50%);
    width: 24px;
    height: 24px;
    cursor: pointer;
}

.tilde {
    font-size: 18px;
    color: #1c1c1c;
}

.date-range-picker input[type="text"] {
    border: none;
    border-bottom: 1px solid #D1D1D1;
    padding: 8px 12px;
    outline: none;
    font-size: 15px;
    text-align: left;
    cursor: pointer;
}

.date-range-picker input.date-selected {
    color: #1c1c1c;
    border-bottom: 1px solid #1c1c1c;
}

.flatpickr-day.selected, .flatpickr-day.startRange, .flatpickr-day.endRange, .flatpickr-day.selected.inRange, .flatpickr-day.startRange.inRange, .flatpickr-day.endRange.inRange, .flatpickr-day.selected:focus, .flatpickr-day.startRange:focus, .flatpickr-day.endRange:focus, .flatpickr-day.selected:hover, .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover, .flatpickr-day.selected.prevMonthDay, .flatpickr-day.startRange.prevMonthDay, .flatpickr-day.endRange.prevMonthDay, .flatpickr-day.selected.nextMonthDay, .flatpickr-day.startRange.nextMonthDay, .flatpickr-day.endRange.nextMonthDay {
    background: #1c1c1c !important;
    border-color: #1c1c1c !important;
}
/*----- 날짜 선택 -----*/


/*----- 체크박스, 라디오 버튼 -----*/
.checkbox_wrap, .radio_wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.checkbox_wrap {
    justify-content: center;
}

input[type="checkbox"], input[type="radio"] {
    display: none;
}

input[type="radio"] + label {
    width: 20px;
    height: 20px;
    background: url('../img/radio.svg') no-repeat center center / contain;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

input[type="radio"]:checked + label {
    background: url('../img/radio_checked.svg') no-repeat center center / contain;
}

.radio_wrap label + span {
    font-size: 15px;
    cursor: pointer;
    color: #6D6D6D;
    margin-bottom: 2px;
}

input[type="checkbox"] + label {
    width: 20px;
    height: 20px;
    background: url('../img/table_checkbox.svg') no-repeat center center / contain;
    display: inline-block;
    vertical-align: middle;
    cursor: pointer;
}

input[type="checkbox"]:checked + label {
    background: url('../img/table_checkbox_checked.svg') no-repeat center center / contain;
}

/*----- 체크박스, 라디오 버튼 -----*/

/*----- 드롭다운 -----*/
.dropdown {
    position: relative;
    width: 200px;
    border-bottom: 1px solid #D1D1D1;
}

.dropdown-toggle {
    height: 36px;
    background: none;
    color: #D1D1D1;
    padding: 6px 12px;
    font-size: 15px;
    cursor: pointer;
    border: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    outline: none;
}

.dropdown-toggle::after {
    content: url('../img/down.svg');
    width: 16px;
    height: 16px;
    font-size: 12px;
    right: 0;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    border-radius: 8px;
    box-shadow: 2px 4px 12px 0 #00000010;
    margin-top: 4px;
    overflow: hidden;
    z-index: 1000;
}

.dropdown-menu div {
    padding: 12px 16px;
    font-size: 15px;
    color: #454545;
    cursor: pointer;
    text-align: left;
}

.dropdown-menu div:hover {
    background-color: #F6F6F6;
}

.dropdown-menu.active_dropdown {
    display: block;
    max-height: 200px;
    overflow: auto;
    scrollbar-width: none;
}

.dropdown-toggle.selected {
    color: #1c1c1c;
    border-bottom: 1px solid #1c1c1c;
}

/* 테이블 드롭다운 */
.table_filter .dropdown, .ticket_filter .dropdown {
    border-bottom: 0;
}

.table_filter .dropdown-toggle, .ticket_filter .dropdown-toggle {
    border: 1px solid #1c1c1c;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 400;
    color: #1c1c1c !important;
}

.dropdown2-toggle {
    background-color: #E7E7E7;
}

.dropdown2-toggle.selected {
    background: none;
    border: 1px solid #1C1C1C !important;
}
/* 테이블 드롭다운 */
/*----- 드롭다운 -----*/

/*----- table -----*/
table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

th, td {
    padding: 10px 4px;
    border: 1px solid #e7e7e7;
    text-align: center;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

th {
    background-color: #f6f6f6;
    font-weight: 600;
    font-size: 15px;
}

td {
    font-size: 16px;
    font-weight: 300;
}

tr:not(.total):hover {
    background-color: #FCFFCF;
    cursor: pointer;
}

/* total 행의 스타일은 그대로 유지 */
table .total {
    background-color: #1c1c1c;
    color: #ffffff;
}

table .total td {
    font-weight: 600;
}

#pagination {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#pagination1 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#pagination2 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

#pagination4 {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}


#ticketPopupPagination {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.page-button {
    display: inline-block;
    width: 32px;
    height: 32px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #b0b0b0;
}

.page-button.nav-button {
    font-size: 16px;
    cursor: pointer;
    color: #1c1c1c;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 4px;
    transition: background-color 0.2s;
}

.page-button.nav-button:not(.disabled):hover {
    background-color: #f5f5f5;
}

.page-button.nav-button.disabled {
    cursor: default;
    color: #d1d1d1;
    pointer-events: none;
}

.page_active {
    background-color: #1c1c1c;
    color: #ffffff;
    font-weight: 600;
    border-radius: 40px;
}
/*----- table ------*/

      
/*----- header -----*/
.header {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
}

.tit_wrap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.title {
    display: flex;
    align-items: center;
    gap: 6px;
}

.header .tit1 {
    color: #6d6d6d;
    font-size: 16px;
}

.header .tit2 {
    color: #1c1c1c;
    font-size: 20px;
    font-weight: 600;
}
/*----- header -----*/

/*----- filter -----*/
.filter {
    height: 37px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}

.filter_wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 20px;
}

.filter .filter_tit {
    width: 80px;
    font-weight: 600;
    font-size: 16px;
    text-align: left;
}

.filter_detail {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
}
/*----- filter -----*/

/*----- 팝업 -----*/
.popup {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}

.popup-content {
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
    position: relative;
    height: 630px;
}

.popup_tit {
    display: flex;
    flex-direction: row;
    padding: 20px;
}

.popup_tit span {
    font-size: 18px;
    font-weight: 600;
    border-bottom: 2px solid #1c1c1c;
}

.popup_detail {
    padding: 20px;
}

.popup_bottom {
    padding: 20px;
    display: flex;
}

/*----- 팝업 -----*/

.date-range-picker {
    display: flex;
    align-items: center;
}

.btn-reset {
    margin-left: 8px;
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.btn-reset:hover {
    opacity: 0.8;
}

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


.template-category {
    padding: 8px 12px;
    background-color: #F5EEDC;
    font-weight: 500;
    color: #666;
    cursor: default;
    font-size: 13px;
}

.dropdown-menu > div:not(.template-category) {
    padding-left: 24px;
}

/*-- 표 짤림 형상 방지 --*/

/* 테이블 스타일 */
/* common.css에 추가할 스타일 */
table td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

table td:hover {
    overflow: visible;
    white-space: normal;
}

table .total {
    background-color: #1c1c1c;
    color: #ffffff;
}

table .total td {
    font-weight: 600;
}

/* 미리보기 부분 */
.preview {
    position: relative;
    min-height: 200px;
    width: 100%;
    margin-top: 10px;
}

.image-container {
    width: 100%;
    min-height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.image-container img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    display: block;
}

.slide-button {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.slide-button.prev {
    left: 10px;
}

.slide-button.next {
    right: 10px;
}

.slide-button i {
    color: white;
    font-size: 12px;
}

.delete-button {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
}

.delete-button i {
    color: white;
    font-size: 12px;
}

#ticketDetailTable tbody tr td:first-child {
    cursor: pointer;
    color: #2196F3;
    text-decoration: underline;
}

#ticketDetailTable tbody tr td:first-child:hover {
    color: #1976D2;
}

#ticketDetailTable td {
    font-size: 14px !important;
}

/* 팝업 스타일 수정 */
#addRowPopup .popup_tit {
    /* margin-bottom: 20px; */

}

#addRowPopup .btn1[onclick*="updateTicketDetail"] {
    background-color: #4CAF50;
}

.transmission-detail-link {
    color: #007bff;
    text-decoration: underline;
    cursor: pointer;
}

.transmission-detail-link:hover {
    color: #0056b3;
}