.psg-folder,
.psg-sprite,
.psg-folder *,
.psg-sprite * {
box-sizing: border-box;
} .psg-search {
display: flex;
gap: 10px;
margin-bottom: 30px;
}
.psg-search input {
flex: 1;
padding: 10px 14px;
font-size: 15px;
} .psg-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
gap: 18px;
} .psg-folder {
background: #f4f4f4;
border-radius: 16px;
padding: 16px;
text-align: center;
cursor: pointer; transition: transform .2s ease, box-shadow .2s ease;
text-decoration: none;
color: inherit;
position: relative;
}
.psg-folder:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.08);
}
.psg-folder img {
height: 120px;
width: 100%;
object-fit: contain;
}
.psg-folder span {
display: block;
margin-top: 12px;
font-size: 14px;
font-weight: 500;
}
.psg-folder._special {
background: linear-gradient(135deg,#fff4c2,#ffe08a);
border: 2px solid #f5c542;
}
.psg-badge {
position: absolute;
top: 8px;
right: 8px;
background: #ffcc00;
color: #000;
font-size: 12px;
font-weight: bold;
width: 26px;
height: 26px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
} .psg-grid.sprites .psg-sprite {
background: #fafafa;
border-radius: 12px;
padding: 14px;
height: 160px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer; text-decoration: none;
}
.psg-sprite img {
max-width: 100%;
max-height: 130px;
width: auto;
height: auto;
image-rendering: pixelated;
} .psg-full {
max-width: 100%;
margin: 40px auto;
text-align: center;
} .psg-full img {
max-width: 100%;
max-height: 80vh; width: auto;
height: auto;
display: inline-block;
} .psg-back {
display: inline-block;
margin: 20px 0;
font-weight: 600;
cursor: pointer;
text-decoration: none;
}
.psg-folder.special {
background: #fff7cc;
grid-column: span 1;
}
.psg-folder._special {
background: linear-gradient(135deg,#fff4c2,#ffe08a);
border: 2px solid #f3c200;
}
.psg-breadcrumbs {
background: #f6f7f8;
border: 1px solid #e0e0e0;
border-radius: 10px;
padding: 10px 14px;
margin: 15px 0 25px;
font-size: 14px;
}
.psg-breadcrumbs a {
color: #0073aa;
text-decoration: none;
font-weight: 500;
}
.psg-breadcrumbs .current {
font-weight: bold;
}
.psg-breadcrumbs .sep {
margin: 0 6px;
color: #999;
} .psg-pagination {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 6px;
margin: 30px 0;
}
.psg-pagination a,
.psg-pagination span {
min-width: 40px;
height: 40px;
padding: 0 10px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 10px;
border: 1px solid #e1e1e1;
background: #fff;
font-size: 14px;
font-weight: 500;
color: #333;
text-decoration: none;
transition: all 0.2s ease;
}
.psg-pagination a:hover {
background: #f2f2f2;
}
.psg-pagination .current {
background: #111;
color: #fff;
border-color: #111;
font-weight: 600;
} .psg-pagination .dots {
pointer-events: none;
border: none;
background: transparent;
font-weight: bold;
} @media (max-width: 640px) {
.psg-pagination {
gap: 4px;
}
.psg-pagination a,
.psg-pagination span {
min-width: 36px;
height: 36px;
font-size: 13px;
}
}
.psg-nav {
display: flex;
justify-content: space-between;
margin: 20px 0;
}
.psg-nav a {
background: #f0f0f0;
padding: 10px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
}
.psg-fav-wrap {
text-align: right;
margin-bottom: 10px;
}
.psg-fav {
background: #fff;
border: 2px solid #f3c200;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
font-weight: bold;
}
.psg-popular {
list-style: none;
padding: 0;
}
.psg-popular li {
margin-bottom: 6px;
}
.psg-favorite-wrap {
margin: 20px 0;
text-align: center;
}
.psg-favorite-btn {
padding: 10px 18px;
border-radius: 8px;
border: 1px solid #ccc;
background: #f5f5f5;
cursor: pointer;
font-size: 15px;
}
.psg-favorite-btn:hover {
background: #eaeaea;
} .psg-popular .psg-grid {
display: flex;
flex-wrap: wrap; gap: 7px; align-items: center;
justify-content: center;
}
.psg-popular .psg-sprite {
flex: 0 0 120px; height: 12px; position: relative; transition: transform 0.2s ease, box-shadow 0.2s ease, z-index 0s;
}
.psg-popular .psg-sprite:hover {
transform: scale(1.3); z-index: 10; box-shadow: 0 12px 24px rgba(0,0,0,0.2); background: #fff9e6; }