/* 전체적인 레이아웃 */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: "Noto Sans KR", sans-serif;
    font-optical-sizing: auto;
    display: flex;
    min-height: 100vh;
    flex-direction: column;
    margin: 0;
}

header {
    border-bottom: 1px solid #DFE1E5;
    background: #FFF;
    color: white;
    padding: 0 20px;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 10;
    height: 60px;

    display: flex;
    justify-content: space-between;
    align-items: center;
}

select{
    padding : 2px 4px;
    border-radius: 5px;
    border-color: #ccc;
}
input{
    border-radius: 5px;
    padding : 2px 4px;
    border-color: #ccc;
    border-width: 1px;
}


/* Sidebar 스타일 */
/* 사이드바 스크롤바 안보이게 */
.sidebar {
    background-color: #fff;
    border-right: 1px solid #DFE1E5;
    width: 240px;
    padding-top: 60px;  /* header의 높이만큼 패딩 */
    position: fixed;
    top: 0;
    left: 0;
    height: 100%;
    overflow-y: auto;
    font-size: 14px;
    scrollbar-width: none;
}
.sidebar::-webkit-scrollbar {
    display: none;
}

.sidebar ul {
    list-style-type: none;
    /* margin-bottom: 20px; */

    cursor: pointer;
    user-select: none;

    font-weight: 500;
}

.sidebar ul li {
    padding: 20px;
    border-bottom: 1px solid #DFE1E5;
}
.sidebar ul li ul{
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.5s ease-in-out; 
}
.sidebar ul li ul.show{
    max-height: 450px;
}
.sidebar ul li ul.menu_class.show{
    
    overflow-y: scroll;
}

.sidebar ul li ul li{
    border: none;
}
.sidebar ul li ul li:first-child{
    padding-top: 40px;
}

.sidebar ul li a {
    color: #333;
    text-decoration: none;
    font-size: 14px;
}

.sidebar ul li a:hover {
    color: #007BFF;
}

.sidebar ul li a.selected {
    color: #007BFF;
}


.sidebar .menu_title{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.sidebar .expand-more{
    width: 16px;
    height: 16px;
    overflow: hidden;
}

li:has(.show) .menu_title .expand-more{
    transform: rotate(180deg);
}


.gap20{
    gap:20px;
}
.tab-wrapper{
    display: flex;
    gap: 16px;
    width: 100%;
    padding-bottom: 10px;
    border-bottom: 1px solid #DFE1E5;
}
.tab-wrapper .tab{
    color: #DFE1E5;
    cursor: pointer;
    user-select: none;
}
.tab-input:checked + .tab{
    color: #333;
    font-weight: 500;
}
.tab-content-wrapper .tab-content{
    display: none;
    width: 100%;
}
.tab-wrapper:has(#tab1:checked) + .tab-content-wrapper .tab1{
    display: flex;   
}
.tab-wrapper:has(#tab2:checked) + .tab-content-wrapper .tab2{
    display: flex;   
}
.tab-wrapper:has(#tab3:checked) + .tab-content-wrapper .tab3{
    display: flex;   
}
.tab-wrapper:has(#Tab1:checked) + .tab-content-wrapper .Tab1{
    display: block;   
}
.tab-wrapper:has(#Tab2:checked) + .tab-content-wrapper .Tab2{
    display: block;   
}
.tab-wrapper:has(#Tab3:checked) + .tab-content-wrapper .Tab3{
    display: block;   
}
.tab-wrapper:has(#Tab4:checked) + .tab-content-wrapper .Tab4{
    display: block;   
}
.tab-wrapper:has(#Tab5:checked) + .tab-content-wrapper .Tab5{
    display: block;   
}
.tab-wrapper:has(#Tab0:checked) + .tab-content-wrapper .Tab0{
    display: block;   
}


.insert {
    display: block;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.insert .file-list {
    margin-top: 4px;
    height: 160px;
    overflow: auto;
    border: 1px solid #DFE1E5;
    padding: 10px;
}
.insert .file-list .filebox {
    display: flex;
    align-items: center;
}
.insert .file-list .filebox p {
    margin-top: 10px;
}
.insert .file-list .filebox .delete i{
    margin-top: 10px;
    color: #ff5353;
    margin-left: 5px;
}

.action-button{
    background-color: #006AD6;
    color: #fff;
    width: auto;
    margin-bottom: 20px;
    border: none;
    padding: 10px 40px;
    border-radius: 8px;
}
.action-button:hover{
    background-color: #0056b3;
}



/* 콘텐츠 영역 */
#content {
    margin-left: 240px;
    padding: 80px 20px 20px 20px;
    flex-grow: 1;
}

/* 반응형 처리 */
@media screen and (max-width: 768px) {
    /* 모바일 화면에서 사이드바 숨기기 */
    /* #sidebar {
    width: 100%;
    position: relative;
    padding-top:60px;
    }
    #sidebar ul {
    display: flex;
    justify-content: space-around;
    }
    #content {
    margin-left: 0;
    padding-top: 20px; 
    } */
}

.no-padding{
    padding: 0 !important;
}
table {
    width: 100%;
    border-collapse: collapse;
}
th{
    background-color: #F7F7F7;
}
th, td {
    padding: 8px;
    border: 1px solid #ddd;
    text-align: left;
}
.tabulator .tabulator-header {
    background-color: #F7F7F7 !important;
}
.tabulator-row-even{
    background-color: #FFF !important;
}
.tabulator-row{
    border-bottom: 1px solid #ddd;
}
.tabulator-row:hover{
    background-color: #F0F0F0 !important;
}
.tabulator-cell{
    border-right: 1px solid #ddd !important;
}
.tabulator{
    border: none !important;
}
.tabulator-tableholder{
    border-left : 1px solid #ddd !important;
    background-color: #fff !important;
}
.tabulator .tabulator-header .tabulator-col{
    border-right: 1px solid #ddd !important;
}
.tabulator-header{
    border: 1px solid #ddd !important;
}
.tabulator-footer{
    border-top: none !important;
    background-color: #fff !important;
}

#user-table-header{
    display: flex;
    justify-content: flex-end;
    margin-bottom: 20px;
}
#search-input{
    width: 200px;
    height: 30px;
    padding: 10px;
    border: 1px solid #ddd;
}
.search-input{
    width: 200px;
    height: 30px;
    padding: 10px;
    border: 1px solid #ddd;
}



#popup_background{
    position: fixed;
    top:0;
    left:0;
    width: 100vw;
    height: 100vh;
    background-color: #333;
    opacity: 50%;

    z-index: 10;
}

#popup_wrapper{
    position: fixed;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 80vw;
    /* height: 70vh; */
    background-color: #fff;
    z-index: 11;


    display: flex;
    flex-direction: column;
    align-items: center;

    padding-top: 20px;
}



#info{
    font-size: 20px;
    display: flex;
    gap: 20px;
}

#question{
    margin-top: 20px;
    width: calc(100% - 40px);
    padding:40px;
    border: #333 1px solid;
    display: flex;
    justify-content: center;
    align-items: center;
}

#audio{
    margin-top: 20px;
}

.transpose-table {
    display: flex;
    border-collapse: collapse;
}

.transpose-table tbody{
    display: flex;
    overflow-x: scroll;
}

.transpose-table tr {
    display: flex;
    flex-direction: column; /* 세로로 표시 */
}

.transpose-table td,
.transpose-table th {
    border: 1px solid black;
    padding: 8px;
}

.d-none{
    display: none !important;
}

.title{
    margin-top: 10px;
    margin-bottom:10px;
}

#syllable_wrapper{
    width: calc(100% - 40px);
    /* height: 140px; */
}
#phoneme_wrapper{
    width: calc(100% - 40px);
    /* height: 140px; */
}

#memo{
    width: calc(100% - 40px);
    height: 120px;
    margin-top: 20px;
    margin-bottom: 20px;

    padding:5px;
    border: 2px solid #333;
}



#total_result{
    display: flex;
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 20px;
}


.reserv_data_time{
    display: flex;
    width: 100%;
    gap: 4px;
    height: 24px;
    align-items: center;
}
.reserv-set{
    display:none;
}
#reservation:checked ~ input{
    display: block;
}


i{
    cursor: pointer;
    user-select: none;
}

.filebox i{
    font-size: 14px;
}

.purple{
    color : #711282;
}

.display{
    border:none;
}

.action-button{
    user-select: none;
    cursor: pointer;
}