/* skin/css/list.css */

.capsule-box {
    display: flex; gap: 10px; padding: 15px 20px;
    overflow-x: auto;
}
.capsule {
    background: rgba(255,255,255,0.6);
    padding: 6px 16px; border-radius: 20px;
    font-size: 13px; color: #777; white-space: nowrap;
}
.capsule.active {
    background: #fff; color: #fa709a; font-weight: bold;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

.list-container { display: flex; flex-direction: column; }
.list-card {
    display: flex; align-items: center; margin-bottom: 15px;
}
.list-card img { width: 64px; height: 64px; border-radius: 16px; margin-right: 15px; }
.lc-content { flex: 1; }
.lc-content h4 { font-size: 16px; font-weight: bold; margin-bottom: 4px; }
.lc-tags span {
    font-size: 10px; background: #fff; color: #fa709a;
    padding: 2px 6px; border-radius: 4px; margin-right: 5px;
}
.lc-content p { font-size: 12px; color: #999; margin-top: 4px; }

.page-box {
    display: flex; justify-content: center; gap: 20px;
    padding: 20px; color: #999; font-size: 14px;
}