@charset "utf-8";
/* 시공사례 */

/* 목록 */
.case-list-section {padding-block: var(--space-100);}

/* 필터 - 줄마다 항목명 160 + 칩 목록 */
.case-list-section .case-filter {display: flex; flex-direction: column; row-gap: var(--space-20); padding: var(--space-30); border: 1px solid var(--color-border1); border-radius: 20px; background-color: var(--color-white);}
.case-list-section .case-filter-row {display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: center; min-width: 0; margin: 0; padding: 0; border: 0;}
.case-list-section .case-filter-tit {float: left; padding: 0; color: var(--color-font2);}   /* legend 를 그리드 칸처럼 (float) */
.case-list-section .case-filter-bot {display: flex; align-items: center; justify-content: space-between; column-gap: var(--space-16); padding-top: var(--space-20); border-top: 1px dashed var(--color-border2);}
.case-list-section .case-reset-btn {display: inline-flex; align-items: center; column-gap: 8px; min-height: 44px; color: var(--color-font3); transition: color 0.2s;}
.case-list-section .case-reset-btn img {width: 20px; height: 20px; transition: transform 0.6s var(--ease-out);}
.case-list-section .case-count {color: var(--color-font1);}
.case-list-section .case-count strong {font-weight: inherit;}

/* 카드 - 2열 */
.case-list-section .case-list-wrap {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-100) var(--space-40); margin-top: var(--space-50);}
.case-list-section .case-list-wrap .case-item[hidden] {display: none;}
.case-list-section .empty-msg {margin-top: var(--space-50);}
.case-list-section .case-list-card .img-wrap {position: relative; display: flex; align-items: flex-start; justify-content: space-between; aspect-ratio: 740 / 420; padding: var(--space-20); border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.case-list-section .case-list-card .img-wrap > img {position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease-out);}
.case-list-section .case-list-card .img-wrap .badge {position: relative;}
.case-list-section .case-list-card {display: block;}
.case-list-section .case-list-card .card-tit {margin-top: var(--space-30); color: var(--color-font1); transition: color 0.3s;}
.case-list-section .case-list-card:focus-visible .img-wrap > img {transform: scale(1.04);}
.case-list-section .case-list-card:focus-visible .card-tit {color: var(--color-static2);}
.case-list-section .case-info {display: flex; flex-direction: column; row-gap: 10px; margin-top: var(--space-14);}
.case-list-section .case-info > div {display: flex; align-items: baseline; column-gap: var(--space-16);}   /* dt body-small · dd body-medium 글자선 맞춤 */
.case-list-section .case-info dt {flex: none; width: 100px; color: var(--color-font3);}
.case-list-section .case-info dd {min-width: 0; color: var(--color-font1);}

/* ===== 상세 ===== */
.case-view-section {padding-block: var(--space-100);}
.case-view-section .section-tit {color: var(--color-font1);}
.case-view-section .case-photo-count {width: 100%; display: inline-flex; align-items: center; column-gap: 4px; margin-top: var(--space-40); height: var(--size-50); border-bottom: 1px solid var(--color-border1); color: var(--color-font1);}
.case-view-section .case-photo-count strong {font-weight: inherit; color: var(--color-static2);}

/* 사진 - 큰 사진 (페이드) + 아래 목록 (선택 표시 · 자동 스크롤) */
.case-view-section .case-gallery {margin-top: var(--space-30);}
.case-view-section .case-main-wrap {position: relative;}
.case-view-section .case-main-swiper {border-radius: var(--radius); background-color: var(--section-bg1);}
.case-view-section .case-main-swiper .swiper-slide {aspect-ratio: 1520 / 732; overflow: hidden;}
.case-view-section .case-main-swiper .swiper-slide img {width: 100%; height: 100%; object-fit: cover; transform: scale(1.04); transition: transform 1.6s var(--ease-out);}
.case-view-section .case-main-swiper .swiper-slide-active img {transform: scale(1);}   /* 넘어올 때 천천히 제자리 */
.case-view-section .case-main-wrap .swiper-prev {left: var(--space-30);}
.case-view-section .case-main-wrap .swiper-next {right: var(--space-30);}
.case-view-section .case-main-wrap .swiper-nav-btn.swiper-button-disabled {opacity: 0; visibility: hidden;}
.case-view-section .case-thumb-swiper {margin-top: var(--space-30);}
.case-view-section .case-thumb-swiper .swiper-slide {width: 218px;}
.case-view-section .case-thumb {display: flex; flex-direction: column; row-gap: 10px; width: 100%; text-align: left;}
.case-view-section .case-thumb .img-wrap {position: relative; display: block; aspect-ratio: 218 / 160; border-radius: var(--radius); overflow: hidden; background-color: var(--section-bg1);}
.case-view-section .case-thumb .img-wrap img {width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out);}
.case-view-section .case-thumb .img-wrap::after {content: ''; position: absolute; inset: 0; box-sizing: border-box; border: 3px solid transparent; border-radius: inherit; transition: border-color 0.3s;}
.case-view-section .case-thumb.active .img-wrap::after {border-color: var(--color-static3);}
.case-view-section .case-thumb-label {color: var(--color-font3); transition: color 0.3s;}
.case-view-section .case-thumb.active .case-thumb-label {color: var(--color-font1);}
.case-view-section .case-thumb:focus-visible {outline: 2px solid var(--color-static2); outline-offset: 2px; border-radius: var(--radius);}

/* 차량 정보 - 3칸 · 사이 구분선 */
.case-view-section .case-view-info {display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: var(--space-60); padding: var(--space-30) var(--space-200); border-radius: var(--radius); background-color: var(--section-bg1);}
.case-view-section .case-view-info > div {position: relative; padding-left: var(--space-100);}
.case-view-section .case-view-info > div:first-child {padding-left: 0;}
.case-view-section .case-view-info > div + div::before {content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 30px; background-color: var(--color-border2); transform: translateY(-50%);}
.case-view-section .case-view-info dt {color: var(--color-font3);}
.case-view-section .case-view-info dd {margin-top: var(--space-16); color: var(--color-font1);}

/* 시공 설명 */
.case-view-section .case-view-desc {margin-top: var(--space-80);}
.case-view-section .case-view-desc .sub-section-tit {display: inline-block; padding-block: 10px; border-bottom: 1px solid var(--color-border2); color: var(--color-font1);}
.case-view-section .case-view-desc .body-medium {margin-top: var(--space-20); color: var(--color-font1);}

.case-view-section .case-view-btn {display: flex; justify-content: center; margin-top: var(--space-60);}
.case-view-section .case-view-btn .square-btn img {width: 20px; height: 20px;}

/* 필터로 새로 보이는 카드 - 살짝 올라오며 나타남 */
.case-list-section .case-item.is-new {animation: caseItemIn 0.9s var(--ease-out) both;}
@keyframes caseItemIn {from {opacity: 0; transform: translateY(24px);}}

@media (hover: hover) {
    .case-view-section .case-thumb:hover .img-wrap img {transform: scale(1.05);}
    .case-view-section .case-thumb:hover .case-thumb-label {color: var(--color-font1);}
    .case-list-section .case-reset-btn:hover {color: var(--color-font1);}
    .case-list-section .case-reset-btn:hover img {transform: rotate(-180deg);}
    .case-list-section .case-list-card:hover .img-wrap > img {transform: scale(1.04);}
    .case-list-section .case-list-card:hover .card-tit {color: var(--color-static2);}
}

@media screen and (max-width: 1024px) {
    .case-view-section .case-view-info {padding-inline: var(--space-40);}
    .case-view-section .case-view-info > div {padding-left: var(--space-40);}
    .case-list-section .case-filter-row {grid-template-columns: minmax(0, 1fr); row-gap: 10px;}
    .case-list-section .case-filter-tit {float: none;}
}

@media screen and (max-width: 768px) {
    .case-view-section .case-thumb-swiper .swiper-slide {width: 140px;}
    .case-view-section .case-main-wrap .swiper-nav-btn {width: var(--size-40); height: var(--size-40);}
    .case-view-section .case-main-wrap .swiper-prev {left: 12px;}
    .case-view-section .case-main-wrap .swiper-next {right: 12px;}
    /* 차량 정보 - 세로 · 구분선 가로 */
    .case-view-section .case-view-info {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-16); padding: var(--space-24);}
    .case-view-section .case-view-info > div {padding: var(--space-16) 0 0;}
    .case-view-section .case-view-info > div:first-child {padding-top: 0;}
    .case-view-section .case-view-info > div + div::before {top: 0; width: 100%; height: 1px; transform: none;}
    .case-list-section .case-list-wrap {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-60);}
}