@charset "utf-8";

/* 리스트 컨테이너 */
.uxc_webzine ul {list-style:none; margin:0; padding:0;}

/* 리스트 아이템 - 웹진 스타일 */
.uxc_webzine .uxc_webzine_li {display:flex; gap:20px; padding:20px 0; border-bottom:1px solid var(--board-gray-200);}
.uxc_webzine .uxc_webzine_li:last-child {border-bottom:none;}

/* 썸네일 영역 */
.uxc_webzine .webzine_thumb {flex:0 0 170px; display:block; overflow:hidden; border-radius:var(--board-radius); background:var(--board-gray-100); aspect-ratio:300/160;}
.uxc_webzine .webzine_thumb img {width:100%; height:100%; object-fit:cover;}
.uxc_webzine .webzine_thumb:hover {opacity:0.8;}

/* 정보 영역 */
.uxc_webzine .webzine_info {flex:1; display:flex; flex-direction:column; justify-content:center; gap:8px;}
.uxc_webzine .webzine_info > a {display:-webkit-box; font-size:15px; font-weight:600; color:var(--board-gray-900); line-height:1.4; overflow:hidden; text-overflow:ellipsis; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;}
.uxc_webzine .webzine_info > a:hover {color:var(--color-prime);}
.uxc_webzine .webzine_info strong {font-weight:600;}

/* 아이콘 - Boxicons */
.uxc_webzine .bx-lock-alt {font-size:14px; color:var(--board-gray-600); margin-right:4px;}

/* 뱃지 스타일 - 가이드라인 준수 */
.uxc_webzine .new_icon {display:inline-block; width:16px; height:16px; line-height:16px; font-size:10px; font-weight:700; color:var(--board-white-only); background:var(--color-prime); text-align:center; border-radius:2px; vertical-align:middle; margin-left:4px; opacity:0.8;}
.uxc_webzine .hot_icon {display:inline-block; width:16px; height:16px; line-height:16px; font-size:10px; font-weight:700; color:var(--board-white-only); background:var(--board-danger); text-align:center; border-radius:2px; vertical-align:middle; margin-left:4px; opacity:0.8;}
.uxc_webzine .uxc_webzine_li:hover .new_icon, .uxc_webzine .uxc_webzine_li:hover .hot_icon {opacity:1; transform:scale(1.1);}

/* 댓글 수 */
.uxc_webzine .lt_cmt {display:inline-block; padding:2px 8px; background:var(--board-gray-100); color:var(--board-gray-600); font-size:11px; font-weight:400; line-height:1.2; border-radius:12px; vertical-align:middle; margin-left:6px;}
.uxc_webzine .webzine_info > a:hover .lt_cmt {background:var(--color-prime); color:var(--board-white-only);}

/* 본문 내용 */
.uxc_webzine .webzine_content {font-size:14px; color:var(--board-gray-700); line-height:1.6; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; word-break:break-all;}

/* 메타 정보 */
.uxc_webzine .lt_info {display:flex; gap:4px; font-size:12px; color:var(--board-gray-500);}
.uxc_webzine .lt_info > span i {font-size:14px;}
.uxc_webzine .lt_board,
.uxc_webzine .lt_nick,
.uxc_webzine .lt_date {color:var(--board-gray-500); font-size:11px; display:flex; align-items:center; gap:4px;}

/* 빈 리스트 메시지 */
.uxc_webzine .empty_li {padding:60px 20px; text-align:center; color:var(--board-gray-500); font-size:14px; border:2px dashed var(--board-gray-300); border-radius:var(--board-radius); margin:20px 0;}
.uxc_webzine .empty_li i {font-size:48px; color:var(--board-gray-300); display:block; margin-bottom:10px;}

/* 반응형 디자인
   좁은 화면에서 세로로 눕히면(예전 flex-direction:column) 한 항목이 화면
   절반을 먹는 카드가 되어, 다섯 줄만 있어도 스크롤이 감당이 안 된다.
   웹진은 원래 「왼쪽 작은 프리뷰 + 오른쪽 제목·요약」이 원칙이므로 그 구조를
   그대로 두고 프리뷰만 줄인다. 마크업은 손댈 필요가 없다. */
@media (max-width: 767px) {
    .uxc_webzine .uxc_webzine_li {gap:13px; padding:14px 0;}
    .uxc_webzine .webzine_thumb {flex:0 0 104px; width:auto; aspect-ratio:4/3;}
    .uxc_webzine .webzine_info {gap:6px; justify-content:flex-start;}
    .uxc_webzine .webzine_info > a {font-size:15px;}
    .uxc_webzine .webzine_content {font-size:13.5px; -webkit-line-clamp:2; line-clamp:2;}
    .uxc_webzine .lt_info {font-size:12px; flex-wrap:wrap;}
}

@media (max-width: 480px) {
    .uxc_webzine .uxc_webzine_li {gap:11px; padding:12px 0;}
    .uxc_webzine .webzine_thumb {flex:0 0 88px;}
    .uxc_webzine .webzine_info > a {font-size:14.5px;}
    /* 요약은 한 줄만 — 좁은 폭에서 두 줄은 제목과 뭉쳐 보인다 */
    .uxc_webzine .webzine_content {font-size:13px; -webkit-line-clamp:1; line-clamp:1;}
    .uxc_webzine .lt_board {display:none;}   /* 위젯 제목이 이미 게시판을 말한다 */
}

/* 접근성 - 모션 감소 */
@media (prefers-reduced-motion: reduce) {
    .uxc_webzine * {transition:none !important; transform:none !important;}
}