/* 상단 영역 스타일 */
.page-container {
   padding-top: 80px;
}

.proview-top {
   display: flex;
   gap: 50px;
   margin-bottom: 50px;
   justify-content: center;
}

.proview-l {
   flex: 1;
   max-width: 800px;
}

.proview-r {
   flex: 1;
   max-width: 400px;
}

.proview-sub-txt {
   color: #666;
   font-size: 16px;
   margin-bottom: 10px;
}

.proview-tit {
   font-size: 36px;
   font-weight: bold;
   font-family: 'NanumSquareEB';
   color: #333;
   display: block;
   margin-bottom: 30px;
}

.proview-info {
   list-style: none;
   padding: 0;
   margin: 0;
}

.proview-info li {
   display: flex;
   justify-content: space-between;
   padding: 15px 0;
}

.proview-info li:not(.with-border) {
   border-bottom: none;
}

.proview-info li.with-border {
   border-bottom: 1px solid #eee;
   padding-bottom: 15px;
   margin-bottom: 15px;
}

.proview-infolist-l {
   color: #666;
   font-weight: 500;
   font-family: 'NanumSquareEB';
}

.proview-infolist-r {
   color: #333;
   font-weight: 500;
}

.proview-btnbox {
   margin-top: 30px;
   background-color: #fff;
}

.proview-btnbox-inner {
   display: flex;
   gap: 10px;
   margin-top: 10px;
}

.btn-type {
   display: inline-block;
   padding: 12px 25px;
   border-radius: 4px;
   text-decoration: none;
   text-align: center;
   font-weight: 500;
   border: 1px solid var(--point-color);
   background-color: transparent;
   color: var(--point-color);
   transition: all 0.3s ease;
   width: 100%;
}

.btn-type:hover {
   background-color: var(--point-color);
   color: white;
}

/* Swiper 스타일 */
.swiper-container {
   width: 100%;
   aspect-ratio: 4/3;
}

.proview-swiper {
   width: 100%;
   height: 80%;
   position: relative;
   overflow: hidden;
}

.swiper-slide {
   display: flex;
   align-items: center;
   justify-content: center;
}

.swiper-slide img {
   width: 100%;
   height: 100%;
   object-fit: contain;
   max-height: 450px;
}

/* 슬라이더 네비게이션 */
.proview-swiper-prev,
.proview-swiper-next {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   width: 40px;
   height: 40px;
   z-index: 10;
   cursor: pointer;
   border-radius: 50%;
}

.swiper-button-prev:after,
.swiper-button-next:after {
   font-size: 18px !important;
   color: #909090;
}

.proview-swiper-prev {
   left: 10px;
}

.proview-swiper-next {
   right: 10px;
}

/* 페이지네이션 */
.proview-pagination {
   position: absolute;
   bottom: 10px !important;
   width: 100%;
   text-align: center;
   z-index: 10;
}

.swiper-pagination-bullet {
   width: 8px;
   height: 8px;
   margin: 0 5px;
   background: #6f6f6f;
   opacity: 0.5;
}

.swiper-pagination-bullet-active {
   opacity: 1;
   background: var(--point-color);
}

/* 상세 스펙 영역 스타일 */
.product-detail {
   margin-top: 50px;
}

.specs-section {
   margin-bottom: 40px;
}

.specs-section h2 {
   font-size: 24px;
   color: var(--point-color);
   margin-bottom: 20px;
   padding-bottom: 10px;
   border-bottom: 2px solid var(--point-color);
}

.specs-table {
   width: 100%;
   border-collapse: collapse;
}

.specs-table th,
.specs-table td {
   padding: 15px;
   border: 1px solid #eee;
}

.specs-table th {
   background: #f8f9fa;
   width: 30%;
   text-align: left;
   font-weight: 500;
   font-family: 'NanumSquareEB';
   color: #333;
}

.specs-table td {
   color: #666;
}

/* 반응형 */
@media (max-width: 1200px) {
   .proview-top {
       flex-direction: column;
   }

   .proview-l,
   .proview-r {
       max-width: 100%;
   }

   .proview-tit {
       font-size: 24px;
   }

   .proview-btnbox-inner {
       flex-direction: column;
   }

   .btn-type {
       width: 100%;
   }

   .specs-table th,
   .specs-table td {
       padding: 10px;
   }

   .specs-section h2 {
       font-size: 20px;
   }
}



.proview-sub-txt {
   color: #006732;
}

.proview-sub-txt.done {
   color: rgb(153, 153, 153);
}

.proview-sub-txt.in-progress {
   color: #c6060d;
}