html,
body { 
    /* 본문 내용이 길어지면 auto로 정한다. */
    height: auto;
}
main.tablemenu{
    width: 100%;
    margin-top: var(--header-height);
    /* 최소 높이를 정한다. */
    min-height: calc(100vh - var(--header-height) - var(--gap-3));
    display: flex;
}
.tablemenu-wrapper{
    width: 100%;
    height: 100%;    
    border-radius: var(--gap-3);
    box-shadow: 0 -1px 2px var(--box-shadow-1),0 1px 2px var(--box-shadow-1);
    background: var(--site-color-1);
}
.tablemenu-container{
    width: 100%;
    height: 100%; 
}
.table-wrapper {
    /* 부모의 나머지 공간을 전부 사용한다. */
    flex:1;
    width: 100%;        
    padding: var(--gap-1);    
}
.table-container {
    width: 100%;    
    flex:1;
    height: 100%;
    /* padding을 조금 작게 한다. */
    padding: var(--gap-1);
    border-radius: var(--gap-2);
    overflow-y: hidden;
    overflow-x: scroll;
    /* 스크롤바가 보이지 않게 한다. */
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
    box-shadow: 0 0 5px var(--box-shadow-1);
    background: #ffffff;
}
/* 스크롤바가 보이지 않게 한다. */
.table-container::-webkit-scrollbar{
    /* Chrome, Safari, Opera*/
    display: none;    
}
.table-container table{
    width: 100%;
    height: 100%;    
    /* 최소 높이를 정하지 않는다. */ 
    border-collapse: collapse;
    border-radius: var(--gap-2);
    overflow: hidden;
    box-shadow: 0 0 5px var(--box-shadow-1);
    background: #ffffff;
}
.table-container th {
    padding: var(--gap-1);
    font-size: var(--fontsize-h4);
    color: #000000;
    background: var(--site-color-1);
}
/* message table에서는 message가 더 길게 나오도록 한다. */
.tablemenu.message .table-container th:nth-child(1){   
    width: 140px;
}
/* ranking table에서 이름이 더 길게 나오도록 한다. */
.tablemenu.ranking .table-container th:nth-child(2){
    width: 65%;
}
/* mobile에서는 글자 크기를 작게 한다. */
.table-container tbody td{
    padding: var(--gap-1);
    word-break: break-all;
    font-size: var(--fontsize-h4);   
    /* 아래 css를 설정해야 가로를 줄였을 때 테이블 칸이 줄어든다.*/ 
    max-width: 0;    
    overflow: hidden;  
    /* white-space:wrap은 없다. */
}
/* message에서는 처음 것만 가운데 정렬한다. 첫번째가 이름이다. */
.tablemenu.message .table-container tbody td:nth-child(1){
    text-align: center;  
}
.tablemenu.message .table-container tbody td:nth-child(2){
    word-break: keep-all; 
}

/* -- ranking table 관련이다. -- */
.ranking .notice{
    padding: 20px;
    font-size: var(--fontsize-h3);
}
.ranking .table-container{
    display: none;
}
.ranking .table-container.show{
    display: block;
}
.select-container{
    padding: 0 var(--gap-2) var(--gap-2);
}
#ranking-select{
    font-family: var(--font-basic);
    /* mobile에서 작게 한다.*/
    font-size: var(--fontsize-h1);
    text-align: center;
    padding: var(--gap-1) !important; 
    border-radius: var(--gap-1);
    border: 3px solid var(--second-color);
    outline: none 0;
    background: #ffffff !important;
}  
#ranking-select option:hover{
    background: var(--second-color) !important;
}  
/* ranking에서는 가운데 정렬한다. */
.tablemenu.ranking .table-container tbody td{
    text-align: center;     
}
/* name을 보여주는 곳은 왼쪽 정렬한다. 2번째가 이름이다. */
.tablemenu.ranking .table-container tbody td:nth-child(2){
    text-align: left;    
    overflow-x:scroll !important;     
    text-overflow:initial !important; 
    /* IE and Edge */
    -ms-overflow-style: none;
    /* Firefox */
    scrollbar-width: none;
}
.tablemenu.ranking .table-container tbody td:nth-child(2)::-webkit-scrollbar{
    /* Chrome, Safari, Opera*/
    display: none;    
}
/* top rank다. */
.top-rank{
    /* mobile에서는 작게한다. */
    font-size: var(--fontsize-h2) !important;
    font-weight: bold;
}
/* top rank의 이름이다. */
/* span 태그다. */
.top-rank.name{
    display: inline-block;
    padding: 5px 7px;   
    border-radius: var(--gap-1);
    background: var(--site-color-1);
    animation: heartbeatRanking 1s infinite;
}
@keyframes heartbeatRanking {
    50% {
        transform: scale(1.03);
    }
}
.top-rank .fa-crown{
    color: #000000;
    text-shadow: 2px 2px #ffffff, 1px -1px #ffffff;  
}

@media screen and (max-width: 890px) {  
    #ranking-select{      
        font-size: var(--fontsize-h3);  
    }    
    .table-container tbody td{
        /* mobile에서는 글자 크기를 작게한다. */
        font-size: var(--fontsize-basic) !important;      
    }    
}

@media screen and (max-width: 400px) {
    .tablemenu.message .table-container th:nth-child(1){          
        /* 너비를 더 작게 한다. */
        width: 80px;     
    }
    .top-rank{
        /* mobile에서 글자 크기를 작게한다. */
        font-size: var(--fontsize-h3) !important;      
    }
}