.haru-rolling{min-width:0;background:#fff;border:1px solid #e5e7eb;border-radius:14px;padding:18px 15px 12px}
.haru-rolling__header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px;margin-bottom:15px}
.haru-rolling__title{font-size:19px;line-height:1.3;font-weight:800;color:#111827;margin:0}
.haru-rolling__subtitle{font-size:12px;color:#64748b;margin-top:5px}
.haru-rolling__form{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.haru-rolling__form label{font-size:12px;color:#374151;font-weight:700}
.haru-rolling__form select,.haru-rolling__form input{border:1px solid #d1d5db;border-radius:8px;background:#fff;padding:7px 9px;font-size:13px;max-width:200px}
.haru-rolling__form input{width:68px}
.haru-rolling__form button{border:0;border-radius:8px;background:#111827;color:#fff;font-size:12px;font-weight:700;padding:9px 14px;cursor:pointer}
/* Exactly N complete cards in the viewport. No fifth partial card. */
.haru-rolling__viewport{--haru-visible:4;--haru-gap:12px;position:relative;width:100%;min-width:0;overflow:hidden;scrollbar-width:none;touch-action:pan-y;outline-offset:3px}
.haru-rolling__viewport::-webkit-scrollbar{display:none}
.haru-rolling__track{display:flex;flex-wrap:nowrap;gap:var(--haru-gap);width:max-content;align-items:stretch;will-change:transform}
.haru-rolling__card{box-sizing:border-box;position:relative;display:block;flex:none;width:var(--haru-card-width, 241px);height:228px;min-width:0;overflow:hidden;border-radius:11px;background:#e5e7eb;color:#fff;text-decoration:none}
.haru-rolling__card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.haru-rolling__card:hover img{transform:scale(1.05)}
.haru-rolling__shade{position:absolute;inset:0;background:linear-gradient(transparent 25%,rgba(0,0,0,.86))}
.haru-rolling__detail{position:absolute;inset:auto 0 0;padding:14px 13px;display:flex;flex-direction:column;gap:5px}
.haru-rolling__detail strong{font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.haru-rolling__detail small{font-size:11px;opacity:.9}
.haru-rolling__empty{padding:48px 12px;text-align:center;color:#6b7280;font-size:13px;background:#f9fafb;border-radius:10px}
.haru-rolling__foot{margin-top:10px;color:#9ca3af;font-size:11px;text-align:right}
@media(max-width:768px){.haru-rolling{padding:14px 10px}.haru-rolling__header{align-items:stretch}.haru-rolling__form{width:100%}.haru-rolling__form select{flex:1;min-width:120px}.haru-rolling__card{height:200px}}
@media(max-width:480px){.haru-rolling__card{height:214px}}