.list-hero{display:flex;flex-direction:column;align-items:flex-start;gap:var(--space-2);width:100%}.list-hero__title{font-family:var(--font-family-primary);font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);line-height:1.4;letter-spacing:.05em;color:#353535;margin:0}.list-hero__underline{width:14px;height:5px;background-color:#f0620f;border-radius:var(--radius-md)}.list-body{display:flex;flex-direction:column;align-items:center;width:100%;background-color:var(--color-bg-body);padding:var(--space-6) 0}.list-body__container{display:flex;flex-direction:column;gap:var(--space-6);max-width:var(--content-max-width);width:100%;padding:0 var(--space-4)}.list-body__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);width:100%}.list-card{display:flex;flex-direction:column;width:100%}.list-card__link{display:flex;flex-direction:column;background-color:var(--color-bg-surface);border-radius:var(--radius-md);overflow:hidden;text-decoration:none;color:inherit;transition:transform .2s ease,box-shadow .2s ease;height:100%}.list-card__link:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}.list-card__image-wrapper{position:relative;width:100%;aspect-ratio:320 / 180;overflow:hidden;background-color:#f0f0f0}.list-card__image{width:100%;height:100%;object-fit:cover;transition:opacity .3s ease}.list-card__overlay{position:absolute;top:0;left:0;width:100%;height:100%;background-color:#0009;display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .3s ease}.list-card__link:hover .list-card__overlay{opacity:1}.list-card__overlay-text{display:flex;align-items:center;gap:var(--space-1);font-family:var(--font-family-primary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:1;color:var(--color-text-light);text-align:center}.list-card__overlay-icon{font-size:20px;line-height:1}.list-card__content{display:flex;flex-direction:column;gap:18px;padding:var(--space-5)}.list-card__meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}.list-card__category{display:flex;align-items:center;gap:var(--space-2)}.list-card__category-icon{width:8px;height:3px;border-radius:var(--radius-lg);flex-shrink:0;background-color:#a5d7a0}.list-card__category-icon--green{background-color:#a5d7a0}.list-card__category-icon--orange{background-color:var(--color-brand-accent)}.list-card__category-icon--pink{background-color:#f5a5c8}.list-card__category-text{font-family:var(--font-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);letter-spacing:var(--letter-spacing-normal);color:#353535}.list-card__date{font-family:var(--font-family-secondary);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);line-height:1.4;color:#353535}.list-card__title{font-family:var(--font-family-primary);font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);line-height:1.4;letter-spacing:var(--letter-spacing-normal);color:#353535;margin:0}.list-card__footer{display:flex;flex-direction:column;gap:var(--space-2)}.list-card__author{font-family:var(--font-family-primary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);line-height:var(--line-height-normal);letter-spacing:var(--letter-spacing-normal);color:#353535;margin:0}.list-card__tag{font-family:var(--font-family-primary);font-size:var(--font-size-xs);font-weight:var(--font-weight-medium);line-height:1.4;letter-spacing:var(--letter-spacing-normal);color:#353535;margin:0}.list-body__button-wrapper{display:flex;justify-content:center;width:100%}.list-body__button{display:flex;align-items:center;justify-content:center;gap:var(--space-3);background-color:#353535;color:var(--color-text-light);border:1px solid #000111;border-radius:var(--radius-md);padding:var(--space-3) var(--space-6);text-decoration:none;font-family:var(--font-family-primary);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);line-height:1.4;transition:background-color .2s ease,transform .2s ease}.list-body__button:hover{background-color:#4a4a4a;transform:translateY(-1px)}.list-body__button-text{white-space:nowrap}.list-body__button-icon{display:flex;align-items:center;justify-content:center;font-size:20px;transform:scaleY(-1)}@media (max-width: 768px){.list-body__grid{grid-template-columns:repeat(2,1fr);gap:var(--space-4)}.list-card__content{gap:var(--space-4);padding:var(--space-4)}.list-card__title{font-size:var(--font-size-md)}}@media (max-width: 540px){.list-hero__title{font-size:var(--font-size-xl)}.list-body{padding:var(--space-6) 0}.list-body__container{gap:var(--space-6);padding:0 var(--space-3)}.list-body__grid{grid-template-columns:1fr;gap:var(--space-4)}.list-card__content{gap:var(--space-3);padding:var(--space-4)}.list-card__meta{gap:var(--space-2)}.list-card__title{font-size:var(--font-size-md);line-height:1.5}.list-body__button{padding:var(--space-3) var(--space-5);font-size:var(--font-size-sm)}}.article-separator{border:none;height:1px;background-color:var(--color-border-light);margin:0}.article-related{background-color:var(--color-bg-body);padding:calc(var(--space-6) * 2) 0}.article-related__container{max-width:var(--content-max-width);margin:0 auto;padding:0 var(--space-5);display:flex;flex-direction:column;gap:calc(var(--space-6) * 2)}.article-related__section{display:flex;gap:var(--space-6);align-items:flex-start}.article-related__heading{font-family:var(--font-family-primary);font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-normal);color:var(--color-text-primary);flex:0 0 400px;max-width:400px}.article-related__category-grid{flex:1;display:grid;grid-template-columns:repeat(2,1fr);grid-template-rows:repeat(2,1fr);gap:var(--space-5);width:100%}.article-related__category-link{background-color:var(--color-bg-surface);border-radius:var(--radius-md);padding:var(--space-3);display:flex;align-items:center;justify-content:center;gap:var(--space-3);text-decoration:none;transition:opacity .2s}.article-related__category-link:hover{opacity:.7}.article-related__category-icon{width:10px;height:4px;border-radius:var(--radius-lg);flex-shrink:0}.article-related__category-icon--orange{background-color:#fac8a5}.article-related__category-icon--pink{background-color:#f09191}.article-related__category-icon--green{background-color:#a5d7a0}.article-related__category-text{font-family:var(--font-family-primary);font-size:var(--font-size-md);font-weight:var(--font-weight-medium);line-height:1.4;color:var(--color-text-primary);white-space:nowrap}.article-related__keyword-grid{flex:1;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-5);max-width:632px}.article-related__keyword-link{background-color:var(--color-bg-surface);border-radius:var(--radius-md);padding:var(--space-3);display:flex;align-items:center;justify-content:center;font-family:var(--font-family-primary);font-size:.8125rem;font-weight:var(--font-weight-medium);line-height:1.4;color:var(--color-text-primary);text-decoration:none;text-align:center;transition:opacity .2s;white-space:nowrap}.article-related__keyword-link:hover{opacity:.7}@media (max-width: 768px){.article-related{padding:calc(var(--space-6) * 2) var(--space-5)}.article-related__container{padding:0;gap:calc(var(--space-6) * 2)}.article-related__section{flex-direction:column;gap:var(--space-5)}.article-related__heading{flex:none;max-width:100%;width:100%;font-size:var(--font-size-xl);line-height:var(--line-height-tight)}.article-related__category-grid{grid-template-columns:1fr;grid-template-rows:auto;gap:var(--space-5)}.article-related__category-link{gap:10px;padding:var(--space-3)}.article-related__category-text{font-size:var(--font-size-base);line-height:1.4}.article-related__keyword-grid{display:flex;flex-wrap:wrap;gap:var(--space-3);max-width:100%}.article-related__keyword-link{font-size:var(--font-size-xs);line-height:1.4;padding:11px var(--space-3) var(--space-3);flex:0 0 auto}}