.subjcet-container{max-width:var(--container-default);margin:0 auto;padding-top:var(--space-12)}.poular-box:has(>h2){display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-3);padding-bottom:var(--space-4);border-bottom:1px solid var(--color-border)}.poular-box>h2{position:relative;padding-right:var(--space-4);font-size:var(--text-h3);font-weight:var(--font-bold);color:var(--brand-900)}.poular-box>h2:before{content:"";position:absolute;top:.2em;bottom:.2em;right:0;width:4px;border-radius:var(--radius-full);background:linear-gradient(180deg,var(--brand-400),var(--brand-600))}.poular-box>a.main-color{display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);border:1px solid var(--brand-100);border-radius:var(--radius-full);background:var(--brand-50);font-size:var(--text-small);font-weight:var(--font-semibold);white-space:nowrap;transition:var(--transition-base)}.poular-box>a.main-color:after{content:"←";transition:transform var(--duration-fast) var(--ease-out)}.poular-box>a.main-color:hover{border-color:var(--brand-800);background:var(--brand-800);color:var(--color-text-inverse)!important}.poular-box>a.main-color:hover:after{transform:translateX(-3px)}.subject-box{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),370px));justify-content:center;grid-gap:var(--space-6);gap:var(--space-6);padding:var(--space-6) 0}.card{display:flex;flex-direction:column;width:100%;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background-color:var(--color-bg);box-shadow:var(--shadow-xs);transition:transform var(--duration-base) var(--ease-out),box-shadow var(--duration-base) var(--ease-out),border-color var(--duration-base) var(--ease-out)}.card:hover{transform:translateY(-4px);border-color:var(--color-border-strong);box-shadow:var(--shadow-lg)}.image{position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;background-color:var(--color-bg-muted)}.image img{display:block;width:100%;height:100%;object-fit:cover;transition:transform var(--duration-slow) var(--ease-out)}.card:hover .image img{transform:scale(1.05)}.tag{position:absolute;top:var(--space-3);right:var(--space-3);max-width:calc(100% - var(--space-6));padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);background-color:rgba(4,54,74,.85);color:#fff;font-size:var(--text-tiny);font-weight:var(--font-medium);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.tag:hover{background-color:var(--brand-800)}.date{align-items:center;justify-content:space-between;gap:var(--space-2);min-height:44px;padding:var(--space-3) var(--space-4) 0;font-size:var(--text-small);font-weight:var(--font-semibold);color:var(--brand-600)}.date,.info{display:flex}.info{flex:1 1;flex-direction:column;padding:0 var(--space-4) var(--space-5)}.title{display:block;padding:var(--space-2) 0;color:var(--brand-800);font-size:var(--text-body);line-height:var(--leading-snug);font-weight:var(--font-semibold);transition:var(--transition-color)}.info a:hover .title{color:var(--brand-600)}.description{color:var(--color-text-subtle);font-size:var(--text-small);line-height:var(--leading-relaxed);font-weight:var(--font-regular)}