:root{--color-primary:#165DFF;--color-neutral-50:#F8FAFC;--color-neutral-100:#F1F5F9;--color-neutral-200:#E2E8F0;--color-neutral-300:#CBD5E1;--color-neutral-400:#94A3B8;--color-neutral-500:#64748B;--color-neutral-600:#475569;--color-neutral-700:#334155;--color-neutral-800:#1E293B;--color-neutral-900:#0F172A;--spacing-xs:0.5rem;--spacing-sm:1rem;--spacing-md:1.5rem;--spacing-lg:2rem;--radius-sm:0.375rem;--radius-lg:0.75rem;--radius-xl:1rem;--shadow-sm:0 2px 4px rgba(0,0,0,0.04);--shadow-card:0 4px 12px rgba(0,0,0,0.05);--shadow-card-hover:0 10px 24px rgba(22,93,255,0.12);--transition-base:all 0.2s ease;--transition-slow:all 0.3s ease;}
*{margin:0;padding:0;box-sizing:border-box;}
body{background-color:#fff;font-family:'Inter',system-ui,-apple-system,sans-serif;color:var(--color-neutral-800);line-height:1.5;}
.container{width:100%;max-width:1280px;margin:0 auto;padding:0 var(--spacing-sm);}
.text-balance{text-wrap:balance;}
.line-clamp-2{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.text-center{text-align:center;}
.mx-auto{margin-left:auto;margin-right:auto;}
.flex{display:flex;}
.flex-wrap{flex-wrap:wrap;}
.justify-center{justify-content:center;}
.justify-start{justify-content:flex-start;}
.items-center{align-items:center;}
.py-8{padding-top:2rem;padding-bottom:2rem;}
.mb-8{margin-bottom:2rem;}
.mt-8{margin-top:2rem;}
.mb-4{margin-bottom:1rem;}
.mb-3{margin-bottom:0.75rem;}
.gap-3{gap:0.75rem;}
.rounded-xl{border-radius:1rem;}
.text-sm{font-size:0.875rem;}
.text-neutral-600{color:var(--color-neutral-600);}
.text-neutral-700{color:var(--color-neutral-700);}
.bg-white{background-color:#fff;}
.bg-neutral-50{background-color:var(--color-neutral-50);}
.bg-neutral-100{background-color:var(--color-neutral-100);}
.p-8{padding:2rem;}
.text-center{text-align:center;}
.mb-2{margin-bottom:0.5rem;}
.text-neutral-900{color:var(--color-neutral-900);}
.font-bold{font-weight:700;}
.text-[clamp(1.5rem,3vw,2.5rem)]{font-size:clamp(1.5rem,3vw,2.5rem);}
.tag-nav{display:flex;flex-wrap:wrap;gap:0.5rem;justify-content:center;margin-bottom:var(--spacing-lg);}
.tag-item{padding:0.375rem 0.75rem;border-radius:9999px;font-size:0.875rem;font-weight:500;text-decoration:none;transition:var(--transition-base);display:inline-flex;align-items:center;}
.tag-item.bg-primary{background-color:var(--color-primary);color:#fff;box-shadow:var(--shadow-sm);}
.tag-item.bg-white{background-color:#fff;border:1px solid var(--color-neutral-200);color:var(--color-neutral-700);}
.tag-item.bg-white:hover{border-color:rgba(22,93,255,0.3);background-color:var(--color-neutral-50);}
.grid{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:var(--spacing-md);}
@media (min-width:768px){.grid{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media (min-width:1024px){.grid{grid-template-columns:repeat(3,minmax(0,1fr));}}
article{background-color:#fff;border:1px solid var(--color-neutral-100);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);transition:var(--transition-slow);}
.card-hover:hover{transform:translateY(-4px);box-shadow:var(--shadow-card-hover);}
.block{display:block;text-decoration:none;color:inherit;}
.thumbnail-container{position:relative;width:100%;padding-top:56.25%;background-color:var(--color-neutral-50);border-bottom:1px solid var(--color-neutral-100);overflow:hidden;}
.thumbnail-container img{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:cover;transition:transform 0.3s ease;}
.thumbnail-container img:hover{transform:scale(1.05);}
.no-image{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;background-color:var(--color-neutral-50);}
.no-image svg{width:40px;height:40px;color:var(--color-neutral-300);}
.title-wrapper{padding:var(--spacing-sm);}
.title-wrapper h3{font-size:1rem;font-weight:600;color:var(--color-neutral-900);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.block:hover .title-wrapper h3{color:var(--color-primary);}
.col-span-full{grid-column:1/-1;background-color:var(--color-neutral-50);padding:var(--spacing-lg);border-radius:var(--radius-xl);text-align:center;}
.w-16{width:4rem;height:4rem;margin:0 auto 1rem;background-color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-sm);}
.pagination{margin:var(--spacing-md) 0;text-align:center;}
.pagination a,.pagination .current-page{display:inline-block;padding:0.5rem 0.75rem;margin:0 2px;border-radius:var(--radius-sm);text-decoration:none;transition:var(--transition-base);font-size:0.875rem;}
.pagination a{border:1px solid var(--color-neutral-300);color:var(--color-neutral-700);background-color:#fff;}
.pagination a:hover{background-color:var(--color-neutral-50);border-color:var(--color-neutral-400);}
.pagination .current-page{background-color:var(--color-primary);color:#fff;border:1px solid var(--color-primary);font-weight:500;}
.page-info{text-align:center;color:var(--color-neutral-500);font-size:0.875rem;margin-bottom:var(--spacing-xs);}
footer{background-color:var(--color-neutral-900);color:var(--color-neutral-400);padding:var(--spacing-lg) 0;margin-top:4rem;font-size:0.75rem;text-align:center;}
footer a{color:var(--color-neutral-400);text-decoration:underline;text-underline-offset:2px;transition:var(--transition-base);}
footer a:hover{color:#fff;}
.animate-fade-in{opacity:0;animation:fadeIn 0.5s ease forwards;}
@keyframes fadeIn{100%{opacity:1;}}
@media (max-width:640px){.tag-item{padding:0.25rem 0.5rem;font-size:0.75rem;}.grid{gap:0.75rem;}.pagination a,.pagination .current-page{padding:0.375rem 0.625rem;font-size:0.75rem;}footer{margin-top:var(--spacing-lg);padding:var(--spacing-md) 0;}}