@charset "utf-8";

@media screen and (max-width:1280px){ 
	div.communityList {padding: 4em 3vw !important}
}

@media screen and (min-width:1281px){
	div.inner{width: 1240px}
}

/*콘텐츠*/
ul.picture-list {display: flex; flex-wrap: wrap; padding: 2rem 0 2rem; margin: -1.25rem}
a.picture-list {padding: 1.25rem}
div.picture-list-main-img {width: 100%; box-sizing: border-box; object-fit: cover; position: relative; aspect-ratio: 1/1}
div.picture-list-main-img img{width: 100%; height: 100%; border-radius: 10px; display: block; object-fit: cover}
div.picture-list-main-img .mask {border-radius: 10px}
p.picture-list-title {white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin: 10px 0; font-weight: 700; font-size: 1rem}
div.picture-list-info-wrap {display: flex; align-items: center; overflow: hidden}
div.picture-list-info-img img {width: 40px; height: 40px; margin-right: 0.5rem; border-radius: 5px; background-color: var(--color-background-secondary)}
div.picture-list-info-text {display: flex; flex-direction: column; flex: 1; gap: 0.25rem; overflow: hidden}
div.picture-list-info-name {display: flex; justify-content: space-between}
div.picture-list-info-social {display: flex; gap: 5px}
div.picture-list-info-social > span:first-child span {margin-right: 0.3125rem}
span.picture-list-info-social-ico {display: flex; align-items: center}
span.picture-list-info-social-ico > svg {width: 0.9375rem; fill: var(--color-primary); margin-right: 2px}
div.picture-list-info-name span {font-weight: bold}
div.picture-list-info-name > span:first-child {flex-grow: 0; flex-shrink: 1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}
div.picture-list-info-stat {display: flex; justify-content: flex-end}
div.picture-list-info-stat span {font-size: 0.875rem}

@media screen and (max-width:900px){
	a.picture-list {width: calc(100% / 2 - 2.5rem) !important;}
} 

@media screen and (max-width:1280px){
	a.picture-list {width: calc(100% / 3 - 2.5rem)}
	div.picture-list-info-stat span:nth-child(2) {display: none}
	p.picture-list-title {font-size: 1.1rem; font-weight: bold}
	div.picture-list-info-name span, div.picture-list-info-stat span {font-size: 1.1rem}
} 

@media screen and (min-width:1281px){
	a.picture-list {width: calc(100% / 5 - 2.5rem)}
	div.picture-list-info-stat span:nth-child(3) {display: none}
}

/*검색어 없거나 페이징*/ 
li.blank{text-align:center; margin: 30px auto}
li.blank > p{font-size:1.2em; color:var(--color-background-tertiary); line-height:25px}

div.paging {padding-top: 3.125rem; border-top: 2px solid var(--color-primary)}