@charset "utf-8";

/* 리스트 컨테이너 - Grid 사용 */
.uxc_gallery ul {display:grid; grid-template-columns:repeat(4, 1fr); grid-gap:20px; list-style:none; margin:0; padding:0;}

/* 리스트 아이템 - Grid 기반 */
.uxc_gallery li {display:flex; flex-direction:column;}
.uxc_gallery li.empty_li {grid-column:1 / -1; text-align:center; color:var(--board-gray-500); padding:40px 0;}
.uxc_gallery li.empty_li i {font-size:48px; color:var(--board-gray-300); display:block; margin-bottom:10px;}

/* 썸네일 이미지 */
.uxc_gallery li .lt_img {display:flex; position:relative; overflow:hidden; border-radius:var(--board-radius); background:var(--board-gray-100);}
.uxc_gallery li .lt_img img {width:100%; height:100%; object-fit:cover;}
.uxc_gallery li .lt_img img[alt="이미지가 없습니다."] {height:115px;}
.uxc_gallery li .lt_img:hover {opacity:0.8;}

/* 제목 텍스트 */
.uxc_gallery li a {margin-top:8px; font-size:14px; font-weight:600; min-height:42px; color:var(--board-gray-900); line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical;}
.uxc_gallery li a:hover {color:var(--color-prime);}
.uxc_gallery li strong {font-weight:600;}

/* 아이콘 뱃지 - 가이드라인 따름 */
.uxc_gallery li .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_gallery li .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_gallery li a:hover .new_icon, .uxc_gallery li a:hover .hot_icon {opacity:1; transform:scale(1.1);}

/* 비밀글 아이콘 */
.uxc_gallery li .bx-lock-alt {display:inline-block; width:16px; height:16px; line-height:16px; font-size:12px; color:var(--board-gray-600); background:var(--board-gray-100); text-align:center; border-radius:2px; vertical-align:middle; margin-right:4px;}

/* 댓글 수 */
.uxc_gallery .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_gallery li a:hover .lt_cmt {background:var(--color-prime); color:var(--board-white-only);}

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

/* 반응형 디자인 - Grid 기반 */
@media (max-width: 1024px) {
    .uxc_gallery ul {grid-template-columns:repeat(4, 1fr);}
}

@media (max-width: 768px) {
    .uxc_gallery ul {grid-template-columns:repeat(3, 1fr); gap:16px;}
}

@media (max-width: 480px) {
    .uxc_gallery ul {grid-template-columns:repeat(2, 1fr);}
    .uxc_gallery li a {font-size:13px;}
    .uxc_gallery .lt_date {font-size:11px;}
}

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

/* --------------------------------------------------------
cardBox 스타일 (makeMap 스킨 호환)
----------------------------------------------------------*/
/* cardBox 기본 스타일 - 프리미엄 */
.uxc_gallery .cardBox {
    display:flex;
    flex-direction:column;
    position:relative;
    gap:10px;
    padding:10px;
    border-radius:8px;
    background:linear-gradient(145deg, #d4a8438c, #d4a8430d) !important;
    border:2px solid #d4a843;
    box-shadow:0 2px 12px rgba(212, 168, 67, 0.15);
    transition:box-shadow 0.3s ease, transform 0.3s ease;
}
.uxc_gallery .cardBox:hover {
    box-shadow:0 4px 20px rgba(212, 168, 67, 0.3);
    transform:translateY(-2px);
}

/* 썸네일 */
.uxc_gallery .cardBox .thumb {
    display:block;
    position:relative;
    background:var(--board-gray-100);
    border-radius:14px;
    border:1px solid var(--board-gray-200);
    overflow:hidden;
    aspect-ratio:2/3;
}
.uxc_gallery .cardBox .thumb img {
    width:100%;
    height:100%;
    object-fit:fill;
    transition:transform 0.4s ease;
}
.uxc_gallery .cardBox .thumb .labelBox {
    position:absolute;
    z-index:1;
    top:6px;
    left:6px;
}
.uxc_gallery .cardBox .badge-recomm {
    position:absolute;
    z-index:1;
    top:-10px;
    right:-10px;
    display:block;
    width:70px;
    height:70px;
}
.uxc_gallery .cardBox .badge-recomm img {
    width:100%;
    height:100%;
    object-fit:contain;
}

/* 콘텐츠 영역 */
.uxc_gallery .cardBox .cardBoxContent {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.uxc_gallery .cardBox .titleBox {
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
    text-align:left;
}
.uxc_gallery .cardBox .title {
    display:block;
    width:100%;
    color:var(--board-gray-900);
    font-size:16px;
    font-weight:600;
    line-height:1.2;
    text-align:left;
}
.uxc_gallery .cardBox .title a {
    display:flex !important;
    flex-direction:column;
    align-items:flex-start !important;
    justify-content:flex-start;
    gap:10px;
    text-align:left;
    margin-top:0;
    min-height:auto;
}

/* estate 상세정보 */
.uxc_gallery .cardBox .estate-title {
    font-size:15px;
    font-weight:700;
    line-height:1.4;
    display:-webkit-box;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
}
.uxc_gallery .cardBox .estate-details {
    margin-top:10px;
}
.uxc_gallery .cardBox .estate-details .detail-item {
    font-size:12px;
    color:var(--board-gray-600);
    line-height:1.5;
    margin:3px 0;
    display:-webkit-box;
    overflow:hidden;
    text-overflow:ellipsis;
    -webkit-line-clamp:1;
    -webkit-box-orient:vertical;
}
.uxc_gallery .cardBox .estate-details .detail-item .label {
    font-weight:500;
    color:var(--board-gray-700);
    margin-right:4px;
}

/* infoBox */
.uxc_gallery .cardBox .infoBox {
    display:flex;
    justify-content:space-between;
    align-items:center;
}
.uxc_gallery .cardBox .infoBox .info {
    gap:10px;
    display:flex;
    align-items:center;
}
.uxc_gallery .cardBox .infoBox .info dl {
    margin:0;
    display:flex;
    align-items:center;
    gap:4px;
}
.uxc_gallery .cardBox .infoBox .info dl dt {
    color:var(--board-gray-500);
    font-size:14px;
}
.uxc_gallery .cardBox .infoBox .info dl dd {
    color:var(--board-gray-600);
    font-size:13px;
    margin:0;
}

/* iconBox, labelBox 공통 */
.iconBox {
    padding:2px 6px;
    border-radius:10px;
    font-size:10px;
    font-weight:600;
}
.labelBox {
    padding:4px 10px;
    border-radius:4px;
    font-size:12px;
    font-weight:600;
}
.bg-pr {background:var(--color-prime);}
.color-wh {color:var(--board-white-only);}
.color-wh-only {color:var(--board-white-only);}
.round-s {border-radius:4px;}
.round-m {border-radius:8px;}

/* 반응형 - cardBox */
@media (max-width: 768px) {
    .uxc_gallery .cardBox .estate-title {font-size:14px;}
    .uxc_gallery .cardBox .estate-details .detail-item {font-size:11px;}
}

@media (max-width: 480px) {
    .uxc_gallery .cardBox {padding:8px;}
    .uxc_gallery .cardBox .infoBox .info dl dt {font-size:12px;}
    .uxc_gallery .cardBox .infoBox .info dl dd {font-size:12px;}
}