/* =========================================
   뉴스룸 서브페이지 전용 스타일 (news.css)
========================================= */
.news-section {
  padding: 80px 0 120px;
  background: #FFFFFF;
}

/* --- 2. 언론보도 리스트 래퍼 (상하 2px 빨간 선) --- */
.news-list-wrap {
  width: 100%;
  max-width: 1022px; /* 피그마 시안 고정 가로폭 */
  margin: 0 auto;
  border-top: 2px solid #B70000;
  border-bottom: 2px solid #B70000;
}

/* 개별 리스트 아이템 */
.news-item {
  display: flex;
  padding: 40px 0; /* 위아래 40px 여백 (요청하신 사진 위아래 여백) */
  border-bottom: 0.5px solid #313131; /* 아이템 사이 회색 구분선 */
  text-decoration: none; /* a태그 기본 밑줄 제거 */
  transition: background-color 0.3s ease;
}

.news-item:last-child {
  border-bottom: none; /* 마지막 줄은 회색 선 제거 (빨간 선과 안 겹치게) */
}

.news-item:hover {
  background: #FAFAFA; /* 마우스 오버 시 살짝 배경색 변화 */
}

/* --- 3. 좌측 썸네일 이미지 영역 --- */
.news-item-img {
  width: 384px; /* 피그마 고정 너비 */
  flex-shrink: 0;
  aspect-ratio: 99/62; /* 요청하신 이미지 비율 완벽 적용! */
  background: #F0F0F0;
  overflow: hidden;
}

.news-item-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease; /* 호버 시 이미지 살짝 커지는 효과 준비 */
}

.news-item:hover .news-item-img img {
  transform: scale(1.03); /* 마우스 오버 시 이미지 확대 (고급스러움 추가) */
}

/* --- 4. 우측 텍스트 영역 --- */
.news-item-text {
  flex: 1;
  padding-left: 50px; /* 사진과 텍스트 사이의 좌측 여백(간격) 50px */
  display: flex;
  flex-direction: column;
  justify-content: center; /* 텍스트 전체를 수직 중앙 정렬 */
}

.news-item-title {
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 24px;
  font-weight: 700;
  line-height: 38px; /* 158.333% */
  margin-bottom: 15px;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 최대 2줄까지만 보이고 줄임표 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.news-item-desc {
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 25px; /* 138.889% */
  margin-bottom: 15px;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 최대 3줄까지만 보이고 줄임표 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 상세 HTML(p/span/meta 등) 유입 시에도 줄수 제한이 깨지지 않도록 정리 */
.news-item-desc meta,
.news-item-desc style,
.news-item-desc script {
  display: none !important;
}

.news-item-desc p,
.news-item-desc div,
.news-item-desc span {
  display: inline;
  margin: 0;
  white-space: normal !important;
}

.news-item-date {
  color: #888888; /* 날짜는 시안상 살짝 연하게 보이도록 처리 (필요시 313131로 변경) */
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 300;
  line-height: 1.5;
  margin-top: auto; /* 아래로 쭉 밀어냄 */
}

/* 모바일 전용 제목/요약 구분선 (기본 숨김) */
.news-mobile-divider {
  display: none;
}

/* --- 5. 더보기 버튼 (이전 페이지 스타일 재사용) --- */
.news-more-wrap {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 60px;
}

/* =========================================
   6. 콘텐츠 탭 및 리스트 영역 (.contents-section)
========================================= */

/* --- 각 콘텐츠 섹션 공통 래퍼 --- */
.content-sec {
  width: 100%;
  max-width: 1037px; /* 피그마 고정 사이즈 */
  margin: 0 auto 80px auto;
}

/* 섹션 타이틀 (아이콘 + 글씨) */
.content-sec-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
  color: #000000;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px; /* 150% */
}

/* --- 유튜브 Shorts (5열 그리드) --- */
.shorts-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 15px;
}

.shorts-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.shorts-img {
  width: 100%;
  aspect-ratio: 9/16; /* 숏츠 비율 강제 고정 */
  border-radius: 8px; /* 모서리 살짝 둥글게 */
  background: #EAEAEA;
  overflow: hidden;
  margin-bottom: 10px;
}

.shorts-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.shorts-item:hover .shorts-img img {
  transform: scale(1.05); /* 마우스 오버 시 확대 */
}

.shorts-title {
  color: #313131;
  font-family: 'Pretendard', sans-serif;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 두 줄까지만 표시 */
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- 네이버 블로그 (3열 그리드) --- */
.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px; /* 카드 간격 */
}

.blog-item {
  display: flex;
  flex-direction: column;
  text-decoration: none;
}

.blog-img {
  width: 100%;
  aspect-ratio: 318/224; /* 피그마 수치에 맞춘 이미지 비율 */
  background: #EAEAEA;
  overflow: hidden;
  margin-bottom: 15px;
}

.blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.blog-item:hover .blog-img img {
  transform: scale(1.05);
}

.blog-title {
  color: #000000;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 27px; /* 150% */
  margin-bottom: 10px;
  word-break: keep-all;
}

.blog-date {
  color: #939393;
  font-family: 'Pretendard', sans-serif;
  font-size: 18px;
  font-weight: 400;
  line-height: 27px; /* 150% */
}

/* --- SNS/인스타그램 (3열 그리드) --- */
.sns-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.sns-item {
  width: 100%;
  height: 373px; /* 피그마 고정 높이 */
  background: #EAEAEA;
  overflow: hidden;
}

.sns-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.sns-item:hover img {
  transform: scale(1.05);
}

/* =========================================
   모바일 반응형 (화면 가로 768px 이하일 때)
========================================= */
@media screen and (max-width: 768px) {
  .news-section { padding: 67px 34px 67px; }

  .news-list-wrap { padding: 0 12px; }
  
  /* 리스트 좌우상하 배치를 위(사진) 아래(텍스트)로 변경 */
  .news-item {
    flex-direction: column;
    padding: 30px 12px; /* 좌우 내용물은 안으로 밀어넣고 */
    margin: 0 -12px; /* 아이템 가로 영역을 부모 패딩만큼 밖으로 확장해 선 길이를 맞춤 */
  }
  
  .news-item-img {
    width: 100%; /* 모바일에서는 가로 100% 꽉 차게 */
    height: auto;
    aspect-ratio: 99/62; /* 비율은 그대로 유지! */
    /*margin-bottom: 20px; 사진과 텍스트 사이 위아래 여백 */
  }
  
  .news-item-text {
    padding-left: 0; /* 모바일에서는 좌측 여백 없앰 */
    align-items: center; /* 텍스트 중앙 정렬 */
  }
  
  .news-item-title { 
    width: 301px;
    height: auto;
    margin: 14px auto 10px;
    color: #282828;
    font-size: 14px;
    font-weight: 700;
    line-height: 20px;
    position: relative;

    color: #282828;
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: 1.4
  }

  .news-mobile-divider {
    display: block;
    width: 100%;
    height: 0.25px;
    background: #EAEAEA;
    margin: 0 auto 10px;
  }
  
  .news-item-desc { 
    width: 288px;
    height: 59px;
    margin: 0 auto;
    color: #282828;
    font-size: 12px;
    font-weight: 300;
    line-height: 18px;
    -webkit-line-clamp: 3; /* 모바일은 3줄까지 */ 

    color: #282828;
    font-family: Pretendard;
    font-size: 12px;
    line-height: 1.4;
    font-style: normal;
    font-weight: 300;
  }
  
  .news-item-date {
    display: none;
    font-size: 14px;
  }

  .news-more-wrap {
    margin-top: 30px;
  }
    
  .content-sec {
    margin: 0 auto 60px auto;
  }
  .content-sec-header{
    gap: 5px;
  }
  .content-sec-header span{
    color: #000;
    font-family: Pretendard;
    font-size: 13px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.4; /* 207.692% */
  }

  /* 숏츠는 폰에서 5열이 들어가면 깨지므로, 가로로 스크롤(스와이프) 하도록 만듭니다! */
  .shorts-grid {
    display: flex; /* grid에서 flex로 변경 */
    flex-wrap: nowrap; /* 줄바꿈 방지 */
    overflow-x: auto; /* 가로 스크롤 허용 */
    padding-bottom: 10px; /* 스크롤바 여백 */
    gap: 15px;
    -ms-overflow-style: none; /* IE 스크롤 숨김 */
    scrollbar-width: none; /* 파이어폭스 스크롤 숨김 */
  }
  .shorts-grid::-webkit-scrollbar { display: none; } /* 크롬 스크롤 숨김 */
  
  .shorts-item {
    width: 140px; /* 모바일에서 숏츠 1개당 너비 고정 */
    flex-shrink: 0; /* 크기 줄어들지 않게 고정 */
  }

  /* 블로그와 인스타는 1열로 떨어지게 합니다 */
  .blog-grid, .sns-grid {
    grid-template-columns: 1fr;
    gap: 30px;
  }
  
  .sns-item {
    height: auto;
    aspect-ratio: 1/1; /* 모바일에서는 정방형으로 보이게 */
  }

  .blog-title { font-size: 16px; line-height: 1.4; 
  color: #000;
font-family: Pretendard;
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: 1.4
  }
  .blog-date { font-size: 14px; 
    color: #939393;
font-family: Pretendard;
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 1.4
  }
}