/* News List Simple - 포트폴리오 리스트처럼 좌우 분할 */
.news-list-simple {
  width: 100%;
  height: 100vh;
  display: flex;
  flex-direction: column;
  z-index: 3;
}

.news-list-simple-container {
  display: flex;
  flex: 1;
  height: calc(100vh - 15rem);
  width: 100%;
}

/* 좌측: 단순 텍스트 영역 (추후 관리자에서 관리) */
.news-list-simple-left {
  width: 25%;
  overflow-y: auto;
  padding: calc(var(--space-8) * 3) 3rem 3rem 0;
  height: 100%;
}

.news-list-simple-text {
  font-size: var(--mm-font-size-3);
  color: var(--color-fg);
}

.news-list-simple-text p {
  margin: 0;
}

.news-list-simple-text p:last-child {
  margin-bottom: 0;
}

/* NEWS LIST 버튼 - 리스트에서는 비활성, 뉴스 데이터 불러온 경우 목록으로 돌아가기 */
.news-list-btn {
  display: block;
  border: none;
  background: none;
  font-size: var(--mm-font-size-3);
  font-weight: 500;
  color: inherit;
  cursor: default;
  opacity: 1;
  transition: opacity 0.2s ease;
  padding: 0;
  margin-bottom: var(--space-4);
  position: relative;
  width: fit-content;
}

.news-list-btn::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.25s ease;
}

/* 디테일 로드 시(버튼 활성화) 밑줄 표시 */
.news-list-btn:not(:disabled) {
  cursor: pointer;
  opacity: 1;
}

.news-list-btn:not(:disabled)::after {
  width: 100%;
}

.news-list-btn:not(:disabled):hover {
  opacity: 1;
}

/* 우측: 4단 칼럼 이미지 리스트 */
.news-list-simple-right {
  position: relative;
  width: 75%;
  overflow-y: auto;
  padding: calc(var(--space-8) + 3rem) 0 3rem;
  height: 100%;
}

.news-list-simple-right .news-simple-grid {
  width: 100%;
  padding: 0 3rem 0 0;
}

/* 좌측: news-content (카드 클릭 시 표시) */
.news-list-simple-content {
  width: 100%;
  height: fit-content;
  overflow-y: auto;
}

.news-list-simple-content-body {
  font-size: var(--mm-font-size-3);
  line-height: 1.6;
}

.news-list-simple-content-body .news-detail-simple-title {
  display: block;
  font-size: var(--mm-font-size-3);
}

.news-list-simple-content-body .news-detail-simple-meta {
  margin-top:var(--space-4);
}

.news-list-simple-content-body .news-detail-simple-summary {
  margin: var(--space-4) 0;
}

.news-list-simple-content-body .news-detail-simple-body {
  font-size: var(--mm-font-size-3);
}

.news-list-simple-content-body .news-detail-simple-source-link {
  display: inline-block;
  margin-bottom: 1rem;
  text-decoration: underline;
}

/* 우측: 이미지 (카드 클릭 시 표시) */
.news-list-simple-images {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  overflow-y: auto;
  padding: calc(var(--space-8) + 3rem) 3rem 3rem;
}

.news-list-simple-images-inner .news-detail-simple-additional {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.news-list-simple-images-inner .news-detail-simple-additional-figure {
  margin: 0;
}

.news-list-simple-images-inner .news-detail-simple-additional-figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

/* 뉴스 리스트 ↔ 상세 전환 페이드 트랜지션 */
.news-list-simple-text,
.news-list-simple-content,
.news-simple-grid,
.news-list-simple-images {
  transition: opacity 0.25s ease;
}

.news-list-simple-text.news-fade-out,
.news-list-simple-content.news-fade-out,
.news-simple-grid.news-fade-out,
.news-list-simple-images.news-fade-out {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .news-list-simple-text,
  .news-list-simple-content,
  .news-simple-grid,
  .news-list-simple-images {
    transition: none;
  }
}

/* 반응형 */
@media (max-width: 991px) {
  .news-list-simple{
    height: auto;
  }
  .news-list-simple-container {
    flex-direction: column;
  }

  .news-list-simple-left {
    width: 100%;
    padding: var(--header-height) var(--space-4) 2rem;
    height: fit-content;
  }

  .news-list-simple-right {
    width: 100%;
    padding: 0 var(--space-4) 0;
  }

  /* 모바일: 이미지 영역이 absolute면 부모 높이가 0이 되어 안 보임 → relative로 변경 */
  .news-list-simple-images {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    padding: 1rem 0 3rem;
  }

    .news-simple-item{
      margin-bottom: var(--space-2);
    }

  .news-list-simple-right .news-simple-grid {
    padding: 0 0 0 0;
  }
}