body {
    margin: 0;
    font-family: Arial, sans-serif;
}
a{
    text-decoration: auto;
    color: #432818;
}



.content {
    padding: 20px;
    /* border: 1px solid #ccc; */
    /* border-radius: 8px; */
    background-color: #f9f9f9;
}

.angry-grid {
    /* display: grid;  */
    /* grid-template-rows: 60px 70px 600px 500px 600px 600px 600px; */
    /* grid-template-columns: auto; */
    /* gap: 0px; */
    /* height: 100%; */
    display: flex;
    flex-direction: column;
    gap: 3px; /* 20px; */
    padding: 20px;
    transition: all 0.3s ease-in-out; /* 부드러운 전환 효과 */
}

#item-0 {
    background-color: #edede9; 
}

#item-1 {
    /* height: 30px; */
    /* width: 850px; */
    background-color: #d6ccc2; 
    display: flex; /* 플렉스 컨테이너 설정 */
    justify-content: center; /* 가로 중앙 정렬 */
    align-items: center; /* 세로 중앙 정렬 */
    /*height: 200px;*/ /* 높이 지정 (필요에 따라 조정) */
    /*width: 850px;*/ /* 너비 지정 */
}
#item-1 ul {
    display: flex; /* ul 내부를 플렉스 컨테이너로 설정 */
    gap: 10px; /* li 간 간격 */
    margin: 0; /* ul 기본 여백 제거 */
    padding: 0; /* ul 기본 패딩 제거 */
    list-style: none; /* 불필요한 목록 스타일 제거 */
}
#item-1 ul li { 
    /*
    list-style: none;          
    color: white;              
    background-color: #2d2d2d; 
    float: left;               
    line-height: 30px;         
    vertical-align: middle;    
    text-align: center;       
    */
    
    background-color: #e3d5ca; 
    color: #432818;              
    line-height: 30px;         
    text-align: center;    
}
#item-1 .menuLink {
    text-decoration:none;                      
    color: #432818;                              
    display: block;                            
    width: 150px;                              
    font-size: 12px;                           
    font-weight: bold;                         
    font-family: "Trebuchet MS", Dotum, Arial; 
}
#item-1 .menuLink:hover {
    color: red;                
    background-color: #f5ebe0;  
}

#item-2 {
    background-color: #f9f9f9;
    /* background-color: #f5ebe0;  */
    /* color: #d6ccc2; */
}

#item-3 {
    /* background-color: #e3d5ca;  */
}

#item-4 {
    background-color: #f9f9f9;
    /* background-color: #d5bdaf;  */
    /* color: #d6ccc2; */
}

#item-5 {
    /* background-color: #d4a373;  */
}

#item-6 {
    background-color: #f9f9f9;
    /* background-color: #432818;  */
    /* color: #d6ccc2; */
}

.onepost {
    cursor :pointer;
}
/* #item-0 { */
    /* position:relative; */
    /* background-color: #000333;  */
    /* grid-row-start: 1; */
    /* grid-column-start: 1; */
    /* grid-row-end: 2; */
    /* grid-column-end: 2; */
/* } */
/*  */
/* #item-1 { */
    /* position:relative; */
    /* background-color: #ffffff;  */
    /* grid-row-start: 3; */
    /* grid-column-start: 1; */
    /* grid-row-end: 4; */
    /* grid-column-end: 2; */
/* } */
/*  */
/* #item-2 { */
    /* position:relative; */
    /* background-color: #4e9525;  */
    /* grid-row-start: 2; */
    /* grid-column-start: 1; */
    /* grid-row-end: 3; */
    /* grid-column-end: 2; */
/* } */
/*  */
/* #item-3 { */
    /* position:relative; */
    /* background-color: #dedede;  */
    /* grid-row-start: 4; */
    /* grid-column-start: 1; */
    /* grid-row-end: 5; */
    /* grid-column-end: 2; */
/* } */
/*  */
/* #item-4 { */
    /* position:relative; */
    /* background-color: #5ba679;  */
    /* grid-row-start: 5; */
    /* grid-column-start: 1; */
    /* grid-row-end: 6; */
    /* grid-column-end: 2; */
/* } */
/*  */
/* #item-5 { */
    /* position:relative; */
    /* background-color: #89da95;  */
    /* grid-row-start: 6; */
    /* grid-column-start: 1; */
    /* grid-row-end: 7; */
    /* grid-column-end: 2; */
/* } */
/*  */
/* #item-6 { */
    /* position:relative; */
    /* background-color: #000000;  */
    /* grid-row-start: 7; */
    /* grid-column-start: 1; */
    /* grid-row-end: 8; */
    /* grid-column-end: 2; */
/* } */