@charset "utf-8";

.rv-preview { max-width:1200px; margin:60px auto; padding:0 20px; }
.rv-preview-head { text-align:center; margin-bottom:40px; }
.rv-preview-title { font-size:36px; font-family:'GS_B'; color:#333; margin:0 0 8px; letter-spacing:1px; }
.rv-preview-title:after { content:""; display:block; width:40px; height:2px; background:#70ad47; margin:16px auto 0; }
.rv-preview-sub { color:#777; font-size:15px; margin-top:14px; }

.rv-preview-list { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3, 1fr); gap:20px; }
.rv-preview-list li { margin:0; }
.rv-preview-card { display:block; text-decoration:none; color:#333; background:#fff; border:1px solid #eee; border-radius:12px; overflow:hidden; transition:all 0.3s; box-shadow:0 2px 8px rgba(0,0,0,0.04); }
.rv-preview-card:hover { transform:translateY(-4px); box-shadow:0 12px 24px rgba(0,0,0,0.1); border-color:#70ad47; }
.rv-preview-thumb { display:block; width:100%; padding-top:66%; position:relative; background:#f5f5f5; overflow:hidden; }
.rv-preview-thumb img { position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; }
.rv-preview-meta { display:block; padding:16px 18px; }
.rv-preview-subject { display:block; font-size:15px; font-weight:600; color:#333; margin-bottom:6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rv-preview-date { display:block; font-size:12px; color:#999; }

.rv-preview-empty { text-align:center; padding:60px 20px; background:#fafafa; border-radius:12px; color:#999; }

.rv-preview-more { text-align:center; margin-top:36px; }
.rv-preview-more a { display:inline-block; padding:14px 36px; background:#70ad47; color:#fff; text-decoration:none; font-size:15px; font-family:'GS_B'; border-radius:30px; transition:all 0.3s; }
.rv-preview-more a:hover { background:#398f00; transform:translateY(-2px); box-shadow:0 8px 16px rgba(0,0,0,0.15); }

@media screen and (max-width:900px) {
    .rv-preview { margin:40px auto; }
    .rv-preview-title { font-size:26px; }
    .rv-preview-sub { font-size:13px; }
    .rv-preview-list { grid-template-columns:repeat(2, 1fr); gap:14px; }
    .rv-preview-meta { padding:12px 14px; }
    .rv-preview-subject { font-size:14px; }
    .rv-preview-more a { padding:12px 28px; font-size:14px; }
}

@media screen and (max-width:500px) {
    .rv-preview-list { grid-template-columns:1fr; }
}