:root {
  --section-max-width: 1680px;
  --container-gutter: 40px;

  @media (max-width: 768px) {
    --container-gutter: 24px;
  }

  --single-max-width: 780px;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-block: 0;
}

a {
  text-decoration: none;
  color: #333;
}

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0 !important;
  padding: 0;
  width: 100%;
}

body {
  background-color: #f8f8f8;
  color: #333;
  font-family: 'Inter', 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  position: relative;
}

.container {
  max-width: var(--section-max-width);
  margin: 0 auto;
  padding: 0 var(--container-gutter);
}

.post-grid {
  column-width: 240px;
  column-gap: 24px;
}

.article {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  margin-bottom: 24px;
  background: #fff;
  box-shadow: rgba(17, 17, 26, 0.1) 0 0 16px;
}

/* 전체를 클릭하게 하는 건 inner-link로 처리 */
.article-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

/* 썸네일 */
.article .post-thumbnail {
  width: 100%;
  position: relative;
  overflow: hidden;
}

.article .post-thumbnail:after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;

  /* 중앙은 투명 → 가장자리로 갈수록 어두워짐 */
  background: radial-gradient(
    circle,
    rgba(0, 0, 0, 0) 35%,
    rgba(0, 0, 0, 0.03) 75%,
    rgba(0, 0, 0, 0.08) 100%
  );
}

.article .post-thumbnail img {
  width: 100%;
  height: auto;
  display: block;
}

/* 콘텐츠 */
.article .card-content {
  padding: 20px;
  background-color: #fff;

  .post-meta {
    font-size: 12px;
    color: #666;
  }

  .post-title {
    margin: 8px 0 24px;
  }

  .view-more {
    font-size: 14px;
    position: relative;
    color: #333;
  }

  .view-more::after {
    content: '';
    position: absolute;
    display: inline-block;
    bottom: -4px;
    left: 0;
    width: 20px;
    border-bottom: 1px solid #333;
    z-index: 10;
    transition: width 0.3s ease-in-out;
  }
}

.article-link:hover .article .card-content {
  .view-more::after {
    content: '';
    width: 100%;
    transition: width 0.3s ease-in-out;
  }
}

.btn-load-post {
  text-align: center;
  margin-top: 120px;
  .load-more-btn {
    background-color: #333;
    color: #fff;
    border: 1px solid #333;
    padding: 12px 24px;
    min-width: 200px;
    transition: background-color 0.3s ease-in-out;
  }

  .load-more-btn:hover {
    background-color: #666;
    transition: background-color 0.3s ease-in-out;
  }
}