/* =========================================
   7. 언론보도 상세 페이지 (.news-detail-wrap)
========================================= */

.news-detail-wrap {
  width: 100%;
  max-width: 1022px; /* 피그마 전체 가로 수치 완벽 반영 */
  margin: 0 auto;
  padding-bottom: 90px; /* 맨 아래 여백 90px */
}

/* --- 상단 타이틀 영역 --- */
.detail-header {
  border-top: 2px solid #B70000; /* 상단 2px 빨간 선 */
  padding: 40px 0 20px; 
}

.detail-title {
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 27px;
  font-weight: 700;
  line-height: 38px; /* 140.741% */
  margin-bottom: 25px;
  word-break: keep-all;
}

.detail-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.detail-info .source {
  color: #939393;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 38px;
}

.detail-info .date {
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 38px;
  text-align: right;
}

.detail-divider {
  width: 100%;
  height: 1px; /* 웹 환경에서 0.5px 렌더링을 위해 1px로 보정하거나 rgba 사용 */
  background: rgba(49, 49, 49, 0.5); /* 0.5px 느낌의 회색 선 */
  margin-bottom: 60px;
}

/* --- 본문 내용 영역 --- */
.detail-body {
  padding: 0 30px; /* 요청하신 본문 좌우 여백 170px 완벽 반영! */
}

.detail-body img {
  width: 100%;
  height: auto;
  display: block;
  margin-bottom: 50px; /* 사진과 텍스트 사이 여백 */
}

.detail-body p {
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 22px;
  font-weight: 400;
  line-height: 38px; /* 172.727% */
  margin-bottom: 30px;
  word-break: keep-all;
}

/* --- 전문보기 버튼 --- */
.detail-action {
  display: flex;
  justify-content: center;
  margin-top: 60px;
  margin-bottom: 80px;
}

.btn-original {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 270px;
  height: 53px;
  border-radius: 30px;
  border: 1px solid #939393; /* 0.5px 대신 1px로 또렷하게 */
  background: #FFFFFF;
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 20px;
  font-weight: 400;
  cursor: pointer;
  transition: all 0.3s;
}

.btn-original:hover {
  background: #F5F5F5;
}

/* --- 이전글 / 다음글 네비게이션 --- */
.detail-nav-wrap {
  width: 100%;
  max-width: 957px; /* 요청하신 라인 가로 수치 */
  margin: 0 auto;
  border-top: 1px solid #939393; /* 0.25px 대신 브라우저 호환성을 위한 1px */
  border-bottom: 1px solid #939393;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 20px 10px;
  border-bottom: 1px solid #EAEAEA;
  text-decoration: none;
  transition: background-color 0.2s;
}

.nav-item:last-child {
  border-bottom: none;
}

.nav-item:hover {
  background: #FAFAFA;
}

.nav-label {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 97px; /* 라벨 너비 고정 */
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 500;
  flex-shrink: 0;
}

.nav-label svg {
  flex-shrink: 0;
}

.nav-title {
  color: #808080;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 400;
  flex: 1;
  min-width: 0; /* Flexbox 내에서 텍스트가 삐져나가는 것 방지 */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis; /* 글이 길면 ... 처리 */
}

/* --- 목록 버튼 --- */
.detail-list-action {
  display: flex;
  justify-content: center;
  margin-top: 50px;
}

.btn-list {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 137px;
  height: 57px;
  background: #EFEFEF; /* 시안처럼 회색 박스 */
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 500;
  text-decoration: none;
  border-radius: 4px;
  transition: background-color 0.3s;
}

.btn-list:hover {
  background: #E0E0E0;
}


/* =========================================
   상세페이지 모바일 반응형 (기존 @media 안쪽에 추가하세요!)
========================================= */
@media screen and (max-width: 768px) {
    .news-view-section {
        padding: 67px 30px 67px;
    }
    .news-detail-wrap{
      padding-bottom: 0; 
    }

  .detail-header { padding: 18px 10px 15px; }
  .detail-title { font-size: 22px; line-height: 1.4; margin-bottom: 15px; 
    color: #313131;
    font-family: Pretendard;
    font-size: 18px;
    font-style: normal;
    font-weight: 700;
    line-height: 1.4;
    word-break: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .detail-info .source{
    color: #939393;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 1.4
  }
  .detail-info .date{
    color: #313131;
      font-family: Pretendard;
      font-size: 12px;
      font-style: normal;
      font-weight: 300;
      line-height: 1.4
  }
  .detail-divider { margin-bottom: 30px; }
  
  /* 핵심! 모바일에서는 본문 170px 여백을 없애서 꽉 차게 만듭니다 */
  .detail-body {     
    padding: 0 10px; 
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  .detail-body img { margin-bottom: 30px; }
  .detail-body p { font-size: 16px; line-height: 1.6; margin-bottom: 20px; 
    color: #313131;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 400;
    line-height: 20px; /* 153.846% */
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  
  .detail-action { margin-top: 15px; margin-bottom: 30px; }
  .btn-original { width: 100%; max-width: 180px; height: 35px; font-size: 18px; 
  color: #313131;
text-align: center;
font-family: Pretendard;
font-size: 13px;
font-style: normal;
font-weight: 400;
line-height: 38px; /* 292.308% */
}
  
  /* 이전글/다음글 모바일 최적화 */
  .nav-item { padding: 10px 5px; }
  .nav-label { width: 85px; font-size: 15px; gap: 8px; 
  color: #313131;
text-align: center;
font-family: Pretendard;
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 28px; /* 233.333% */
}
  .nav-title { 
    font-size: 15px; 
    color: #808080;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 300;
    line-height: 18px; /* 150% */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  .detail-list-action { margin-top: 30px; }
  .btn-list { width: 100%; max-width: 65px; height: 28px; font-size: 16px; 
  color: #313131;
text-align: center;
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 28px;
}