/*===================================================================
* 2026-03-30
* only www =  desk = press
* only mobile (X)
* only amp 
* only clubnsp
# news_aticle (all the same)
===================================================================*/
.news_aticle{position:relative;margin-bottom:50px;padding:0;background: }
.news_aticle:after{content:"";display:block;clear:both;}
/*---------------------------------------------------------------------
news_progress
---------------------------------------------------------------------*/
#news_progress{
	position:absolute;
	z-index:99;
	width:100%;
	background:#ddd;
	height:1px;
}
#news_progress_bar{
	width:0;
	height:3px;
	background:#23A9E0;
	transition:width .05s linear; 
}

/*---------------------------------------------------------------------
news_aticle head
---------------------------------------------------------------------*/
.news_aticle .news_head{
   border-bottom:1px solid #ddd;
}
.news_aticle .news_head .news_section{display:none;font-size:14px;color:#999;margin-bottom:5px;}
.news_aticle .news_head h2.news-title{font-size:36px;font-weight:700;margin-bottom:20px; word-break: keep-all;}
.news_aticle .news_head .spotkey{line-height:36px;margin-bottom:3px;padding:0;}
.news_aticle .news_head .news_publish{position:relative;font-size:14px;color:#777;font-weight:400;margin-bottom:5px;}
.news_aticle .news_head .news_tags{position:relative;font-size:14px;color:#777;font-weight:400;padding:0;}

/*---------------------------------------------------------------------
news_aticle head > share-control
---------------------------------------------------------------------*/
/* 전체 컨테이너 */
.news_aticle .news_head .share-control {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    padding: 18px 0;

    border-bottom: 1px solid #eee;
}
.share-control .control, 
.share-control .share {
    display: flex;
    align-items: center;
    gap: 18px; /* 아이콘 그룹 간격 확대 */
}
.share-control a {
    display: flex;
    align-items: center;
    text-decoration: none;
    transition: all 0.2s ease;
}
/* 아이콘 공통 설정: Gray 톤 및 크기 확대 */
.share-control .material-icons, 
.share-control i[class^="fa-"] {
    font-size: 22px; /* 아이콘 크기 키움 */
    color: #666;    /* 가독성 좋은 Dark Gray */
    width: 24px;
    text-align: center;
}
/* 마우스 호버 시 약간 더 진한 회색으로 변경 */
.share-control a:hover .material-icons,
.share-control a:hover i {
  color: #333;
}
.share-control a:hover .sns-name,
.share-control a:hover .cont-name {
  color: #333;
}
/* 텍스트 스타일 */
.share-control .sns-name, 
.share-control .cont-name {
  font-size: 14px; /* 텍스트도 약간 키움 */
  margin-left: 7px;
  color: #888;
  font-weight: 400;
}
/* 읽는 중 뱃지: 회색톤과 어울리는 깔끔한 블루 유지 또는 진한 회색 권장 */
.user_count {
  border: 1px solid var(--nsp-blue);
  background: var(--nsp-blue);
  color: var(--white);
  border-radius: 30px;
  padding: 3px 10px;
  font-size: 12px;
  margin-right: 5px;
}

/* 1. 폰트 확대/축소 모달 레이어 본체 */
.zoom-pop-layer {
    position: fixed;      /* 화면 중앙 고정 */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 340px;
    min-height: 440px;    /* 요청하신 최소 높이 유지 */
    background: var(--white);
    border-radius: 12px;
    box-shadow: 0 15px 50px rgba(0,0,0,0.2);
    padding: 25px;
    z-index: 9999;
    transition: opacity 0.3s ease;
}

/* 2. 배경 딤머 (레이어 뒤를 어둡게) */
#zoom-dimmer {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    background: rgba(0, 0, 0, 0.4);
    z-index: 9998;
    display: none;
}
/* 3. 헤더 및 닫기 버튼 */
.zoom-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 5px;
}
.zoom-header strong { 
  font-size: 18px; 
  color: var(--gray-333);
}
.zoom-header .zoom-close {
  font-size: 24px;
  color: var(--gray-999);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
  padding: 5px;
  border-radius: 50%;
}
.zoom-header .zoom-close:hover {
  color: var(--gray-333);
  background-color: var(--gray-eee);
  transform: rotate(90deg);
}
.zoom-header .zoom-close:active {
  background-color: #e0e0e0;
  transform: scale(0.9);
}
/* 4. 설명 문구 */
.zoom-desc { 
  font-size: 13px; 
  color: var(--gray-999); 
  margin-bottom: 25px;
}
/* 5. 슬라이더 영역 및 눈금(Ticks) 디자인 */
.zoom-slider-wrap { 
  display: flex; 
  align-items: center; 
  gap: 15px; 
  margin-bottom: 20px; 
  position: relative; /* 눈금 배치의 기준점 */
}
#font-range { 
    flex: 1; 
    -webkit-appearance: none; 
    height: 4px; 
	background: transparent;
    border: none; 
    border-radius: 4px; 
    outline: none;
    position: relative;
    z-index: 10; /* 파란 원이 눈금보다 위에 오도록 */
}

/* 슬라이더 파란 원(Thumb) */
#font-range::-webkit-slider-thumb {
    -webkit-appearance: none; 
    width: 20px; 
    height: 20px; 
    background: var(--nsp-blue); 
    border-radius: 50%; 
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(74, 125, 255, 0.3);
    margin-top: 0px; /* 트랙 중앙 정렬 */
}

/* [수정] 둥근 눈금선(Tick Marks) 디자인 */
.range-ticks {
    position: absolute;
    left: 40px; 
    right: 40px; 
    top: 50%;
    transform: translateY(-50%);
    background: var(--gray-eee); 
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 5; /* 트랙(기본)보다는 위, 파란 원(10)보다는 아래 */
}

.range-ticks span {
    width: 8px;
    height: 8px;
    background: var(--gray-ccc); 
    border-radius: 8px; 
}
/* 트랙이 파란색으로 변할 때 눈금 가독성을 위해 흰색 계열로 변경 */
#font-range:hover .range-ticks span {
    background: rgba(255, 255, 255, 0.9);
}
/* 6. 리셋 버튼 및 푸터 */
.zoom-footer { text-align: center; margin-bottom: 20px; }
.zoom-reset {
    background: var(--gray-fa);
    border: 1px solid var(--gray-ddd);
    color: var(--gray-666);
    padding: 7px 18px;
    font-size: 13px;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s;
    font-weight: 500;
}
.zoom-reset:hover {
    background: var(--blue);
    color: var(--white);
    border-color: var(--blue);
}

/* 7. 프리뷰 박스 */
.zoom-preview-box { border-top: 1px solid var(--gray-eee); padding-top: 15px; }
.zoom-preview-box p { font-size: 16px; color: var(--gray-333); font-weight: bold; margin-bottom: 10px; }
#zoom-preview-text { font-size: 16px; color: var(--gray-666); line-height: 1.6; }

/* 8. 본문 글자 크기 단계별 클래스 (fz-1 ~ fz-5) */
#contents-zoom.fz-1 .section_txt { font-size: 14px !important; }
#contents-zoom.fz-2 .section_txt { font-size: 16px !important; }
#contents-zoom.fz-3 .section_txt { font-size: 18px !important; }
#contents-zoom.fz-4 .section_txt { font-size: 20px !important; }
#contents-zoom.fz-5 .section_txt { font-size: 24px !important; }

/* 기타 요소 동기화 */
#contents-zoom.fz-4 .epilog_byline, 
#contents-zoom.fz-4 .epilog { font-size: 16px !important; }
/*---------------------------------------------------------------------
news_aticle layout
---------------------------------------------------------------------*/
/*.news_aticle .news_body{border:1px solid blue}*/
/*.news_aticle .news_body section {border:1px solid red}*/
/*.news_aticle .news_body .ad {border:1px solid green}*/

.news_aticle .news_body {
  position: relative;
  width:100%;
  max-width:640px;
  margin:0 auto;
  padding-top:50px;
  padding-bottom:50px;
}
.news_aticle .news_body summary {
  width:100%;
  max-width:640px;
  position: relative;
  overflow:hidden;
  margin:0 auto;
  margin-bottom:36px;
  padding-left:20px;
  padding-right:10px;
}
.news_aticle .news_body section {
  width:100%;
  max-width:640px;
  margin:0 auto;
  margin-bottom:36px;
  padding:0;
  overflow: visible; /* 중요 */
}
.news_aticle .news_body section.vod {
  position: relative;
  width: 100%;
  max-width:100%;
  margin-top: ;
  margin-bottom: 50px;
  display:flex;
  flex-direction: column;
  align-items: center;
}
.news_aticle .news_body section.news-story {}
.news_aticle .news_body .ad-wrap {
  position: relative;
  width:100%;
  margin-top: 50px;
  margin-bottom: 50px;
}
.news_aticle .news_body section.news-info {}
.news_aticle .news_body section.news-byline {}

/*---------------------------------------------------------------------
news_aticle style
---------------------------------------------------------------------*/
.news_aticle .news_body .editor-note { 
  width:100%;
  position: relative;
  margin:0 auto;
  border:1px solid #ddd;
  margin-bottom:50px;
}
.news_aticle .news_body .editor-note .editor-note-title{
  padding:20px;
  font-size:18px;
  font-weight:700;
}
.news_aticle .news_body .editor-note .editor-note-comment{
  padding:0 20px 20px 20px;
  font-size:16px;
}
.news_aticle .news_body summary p{
   font-size:20px;
   line-height:1.4;
   font-weight:500;
   color:#333;
   margin-bottom:12px;
}
.news_aticle .news_body summary p:before {
   position: absolute;
   content: "•";
   color: rgb(60, 60, 60);
   left: 0px;
   margin-top: -3px;
   padding: 0px;
}

.news_aticle .news_body section .section_title{
   position:relative;
   margin:0 auto;
   padding-bottom:36px;
   font-size:28px;
   line-height:170%;
   font-weight:700;
   border-top:0;
}
.news_aticle .news_body section .section_img {
  position:relative;
  width:100%;
  max-width:640px;
  padding-bottom:40px;
  text-align:center;
}
.news_aticle .news_body section .section_img_left{
  float:left;
  z-index:10;
  position:relative;
  max-width:320px;
  margin-bottom:36px;
  margin-right:36px;
  padding:0;
}
.news_aticle .news_body section .section_img_right{
  float:right;
  z-index:10;
  position:relative;
  max-width:320px;
  margin-bottom:36px;
  margin-left:36px;
  padding:0;
}
.news_aticle .news_body section .section_caption{
  width:100%;
  position:relative;
  margin-top:10px;
  padding:0;
  text-align:left;
  font-size:15px;
  font-weight:400;
  color:#777;
}
.news_aticle .news_body section .section_txt{font-size:17px;font-weight:400;line-height:170%;}
.news_aticle .news_body section .epilog_byline{
  margin-bottom:15px;
}
/*---------------------------------------------------------------------
news_aticle gallery & vod
---------------------------------------------------------------------*/
.news_aticle .news_body section .section_gallery{
  position:relative;
  padding:0;
  margin:0 auto;
}
.news_aticle .news_body section.vod .section_vod {
  width: 100%;
  margin: 0 auto;
}
.news_aticle .news_body section.vod .section_vod .vod_frame {
  position: relative;
  width: 100%;
  overflow: hidden;
}
.news_aticle .news_body section.vod .section_vod .vod_frame iframe {
  position: absolute;
  inset: 10;
  width: 100%;
  height: 100%;
  border: 0;
}
/*---------------------------------------------------------------------
button's - large, gallery, vod
---------------------------------------------------------------------*/
/* [1] 기본 섹션 레이아웃 */
.section_img {
    position: relative;
    width: 100%;
    max-width: 640px;
    padding-bottom: 20px; /* 여백 조정 */
    text-align: center;
}

/* [2] picture 태그 (이전 스타일 계승) */
.news_aticle .news_body section picture,
.news_aticle .news_body section .zoom-picture {
    position: relative;
    display: inline-block; /* 이미지 너비만큼만 영역 차지 */
    max-width: 100%;
}

.news_aticle .news_body section picture img {
    display: block;
    max-width: 100%;
    height: auto;
}

/* [3] 우측 상단 컨트롤 그룹 (핵심 변경사항) */
.top-controls {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;       /* 가로 정렬 */
    align-items: center; /* 수직 중앙 */
    gap: 8px;            /* 버튼 사이 간격 */
    z-index: 20;
}

/* [4] 공통 버튼 스타일 (캡슐형 디자인) */
.gallery-icon,
.fullscreen-icon,
.vod-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.5); /* 이전 버전 배경색 계승 */
    backdrop-filter: blur(4px);    /* 글래스모피즘 효과 */
    -webkit-backdrop-filter: blur(4px);
    color: #fff !important;
    border-radius: 30px;           /* 캡슐/원형 형태 */
    cursor: pointer;
/*    transition: all 0.25s ease;*/
    border: 1px solid rgba(255, 255, 255, 0.2);

	/* 너비 강제 해제 */
    width: auto; 
    min-width: max-content; /* 컨텐츠 길이에 맞춤 */
}

/*영상보기 버튼 (텍스트 포함) */
.vod-icon {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    gap: 5px;
}

/* 화보보기 버튼 (텍스트 포함) */
.gallery-icon {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 500;
    gap: 5px;
}

/* 전체화면 버튼 (이전 버전 원형 스타일 계승) */
.fullscreen-icon {
    width: 34px;
    height: 34px;
    padding: 0;
    border-radius: 100%; /* 이전 버전 i.fullscreen 스타일 계승 */
}

/* [5] 아이콘 폰트 상세 (글자 깨짐 방지) */
.news_aticle > .material-icons,
.news_aticle > .material-symbols-outlined,
.news_aticle > .material-icon {
    font-size: 20px !important;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* [6] 호버 효과 (이전 포인트 블루 계승) */
.gallery-icon:hover,
.fullscreen-icon:hover,
.vod-icon:hover {
    background: #00aaea; 
    border-color: #00aaea;
/*    transform: translateY(-2px);*/
}

/* [7] 캡션 스타일 (이전 스타일 유지) */
.news_aticle .news_body section .section_caption {
    width: 100%;
    position: relative;
    margin-top: 10px;
    padding: 0;
    text-align: left;
    font-size: 15px;
    font-weight: 400;
    color: #777;
    line-height: 1.5;
}

.news_aticle .news_body section.vod .section_info .vod_caption{
   position:relative;
   width:100%;
   padding:15px 20px;
   text-align:left;
   font-size:18px;
   font-weight:400;
   color:#777;
}

/*---------------------------------------------------------------------
vod frame layout
---------------------------------------------------------------------*/
/* 가로형 (16:9) */
.news_aticle .news_body section.horizontal{
  width: 100%;
}
.news_aticle .news_body section.horizontal .section_vod .vod_frame {
  aspect-ratio: 16 / 9;
  width: 100%;
}
.news_aticle .news_body section .section_info{
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap:30px
}

.news_aticle .news_body section.horizontal .section_info{
  position: relative;
  padding:20px 30px;
  background:#f5f5f5;
  width: 100%;
}

/* 세로형 (9:16) */
.news_aticle .news_body section.vertical{
  width: 100%;
  max-width: 400px;  /* 너무 커지는 것 방지 */
}
.news_aticle .news_body section.vertical .section_vod .vod_frame {
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  border-radius: 0;
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
}
.news_aticle .news_body section.vertical .section_info{
  width: 100%;
  position: relative;
  padding:20px 30px;
  background:#f5f5f5;
}
/*---------------------------------------------------------------------
# news_list news_discussion
---------------------------------------------------------------------*/
.news_discussion {position:relative;width:100%;border:1px solid #ddd;margin-bottom:36px;}
.news_discussion .discussion_article {position:relative;padding:30px;}
.news_discussion .discussion_subject {font-size:20px;font-weight:700;}
.news_discussion .discussion_content {font-size:17px;color:#333;margin-top:15px}

/*---------------------------------------------------------------------
# news_view empty (all the same)
---------------------------------------------------------------------*/
.news-empty{
   position:relative;
   margin:0 auto;
   padding:50px 0;
   width:70%;
}
.news-empty h3{
   font-weight:500
}
.news-empty .lang{
   font-weight:400;
   font-size:16px;
   color:#777;;
   margin-top:15px;
}
.news-empty .url{
   font-size:14px;
   color:#999;
   margin-top:30px;
}
.news-empty .btn{
   display:flex;
   margin-top:50px;
}
.news-empty .btn a{
   display:flex;
   border:1px solid #ccc;
   padding:7px 10px;
   margin-right:10px;
   border-radius: 5px;
}
.news-empty .btn a:hover {
    border:1px solid #224488;
}
/*---------------------------------------------------------------------
#news_view_in_link (all the same) ??????????
---------------------------------------------------------------------
.news_view_in_link{margin-bottom:30px;padding:20px;background:#fff;border-top:1px solid #eee;border-bottom:1px solid #eee;}
.news_view_in_link .news_title{position: relative;font-size:16px;line-height:180%;font-weight:500;color:#555;padding-left:13px;}
.news_view_in_link .news_title:before {position: absolute;top: 8px;bottom: 8px;left: 0;width: 4px;background-color: red; content: '';}
.news_view_in_link .news_list ul{margin-top:15px;}
.news_view_in_link .news_list ul li {margin-top:10px;}
.news_view_in_link .news_list ul li .left{float:left;width:20px;}
.news_view_in_link .news_list ul li .right{margin-left:20px;}
.news_view_in_link .news_list ul li .news_subject a span{font-size:16px;line-height:160%;color:#255D9E}
.news_view_in_link .news_list ul li .news_subject a span:hover{color:#777}
.news_view_in_link .news_list ul li .news_date{color:#999;font-size:13px;display:none}
*/
/*---------------------------------------------------------------------
#newslink-article (all the same)
---------------------------------------------------------------------*/
.newslink-article{
  position:relative;
  max-width:640px;
/*  width: calc(100% + 210px);*/
/*  margin-left: -105px;*/
/*  margin-right: -105px;*/
   margin:0 auto;
   margin-bottom:36px;
   padding-top:36px;
   padding-bottom:36px;
   border-top:1px solid #ddd;
   border-bottom:1px solid #ddd;
}
.newslink-article .link-title{
   position:relative;
   font-size:20px;
   font-weight:700;
   color:#255D9E;
   margin-bottom:20px;
}
.newslink-article > p {
   margin-top: 15px;
   display: flex;
   align-items: center;
   margin-inline-start: 0;
   font-size:18px;
   font-weight:500;
}
.newslink-article > p{
  position: relative;
  padding-left:15px;
  
}
.newslink-article > p::before {
  content: ""; /* ┗ */
  position: absolute;
  top: 12px;
  left: 0px;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #333;
}
/*---------------------------------------------------------------------
#related-list (all the same)
---------------------------------------------------------------------*/
.related-list {
  margin:50px 0;
  padding: 40px 0;
  border-top: 1px solid #ddd;
  border-bottom: 1px solid #ddd;
}
.related-list ul {
  display: grid;
  grid-template-columns: repeat(3, 1fr); 
  grid-gap:0 30px;
}
.related-list ul li .image{
  position:relative;
  width:100%;
  max-width:100%;
  aspect-ratio: 16 / 9;
}
.related-list ul li .text {margin-top:10px;}
.related-list ul li .text .title{font-size:16px;font-weight:500;}
.related-list ul li .text .category{margin-top:7px;font-size:13px;color:#666}
.related-list ul li .text .content{margin-top:7px;height:20px;font-size:13px;color:#666}

/*===================================================================
#@media
 ===================================================================*/
@media all and (min-width:993px) and (max-width:1200px) {

  /*---------------------------------------------------------------------
  #news-title
  ---------------------------------------------------------------------*/
  .news_aticle .news_head h2.news-title{font-size:36px;}
  /*---------------------------------------------------------------------
  #newslink-article
  ---------------------------------------------------------------------*/
  .news_aticle .newslink-article{
    padding:36px 0;
  }
  .news_aticle .newslink-article ul li.link-subject a{
    font-size: 17px;
    font-weight:500;
  }
  /*---------------------------------------------------------------------
  #related-list (all the same)
  ---------------------------------------------------------------------*/
  .news_aticle .related-list {
    padding-top: 30px;
  }
  .news_aticle .related-list ul {
    display: grid;
    grid-template-columns: 1fr; 
    grid-gap:0;
  }
  .news_aticle .related-list ul li .image{
    position:relative;
    width:100%;
    max-width:100%;
    aspect-ratio: 16 / 9;
  }
}
/*==================================================================*/
@media all and (min-width:769px) and (max-width:992px){

  /*---------------------------------------------------------------------
  #news-title
  ---------------------------------------------------------------------*/
  .news_aticle .news_head h2.news-title{font-size:34px;}
  /*---------------------------------------------------------------------
  #newslink-article
  ---------------------------------------------------------------------*/
  .news_aticle .news_body section.news-story .newslink-article {
    width: 100%;       /* 부모 너비에 꽉 차게 변경 */
    margin-left: 0;    /* 왼쪽 마이너스 마진 제거 */
    margin-right: 0;   /* 오른쪽 마이너스 마진 제거 */
    position: static; /* 그대로 두거나, 필요 없으면 static으로 변경 */;
  }
  .news_aticle .news_body section.news-story .newslink-article ul li.link-subject a{
    font-size: 17px;
    font-weight:500;
  }
  /*---------------------------------------------------------------------
  #related-list (all the same)
  ---------------------------------------------------------------------*/
  .related-list {
    padding-top: 30px;
  }
  .related-list ul {
    display: grid;
    grid-template-columns: 1fr; 
    grid-gap:0;
  }
  .related-list ul li{
    display:flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding:20px 0;
    border-bottom:1px solid #ddd;
  }
  .related-list ul li:first-child {
    padding-top:0;
  }
  .related-list ul li:last-child {
    padding-bottom:0;
    border-bottom:0;
  }
  .related-list ul li .image{
    width:200px;
    min-width:200px;
    margin-left:30px;
  }
  .related-list ul li .text {width:100%;flex:1;}
  .related-list ul li .text .title {font-size:16px;font-weight:500;}
  .related-list ul li .text .category{margin-top:7px;font-size:14px;font-weight:400;color:#666}
  .related-list ul li .text .content {margin-top:10px;font-size:16px;font-weight:400;color:#555;}
}
/*==================================================================*/
@media all and (min-width:577px) and (max-width:768px){

  /*---------------------------------------------------------------------
  news_aticle head
  ---------------------------------------------------------------------*/
  .news_aticle .news_head h2.news-title{font-size:32px;}
  .news_aticle .news_head .share-control div a .sns-name,
  .news_aticle .news_head .share-control div a .cont-name{display:none;}
  /*---------------------------------------------------------------------
  #newslink-article
  ---------------------------------------------------------------------*/
  .news_aticle .news_body section.news-story .newslink-article {
    width: 100%;       /* 부모 너비에 꽉 차게 변경 */
    margin-left: 0;    /* 왼쪽 마이너스 마진 제거 */
    margin-right: 0;   /* 오른쪽 마이너스 마진 제거 */
    position: static; /* 그대로 두거나, 필요 없으면 static으로 변경 */;
  }
  .news_aticle .news_body section.news-story .newslink-article ul li.link-subject a{
    font-size: 17px;
    font-weight:500;
  }
  /*---------------------------------------------------------------------
  #related-list (all the same)
  ---------------------------------------------------------------------*/
  .related-list {
    padding-top: 30px;
  }
  .related-list ul {
    display: grid;
    grid-template-columns: 1fr; 
    grid-gap:0;
  }
  .related-list ul li{
    display:flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding:20px 0;
    border-bottom:1px solid #ddd;

  }
  .related-list ul li:first-child {
    padding-top:0;
  }
  .related-list ul li:last-child {
    padding-bottom:0;
    border-bottom:0;
  }
  .related-list ul li .image{
    position:relative;
    overflow:hidden;
    right:0;
    width:150px;
    min-width:150px;
    aspect-ratio: auto 16 / 9;
    margin-left:30px;
  }
  .related-list ul li .text {width:100%;flex:1;}
  .related-list ul li .text .title {font-size:16px;font-weight:500;}
  .related-list ul li .text .category{margin-top:7px;font-size:14px;font-weight:400;color:#666}
  .related-list ul li .text .content {margin-top:10px;font-size:16px;font-weight:400;color:#555;}
}
/*==================================================================*/
@media all and (max-width:576px){

  /*---------------------------------------------------------------------
  news_aticle head
  ---------------------------------------------------------------------*/
  .news_aticle .news_head h2.news-title{font-size:30px;}
  .news_aticle .news_head .share-control div a .sns-name,
  .news_aticle .news_head .share-control div a .cont-name{display:none;}
  /*---------------------------------------------------------------------
  #newslink-article
  ---------------------------------------------------------------------*/
  .news_aticle .news_body section.news-story .newslink-article {
    width: 100%;       /* 부모 너비에 꽉 차게 변경 */
    margin-left: 0;    /* 왼쪽 마이너스 마진 제거 */
    margin-right: 0;   /* 오른쪽 마이너스 마진 제거 */
    position: static; /* 그대로 두거나, 필요 없으면 static으로 변경 */;
  }
  .news_aticle .news_body section.news-story .newslink-article ul li.link-subject a{
    font-size: 17px;
    font-weight:500;
  }
  /*---------------------------------------------------------------------
  news_aticle vod
  ---------------------------------------------------------------------*/
  section .section_vod {
    max-width: 100%;
    padding: 0 12px;
  }
  section .vod_frame {
    width: 100%;
  }
  /* ✅ 세로형 (숏츠) */
  .section_vod.vertical .vod_frame {
    aspect-ratio: 9 / 16;
    max-width: 100%;
    margin: 0 auto;
  }
  /* ✅ 가로형 */
  section .section_vod.horizontal .vod_frame {
    aspect-ratio: 16 / 9;
  }
  section .section_caption_vod {
    font-size: 14px;
    line-height: 1.4;
    margin-top: 6px;
  }
  /*---------------------------------------------------------------------
  #related-list (all the same)
  ---------------------------------------------------------------------*/
  .related-list {
    padding-top: 30px;
  }
  .related-list ul {
    display: grid;
    grid-template-columns: 1fr; 
    grid-gap:0;
  }
  .related-list ul li{
    display:flex;
    flex-direction: row-reverse;
    justify-content: space-between;
    padding:20px 0;
    border-bottom:1px solid #ddd;

  }
  .related-list ul li:first-child {
    padding-top:0;
  }
  .related-list ul li:last-child {
    padding-bottom:0;
    border-bottom:0;
  }
  .related-list ul li .image{
    position:relative;
    overflow:hidden;
    right:0;
    width:150px;
    min-width:150px;
    aspect-ratio: auto 16 / 9;
    margin-left:30px;
  }
  .related-list ul li .text {width:100%;flex:1;}
  .related-list ul li .text .title {font-size:16px;font-weight:500;}
  .related-list ul li .text .category{margin-top:7px;font-size:14px;font-weight:400;color:#666}
  .related-list ul li .text .content {margin-top:10px;font-size:16px;font-weight:400;color:#555;}
}

/*===================================================================
#@media - section_img
 ===================================================================*/
@media all and (max-width:768px){
  /*
  .news_aticle .news_body section.news-story {
    width: calc(100% + 100px);
    margin-left: -50px;
    margin-right: -50px;
  }
  .news_aticle .news_body section .section_title,
  .news_aticle .news_body section .section_img .section_caption,
  .news_aticle .news_body section .section_img_left .section_caption,
  .news_aticle .news_body section .section_img_right .section_caption,
  .news_aticle .news_body section .section_article{
    margin-left: 50px;
    margin-right: 50px;
  }
  .news_aticle .news_body section .section_txt .section_txt .epilog_info,
  .news_aticle .news_body section .section_txt .section_txt .epilog_byline,
  .news_aticle .news_body section .section_txt .section_txt .epilog{
    margin-left: 0;
    margin-right: 0;
  }
  */

  .news_aticle .news_body section .section_img_left, 
  .news_aticle .news_body section .section_img_right {
    float: none;          /* 1. float 제거 */
    display: block;       /* 2. 블록 요소로 변경 (중앙 정렬 준비) */
    margin: 0 auto 20px;  /* 3. 상하 여백을 주면서 좌우 가운데 정렬 */
    max-width: 360px;      /* 4. 부모 너비를 넘지 않게 설정 */
    min-width: 320px;     /* 5. 최소 너비 320px 유지 */
  }

  .news_aticle .news_body section .section_img_left img,
  .news_aticle .news_body section .section_img_right img {
    width: 100%;          /* 6. 이미지는 컨테이너에 꽉 차게 */
    height: auto;         /* 7. 비율 유지 */
    display: block;       /* 8. 이미지 하단 미세 공백 제거 */
  }
}