:root{
    --menu-img-width: 15vh;
}
body,
html {
    /* 본문이 길면 auto라고 정한다. */
    height: auto;
}
.center {
    padding-top: var(--gap-3);   
}
.page-list-wrapper {
    /* heart의 기준이다. */
    position: relative;
    /* flex-start-col */
    /* 위로 정렬한다. */
    width: 100%;    
    /* 내용이 많지 않을 때는 100%로 정한다.  */
    height: 100%;
    /* 내용이 많으면 최소 높이를 정하고 html, body의 height를 auto로 설정한다. */
    min-height: calc(100vh - var(--header-height) - var(--gap-3));    
    padding: var(--gap-1);    
    border-radius: var(--gap-3) var(--gap-3) 0 0;
    /* 부모의 background가 아닌 border로 테두리를 색을 정한다. */
    border: var(--gap-1) solid var(--site-color-1);
    box-shadow: 0 -1px 2px var(--box-shadow-1),0 1px 2px var(--box-shadow-1);
    background: #ffffff;   
}
.page-list-content{
    width: 100%;
    /* 메뉴가 남은 영역을 차지해서 제목이 위로 올라가도록 한다. */
    flex:1;
    /* mobile에서 작게 정한다. */   
    gap:var(--gap-3);   
}
.page-list-content a{
    /* display:block을 해야 공간을 차지한다.*/
    display: block;   
    color: #000000;
    /* 너비를 정한다. */
    width: 80%;
    max-width: 350px;
}
.page-list{    
    overflow: hidden;   
    border-radius: var(--gap-2);
    box-shadow: 0 0 3px var(--box-shadow-1);
}

.page-list:hover .page-list-img::before{
    transform: scale(1.1);
}
.page-list:hover .page-list-name{
    transform: scale(1.1);
    color:var(--site-color-1);
    text-shadow: 1px 1px #000000;
}
.page-list-img{
    position: relative;
    /* common.css에서 설정한다. */
    width: var(--menu-img-width);
    height: var(--menu-img-width);
    background-position: center;
    background-size: cover;   
    overflow: hidden; 
}
.page-list-img::before{
    content: "";
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* 부모의 설정을 사용한다. */
    background: inherit;
    transition: inherit;
    transition: all 0.1s ease-in;
}
.page-list-summary{
    flex:1;
    padding:var(--gap-2);
    
}
/* 항목의 제목이다. */
.page-list-name{
    /* mobile에서는 작게 한다. */
    font-size: var(--fontsize-h2);   
    text-align: center;
    word-break: keep-all;
    /* 왼쪽 가운데로 기준을 정해야 한다. */
    transform-origin: 50% 100%;
    transition: 0.2s;
}
@media screen and (max-width: 890px){     
    .page-list-content{
        gap:var(--gap-3);
    }
    .page-list-name{
        font-size: var(--fontsize-p);
    }
}