*{
 margin : 0;
 padding: 0;
 box-sizing: border-box;
}

body {
    overflow: hidden;
}

h1 {
  position: absolute;
  top: 1px;                
  left: 1px;
  /*transform: translateX(-50%);*/
  width: auto;          
  text-align: center;
  font-size: 9.8pt;
  font-weight: normal;
  border: 0;   
  background-color: white;
  padding: 3px 3px;     
  z-index: 1;
  height: auto;
  margin: 1px;
}


/*.top a {
    flex: 0 0 120px;
    display: flex;
}*/

.top {
    position: absolute;
    height: 45%;
    width: 100%;
    display: flex;
    overflow-x: scroll;
    overflow-y: hidden;
    /*scrollbar-width: none;*/
    border: 1px solid black; 
    box-sizing: border-box;
    margin: 1px;
    padding-top: 6px;
}

.top {
    overflow-x: auto;
}

.top::-webkit-scrollbar {
    height: 6px;
}

.top::-webkit-scrollbar-thumb {
    background: transparent;
}

.top:hover::-webkit-scrollbar-thumb {
    background: yellow;
}


.category {
    height: 100%;
    /*border: 0.5px black solid;*/
    border: none;
    border-right: 1px solid black;
    width: 100px;
    display: flex;              
    align-items: center;       
    justify-content: center;  
    flex: 0 0 100px;            
    white-space: normal;    
    word-break: keep-all; 
    overflow-wrap: break-word; 
    text-align: center;
    font-size: 9.8pt;
}

/*.category:last-child {
    border-right: none;
}*/

a {
    text-decoration: none;
    color: black;
}

a:hover {
    color: black;
}

.bottom {
    position: absolute;
    height: 55%;
    width: 100%;
    top: 45%;
    display: flex;
    justify-content: center;   /* 가운데 정렬 (가로) */
    align-items: center;
    overflow-x: hidden;
    overflow-y: auto; 
}

.main {
    width: 25%;
    height: 100%;
    border: 0.5px white;
    overflow-x: hidden;
    overflow-y: auto;
    text-align: left;
    padding: 10px;
    font-size: 9.6pt;
    line-height: 15pt;

}

/* 스크롤 기본 구조 */
.main::-webkit-scrollbar {
    width: 6px;              /* top과 동일한 6px */
}

/* 기본은 투명 */
.main::-webkit-scrollbar-thumb {
    background: transparent;
}

/* hover 시만 색 */
.main:hover::-webkit-scrollbar-thumb {
    background: yellow;
}

/* 트랙은 항상 투명 */
.main::-webkit-scrollbar-track {
    background: transparent;
}


/*.rounded-box {
    width: 100%;                /* 원하는 크기 */
    height: 15%;
    border: 1px solid black;
    border-radius: 10px;       /* ← 둥근 모서리 */
    padding: 5px;
    box-sizing: border-box;
    text-align: center;
    text-justify: center;


}*/



.main:hover::-webkit-scrollbar-thumb {
    background: yellow;
}