/* MONET 뉴스형 목록 위젯 - monet 스킨. 이 위젯(.mnw) 안만 꾸밈 */
.mnw { --mnw-accent: #1f6fb2; color: #222; font-size: 14px; line-height: 1.45; }
.mnw a { color: inherit; text-decoration: none; }
.mnw button { font: inherit; cursor: pointer; }

/* 큰 사진: 사진 비율은 위젯 설정의 이미지 가로·세로 크기 */
.mnw_stage { position: relative; aspect-ratio: var(--mnw-ratio, 800 / 540); overflow: hidden; border-radius: 10px; background: #e9e9e9; }
.mnw_slide { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .6s, visibility .6s; }
.mnw_slide.on { opacity: 1; visibility: visible; }
/* 넘어가는 동안 앞뒤 글 제목이 겹쳐 보이지 않게: 사진만 서서히, 제목은 바로 바뀜 */
.mnw_slide:not(.on) .mnw_cap { visibility: hidden; }
.mnw_slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mnw_cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 18px 16px; background: linear-gradient(transparent, rgba(0, 0, 0, .72)); color: #fff; }
.mnw_cap b { display: block; font-size: 17px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mnw_cap span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin-top: 4px; font-size: 13px; opacity: .9; }
.mnw_prev, .mnw_next { position: absolute; top: 50%; width: 34px; height: 34px; margin-top: -17px; padding: 0; border: 0; border-radius: 50%; background: rgba(255, 255, 255, .85); color: #222; font-size: 22px; line-height: 32px; opacity: 0; transition: opacity .2s; }
.mnw_prev { left: 10px; } .mnw_next { right: 10px; }
.mnw_stage:hover .mnw_prev, .mnw_stage:hover .mnw_next, .mnw_prev:focus-visible, .mnw_next:focus-visible { opacity: 1; }
.mnw_dots { position: absolute; top: 12px; right: 12px; display: flex; gap: 5px; }
.mnw_dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 4px; background: rgba(255, 255, 255, .55); transition: width .25s, background .25s; }
.mnw_dots button.on { width: 18px; background: #fff; }

/* 아래 목록: 작은 사진 + 제목 (+ 날짜 등). 지금 큰 사진에 나온 글은 파란 왼쪽 막대 */
.mnw_list { list-style: none; margin: 10px 0 0; padding: 0; }
.mnw_list li { margin: 0; border-bottom: 1px solid #eee; }
.mnw_list a { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 10px; }
.mnw_list li.on a { background: #f0f6fc; box-shadow: inset 3px 0 0 var(--mnw-accent); }
.mnw_th { flex: 0 0 auto; width: 72px; height: 45px; object-fit: cover; border-radius: 5px; background: #eee; }
.mnw_tx { flex: 1; min-width: 0; }
.mnw_tt { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.mnw_list li.on .mnw_tt, .mnw_list a:hover .mnw_tt { color: var(--mnw-accent); }
.mnw_board { margin-right: 6px; padding: 0 7px; border-radius: 10px; background: #e3ecf5; color: var(--mnw-accent); font-size: 12px; font-style: normal; }
.mnw_cmt { margin-left: 4px; color: var(--mnw-accent); font-size: 12px; font-style: normal; }
.mnw_meta { display: block; margin-top: 1px; font-size: 12px; color: #888; }
.mnw_meta span + span::before { content: '·'; margin: 0 5px; }
.mnw_empty { color: #888; }

/* 휴대폰 */
@media (max-width: 767px) {
	.mnw_cap { padding: 30px 14px 12px; }
	.mnw_cap b { font-size: 15px; }
	.mnw_cap span { -webkit-line-clamp: 1; font-size: 12px; }
	.mnw_prev, .mnw_next { display: none; }   /* 손가락으로는 아래 목록·점을 누름 */
	.mnw_th { width: 64px; height: 40px; }
}
@media (prefers-reduced-motion: reduce) {
	.mnw_slide, .mnw_dots button { transition: none; }
}