@charset "UTF-8";

/* 메인페이지 */
#page-content .main-content {}
#page-content .main-content .main-product-list {display: flex; flex-wrap: wrap; gap: 16px;}
#page-content .main-content .main-product-list > li {width: calc(50% - 8px); height: 300px; background-repeat: no-repeat; background-size: cover; background-position: center; border-radius: 12px; overflow: hidden; cursor: pointer;
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    animation: fadeInUpScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
#page-content .main-content .main-product-list > li > div.list-box {display: block; position: relative; width: 100%; height: 100%; background:linear-gradient(180deg,rgba(57, 45, 34, 0) 23%, rgba(57, 45, 34, 0.32) 54%, rgba(57, 45, 34, 0.45) 75%, rgba(57, 45, 34, 1) 102%);}
#page-content .main-content .main-product-list > li > div.list-box > div {position: absolute; bottom:0; left:0; padding:0 28px 31px 28px; color: #fff;}
#page-content .main-content .main-product-list > li > div.list-box > div em {font-style: normal; font-weight:700; font-size:26px; display: block; margin-bottom: 12px;}
#page-content .main-content .main-product-list > li > div.list-box > div ul.product-category {display: flex; align-items: center; flex-wrap: wrap; width: 100%; gap:8px;}
#page-content .main-content .main-product-list > li > div.list-box > div ul.product-category li a {display: inline-flex; align-items: center; height: 36px; border:1px solid #fff; border-radius:21px; padding:0 12px; font-weight: 400; background-color: rgba(0,0,0,0.17);}
#page-content .main-content .main-product-list > li > div.list-box > div ul.product-category li a:hover {background-color: #fff; color: #1a1a1a; transition: all 0.3s;}

/* 메인 카테고리 카드 호버 효과 제거 */
#page-content .main-content .main-product-list > li:hover {
    transform: none;
    box-shadow: none;
}

/* 메인 카테고리 카드 지연 애니메이션 - JavaScript로 동적 설정 */

/* 메인 카테고리 카드 애니메이션 키프레임 */
@keyframes fadeInUpScale {
    from {
        opacity: 0;
        transform: translateY(40px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 구성품 스펙 이미지 스타일 */
.bundle-spec-content {
    padding: 20px;
}

.bundle-info {
    margin-bottom: 20px;
    padding: 15px;
    background-color: #f8f9fa;
    border-radius: 8px;
    border-left: 4px solid #007bff;
}

.bundle-info p {
    margin: 0;
    color: #555;
    line-height: 1.6;
}

.spec-image-container {
    text-align: center;
    margin: 20px 0;
}

.spec-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease;
}

.spec-image:hover {
    transform: scale(1.02);
}

.no-spec-message {
    text-align: center;
    padding: 40px 20px;
    color: #999;
    font-style: italic;
}

.no-spec-message p {
    margin: 0;
    font-size: 16px;
}

/* 구성품 스펙 테이블 스타일 */
.spec-table-container {
    margin: 20px 0;
    overflow-x: auto;
}

.spec-table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    background-color: #fff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    font-size: 14px;
}

.spec-table th,
.spec-table td {
    border: 1px solid #e0e0e0;
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
}

.spec-table th {
    background-color: #f8f9fa;
    font-weight: 600;
    color: #333;
    border-bottom: 2px solid #dee2e6;
}

.spec-table tbody tr:nth-child(even) {
    background-color: #f8f9fa;
}

.spec-table tbody tr:hover {
    background-color: #e3f2fd;
    transition: background-color 0.2s ease;
}

.spec-table td:first-child {
    font-weight: 500;
    color: #555;
    text-align: left;
    padding-left: 20px;
}

.spec-table td:nth-child(2) {
    color: #666;
    font-size: 13px;
}

/* 제품 목록 */ㅋㄴㅌ
#page-content .product-list-content {padding-bottom:0px;}
#page-content .product-list-content .search-result {text-align: center; padding:32px 0;}
#page-content .product-list-content .search-result .search-result-title {font-size: 28px; color:#333;}
#page-content .product-list-content .search-result .search-result-title b {color: #004b93;}
#page-content .product-list-content .search-result .search-number {font-size: 22px; font-weight:500; color: #666;}
#page-content .product-list-content .search-result .search-number span {color: #ff6f00;}

/* 검색 결과 없음 */
.no-products {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    width: 100%;
    max-width: 400px;
    z-index: 10;
}
.no-products p {
    font-size: 18px;
    color: #666;
    margin: 8px 0;
}
.no-products p:first-child {
    font-size: 24px;
    color: #333;
    font-weight: 600;
}

#page-content .product-list-content > ul.product-list {}
#page-content .product-list-content > ul.product-list {display: flex; flex-wrap: wrap; gap: 10px;}
#page-content .product-list-content > ul.product-list > li {width: calc(50% - 5px); display: flex; height: 180px; background-color: #f8f8f8; padding:30px 27px; border-radius: 12px; position: relative; 
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUpScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* 지연 애니메이션을 위한 nth-child 선택자 */
#page-content .product-list-content > ul.product-list > li:nth-child(1) { animation-delay: 0.05s; }
#page-content .product-list-content > ul.product-list > li:nth-child(2) { animation-delay: 0.1s; }
#page-content .product-list-content > ul.product-list > li:nth-child(3) { animation-delay: 0.15s; }
#page-content .product-list-content > ul.product-list > li:nth-child(4) { animation-delay: 0.2s; }
#page-content .product-list-content > ul.product-list > li:nth-child(5) { animation-delay: 0.25s; }
#page-content .product-list-content > ul.product-list > li:nth-child(6) { animation-delay: 0.3s; }
#page-content .product-list-content > ul.product-list > li:nth-child(7) { animation-delay: 0.35s; }
#page-content .product-list-content > ul.product-list > li:nth-child(8) { animation-delay: 0.4s; }
#page-content .product-list-content > ul.product-list > li:nth-child(9) { animation-delay: 0.45s; }
#page-content .product-list-content > ul.product-list > li:nth-child(10) { animation-delay: 0.5s; }

/* 호버 효과 제거 - 기본 상태만 유지 */

/* 상세 페이지 주요특장점 애니메이션 */
.product-slide-wrap .swiper-slide,
.tab-features .swiper-slide {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    animation: fadeInUpScale 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    
}

/* 주요특장점 지연 애니메이션 */
.product-slide-wrap .swiper-slide:nth-child(1),
.tab-features .swiper-slide:nth-child(1) { animation-delay: 0.05s; }
.product-slide-wrap .swiper-slide:nth-child(2),
.tab-features .swiper-slide:nth-child(2) { animation-delay: 0.1s; }
.product-slide-wrap .swiper-slide:nth-child(3),
.tab-features .swiper-slide:nth-child(3) { animation-delay: 0.15s; }
.product-slide-wrap .swiper-slide:nth-child(4),
.tab-features .swiper-slide:nth-child(4) { animation-delay: 0.2s; }
.product-slide-wrap .swiper-slide:nth-child(5),
.tab-features .swiper-slide:nth-child(5) { animation-delay: 0.25s; }
.product-slide-wrap .swiper-slide:nth-child(6),
.tab-features .swiper-slide:nth-child(6) { animation-delay: 0.3s; }
.product-slide-wrap .swiper-slide:nth-child(7),
.tab-features .swiper-slide:nth-child(7) { animation-delay: 0.35s; }
.product-slide-wrap .swiper-slide:nth-child(8),
.tab-features .swiper-slide:nth-child(8) { animation-delay: 0.4s; }
.product-slide-wrap .swiper-slide:nth-child(9),
.tab-features .swiper-slide:nth-child(9) { animation-delay: 0.45s; }
.product-slide-wrap .swiper-slide:nth-child(10),
.tab-features .swiper-slide:nth-child(10) { animation-delay: 0.5s; }

/* 구성품 애니메이션 제거 - 정적 표시 */
.component-list li {
    opacity: 1;
    transform: none;
    transition: none;
}

#page-content .product-list-content > ul.product-list > li .product-img {
    min-width: 120px;
    max-width: 120px;
    width: 120px;
    padding: 4px;
    flex-shrink: 0;
    /* display: flex; 20251214 수정*/ 
    align-items: center;
    justify-content: center;
}
#page-content .product-list-content > ul.product-list > li .product-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}
#page-content .product-list-content > ul.product-list > li .product-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
}
#page-content .product-list-content > ul.product-list > li .product-info > a {
    display: block;
    min-width: 0;
}

 
#page-content .product-list-content > ul.product-list > li .product-info .category-txt {
    font-size: 18px;
    font-weight: 700;
    margin-top: 4px;
    color: #232323;
    overflow: hidden;
    text-overflow: clip;
    white-space: nowrap;
    width: 100%;
}    

/* 2025.12.22 수정전 
#page-content .product-list-content > ul.product-list > li .product-info .category-txt {
    font-size: 16px; 
    font-weight:500; 
    color:#4d4d4d;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
}
    */
/* #page-content .product-list-content > ul.product-list > li .product-info .pd-name {
    margin-top:8px; 
    display: block; 
    color:#1a1a1a; 
    font-size: 18px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 100%;
} */

/*  2025.12.22 수정전 코드
#page-content .product-list-content > ul.product-list > li .product-info .pd-name {
  margin-top: 8px;
  display: block;
  color: #1a1a1a;
  font-size: 18px;

  white-space: normal;       nowrap 제거 
  overflow: visible;         hidden 제거 
  text-overflow: clip;       ellipsis 제거
  width: 100%;
  word-break: break-word;    긴 단어도 줄바꿈 
}
*/
#page-content .product-list-content > ul.product-list > li .product-info .pd-name {
  margin-top: 4px;
  font-weight: 500;
  display: block;
  color: #999;
  font-size: 15px;
  white-space: normal;  
  overflow: visible; 
  text-overflow: clip;      /* ellipsis 제거 */
  width: 100%;
  word-break: break-word;   /* 긴 단어도 줄바꿈 */
}

/* 1) 카드(li)를 기준점으로 만든다 */
#page-content .product-list-content > ul.product-list > li{
  position: relative;
  padding-bottom: 80px;   /* 버튼 영역만큼 공간 확보(겹침 방지) */
}

/* 2) 버튼 영역을 카드 바닥에 고정 */
#page-content .product-list-content > ul.product-list > li .pd-btn-wrap{
  position: absolute;
  bottom: 20px;           /* 바닥에서 20px */
  top: auto !important;   /* 기존 top:20px 덮어쓰기 */
  margin: 0 !important;
}

#page-content .product-list-content > ul.product-list > li .pd-btn-wrap {margin-top:20px; display: flex; gap: 10px;}

#page-content .product-list-content > ul.product-list > li .pd-btn-wrap button {width:160px; height: 48px; border:1px solid #e5e5ea; background-color: #fff; border-radius:30px;}
#page-content .product-list-content > ul.product-list > li .pd-btn-wrap button:hover {transition: all 0.3s; background-color: #1a1a1a; color: #fff;}

/* 비교하기 버튼 비활성화 스타일 */
#page-content .product-list-content > ul.product-list > li .pd-btn-wrap button:disabled,
#page-content .product-list-content > ul.product-list > li .pd-btn-wrap button.disabled {opacity: 0.5; cursor: not-allowed; pointer-events: none;}
#page-content .product-list-content > ul.product-list > li .pd-btn-wrap button:disabled:hover,
#page-content .product-list-content > ul.product-list > li .pd-btn-wrap button.disabled:hover {background-color: #fff; color: #1a1a1a;}

.comparison_product {position: fixed; bottom:0; left:0; width:100%; height: 300px; transition:all 0.4s; z-index: 9999;}
.comparison_product.fold {bottom:-265px;}
.comparison_product .btn-expand {}
.comparison_product .btn-expand button {position: relative; z-index: 10; background-color: #fff; border-radius:8px 8px 0 0; height: 32px; box-shadow: 0 -8px 12px rgba(25, 25, 25, 0.1); width: 80px; display: flex; align-items: center; justify-content: center;}
.comparison_product .btn-expand button img {width: 18px; transform: rotate(0);}
.comparison_product.fold .btn-expand button img {transform: rotate(180deg);}
.comparison_product .expand-box {background-color: #fff; box-shadow: 0 4px 20px rgba(25, 25, 25, 0.4); height: 100%;}
.comparison_product .expand-box .expand-title {display: flex; padding:24px 0; align-items: center; justify-content: space-between;}
.comparison_product .expand-box .expand-title em {font-weight: 700; color: #1a1a1a; font-style: normal; font-size: 20px;}
.comparison_product .expand-box .expand-title em span {color:#ff730f;}
.comparison_product .expand-box .expand-title .btn-wrap {}
.comparison_product .expand-box .expand-title .btn-wrap .reset-btn {display: inline-flex; align-items: center;}
.comparison_product .expand-box .expand-title .btn-wrap .reset-btn img {width: 15px; height: 15px; margin-left: 10px;}
.comparison_product .expand-box .expand-title .btn-wrap .comparison-btn {height: 48px; margin-left: 26px; height: 48px; border-radius:32px; background-color:#ff730f; color: #fff; font-size: 16px; font-weight: 600; width: 206px;}

.comparison_product .comparison-list ul.product-list {display: flex; gap: 10px;}
.comparison_product .comparison-list ul.product-list > li {
    flex: 1;
    min-width: 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    height: 140px;
    background-color: #f8f8f8;
    padding: 20px 8px;
    border-radius: 12px;
}
.comparison_product .comparison-list ul.product-list > li.select-product .product-img {
    max-width: 100px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.comparison_product .comparison-list ul.product-list > li.select-product .product-img img {
    width: 100%;
    max-width: 100px;
    height: auto;
    object-fit: contain;
}
.comparison_product .comparison-list ul.product-list > li.select-product .product-info {width: 100%;}
.comparison_product .comparison-list ul.product-list > li.select-product .product-info .category-txt {font-size: 16px; font-weight:500; color:#4d4d4d; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; max-height: 2.8em;}
.comparison_product .comparison-list ul.product-list > li.select-product .product-info .pd-name {margin-top:8px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; color:#1a1a1a; font-size: 20px; line-height: 1.4; max-height: 2.8em;}
.comparison_product .comparison-list ul.product-list > li.select-product > button {width: 46px; opacity: 0.8;}
.comparison_product .comparison-list ul.product-list > li.none-select {border: 1px dashed #b3b3b3; background-color: #fff; display: flex; align-items: center; justify-content: center; text-align: center;}
.comparison_product .comparison-list ul.product-list > li.none-select p {color: #808080; font-weight:600; font-size: 17px;}


/* 제품 상세 */
.product-detail-page .head-fixed {transition: all 0.3s ease;}
.product-detail-page .head-fixed.is-fixed {position: fixed; top: 80px; left: 0; z-index: 100; background-color: #fff; height: 80px; border-top:1px solid #efefef; width: 100%;}
.product-detail-page .product-detail-head {display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100px; transition: all 0.3s ease;}
.product-detail-page .product-detail-head .product-img {display: flex; align-items: center;}
.product-detail-page .head-fixed.is-fixed .product-detail-head {height: 80px;}
.product-detail-page .head-fixed.is-fixed .product-detail-head .product-img img {display: none;}
.product-detail-page .head-fixed.is-fixed .product-detail-head .product-img .product-name {display: flex; align-items: center; margin-left:0;}
.product-detail-page .head-fixed.is-fixed .product-detail-head .product-img .product-name div {margin-right:8px;}
.product-detail-page .product-detail-head .product-img img {width: 100px;}
.product-detail-page .product-detail-head .product-img .product-name {margin-left:10px;}
.product-detail-page .product-detail-head .product-img .product-name div b {font-size: 20px; font-weight: 700;}
.product-detail-page .product-detail-head .product-img .product-name p {font-size: 16px; color: #666; font-weight: 500;}
.product-detail-page .product-detail-head .btn-wrap {display: flex; gap: 10px;}
.product-detail-page .product-detail-head .btn-wrap button {height: 52px; padding:0 10px; min-width: 160px; color: #333; font-size: 17px; font-weight: 600; border:1px solid #e5e5ea; border-radius:36px;}
/* 상세 페이지 비교하기 버튼 비활성화 스타일 */
.product-detail-page .product-detail-head .btn-wrap button.compare-btn:disabled,
.product-detail-page .product-detail-head .btn-wrap button.compare-btn.disabled {opacity: 0.5; cursor: not-allowed; pointer-events: none;}
.product-detail-page .product-detail-head .btn-wrap button.compare-btn:disabled:hover,
.product-detail-page .product-detail-head .btn-wrap button.compare-btn.disabled:hover {background-color: #fff; color: #333; border:1px solid #e5e5ea;}

.product-detail-page .product-tab {border-top:1px solid #e5e5ea; position: relative; }
.product-detail-page .product-tab .tab-btn-wrap {background: #fff; z-index: 100; margin:24px 0; transition: all 0.3s ease;}
.product-detail-page .product-tab .tab-btn-wrap.is-fixed {position: fixed; top: 160px; left: 0; margin-top:0; right: 0; background-color: #f5f7fa; padding:6px 0; border-top:1px solid #efefef; border-bottom:1px solid #efefef}
.product-detail-page .product-tab .tab-contents {padding-bottom: 220px;}
.product-detail-page .product-tab .tab-buttons {display: flex; gap:8px; align-items: center; justify-content: center; width: 328px; background-color: #f5f7fa; padding:6px;border-radius: 36px; margin:0 auto;}
.product-detail-page .product-tab .tab-buttons li {}
.product-detail-page .product-tab .tab-buttons li button {color: #2954BE; font-size: 17px; width:100px; height: 44px; border-radius:32px;}
.product-detail-page .product-tab .tab-buttons li button.on {color: #fff; background-color: #2954BE;}

/* 탭 패널 기본 스타일 */
.product-detail-page .product-tab .tab-panel {display: none;}
.product-detail-page .product-tab .tab-panel.active {display: block;}

/* 탭 패널 빈 데이터 메시지 스타일 */
.product-detail-page .product-tab .tab-panel .no-data-message {
    text-align: center;
    padding: 80px 20px;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.product-detail-page .product-tab .tab-panel .no-data-message .message-title {
    font-size: 28px;
    font-weight: 600;
    color: #333;
    margin-bottom: 16px;
}
.product-detail-page .product-tab .tab-panel .no-data-message .message-subtitle {
    font-size: 18px;
    font-weight: 400;
    color: #999;
    margin: 0;
}

/* 주요특장점 스타일 (2열 그리드) */
.product-detail-page .product-tab .product-slide-wrap {max-width: 1340px; margin:0 auto; width: 100%; padding:0 27px;}
.product-detail-page .product-tab .product-slide-wrap .swiper-wrapper {display: flex; flex-wrap: wrap; gap: 30px 10px;}

.product-detail-page .product-tab .product-slide-wrap .swiper-slide {width: calc(50% - 10px)}
.product-detail-page .product-tab .product-slide-wrap .swiper-slide .thum {position: relative; border-radius:12px; overflow: hidden; height: 300px;}
.product-detail-page .product-tab .product-slide-wrap .swiper-slide .thum img {width: 100%; height: 100%; object-fit: cover;}
.product-detail-page .product-tab .product-slide-wrap .swiper-slide .thum button {position: absolute; right:30px; bottom:20px; background: transparent; border: none; cursor: pointer;}
.product-detail-page .product-tab .product-slide-wrap .swiper-slide .card-info {min-height: 100px;}
.product-detail-page .product-tab .product-slide-wrap .swiper-slide .card-info div {margin:30px 0 10px 0;}
.product-detail-page .product-tab .product-slide-wrap .swiper-slide .card-info div b {font-size: 24px; font-weight:700;}
.product-detail-page .product-tab .product-slide-wrap .swiper-slide .card-info p {font-size: 17px; font-weight:500; color: #333; padding-right: 10px; word-break: keep-all;}
.modal-popup {display: none; position: fixed; inset: 0; z-index: 1000;}
.modal-dim {position: absolute; inset: 0; background: rgba(0,0,0,0.68);}
.modal-inner {
  position: relative;
  border-radius: 6px 6px 0 0;
  max-width: 960px;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
  /* min-height: 630px; */
  background: #fff;
  border-radius: 12px;
  z-index: 1001;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
  overflow: hidden;
}
.modal-inner-cont {
  padding:24px;
}
.modal-inner .btn-close {
  position: absolute;
  top: 10px;
  right: 10px;
  border: none;
  cursor: pointer;
  z-index: 10;
}
.modal-inner .pdf-download {
  position: absolute;
  top: 24px;
  left: 8px;
  border: none;
  background: rgba(0,0,0,0.3);
  font-size: 18px;
  cursor: pointer;
  font-weight: 500;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding:0 18px;
  border-radius: 34px;
  z-index: 10;
}
.modal-popup .modal-content .modal-title {font-size: 24px; font-weight:700;}
.modal-popup .modal-content .modal-title span {color: #ff6f00;}
/* 서브타이틀 스타일 */
.modal-popup .modal-content .modal-subtitle {
    font-size: 18px; color: #666;
}

.modal-popup .modal-content .sub-txt-list {
    margin-top: 45px; 
    padding-right: 80px;
    height: 1.2em; 
    overflow: hidden;
    list-style: disc;  /* 불릿 포인트 표시 */
    color:  #999;
    font-size: 11px;
}
.modal-popup .modal-content .sub-txt-list li {
    padding-right: 40px;
    list-style: disc;  /* li 요소에도 불릿 포인트 표시 */
    display: list-item;  /* list-item으로 표시 */
}
.modal-popup .modal-content .sub-txt-list.on {height: auto;}

.modal-popup .modal-content .modal-fold-cont {position: relative;}
.modal-popup .modal-content .modal-fold-cont .fold-btn {position: absolute; right:0; top:0; display: inline-flex; align-items: center;}
.modal-popup .modal-content .modal-fold-cont .fold-btn img {margin-left:5px;}

.modal-popup .modal-slide {
    height: 450px; 
    background-color: rgba(0,0,0,0.3);
    border-radius: 12px 12px 0 0; /* 상단만 라운드 처리 */
    overflow: hidden; /* 라운드 영역 밖 내용 숨김 */
    position: relative;
}

/* 이미지만 있는 경우 풀사이즈 스타일 */
.modal-popup.image-only .modal-slide {
    height: 80vh !important;
    border-radius: 12px !important;
}

.modal-popup.image-only .modal-slide .swiper-slide {
    height: 100% !important;
}

.modal-popup.image-only .modal-slide .swiper-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: fill !important;
    border-radius: 12px !important;
    background-color: #000;
}
.modal-popup .modal-slide .modal-product {
    height: 100%;
    border-radius: 12px 12px 0 0; /* 상단만 라운드 처리 */
    overflow: hidden; /* 라운드 영역 밖 내용 숨김 */
}
.modal-popup .modal-slide .modal-product .swiper-button-next {
    background-image: url(../img/modal-slide-next.png); 
    height: 52px; 
    width: 52px; 
    background-repeat: no-repeat; 
    background-size: contain;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer;
    position: absolute;
    display: block !important;
    pointer-events: auto !important;
    border: none;
    background-color: transparent;
}
.modal-popup .modal-slide .modal-product .swiper-button-prev {
    background-image: url(../img/modal-slide-prev.png); 
    height: 52px; 
    width: 52px;  
    background-repeat: no-repeat; 
    background-size: contain;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1000;
    opacity: 1 !important;
    visibility: visible !important;
    cursor: pointer;
    position: absolute;
    display: block !important;
    pointer-events: auto !important;
    border: none;
    background-color: transparent;
}

/* Swiper 기본 화살표 숨기기 */
.modal-popup .modal-slide .modal-product .swiper-button-next:after,
.modal-popup .modal-slide .modal-product .swiper-button-prev:after {
    display: none;
}

/* 화살표 버튼 호버 효과 */
.modal-popup .modal-slide .modal-product .swiper-button-next:hover,
.modal-popup .modal-slide .modal-product .swiper-button-prev:hover {
    opacity: 0.8 !important;
    transform: translateY(-50%) scale(1.1);
    transition: all 0.2s ease;
}

/* 화살표 버튼 활성 상태 */
.modal-popup .modal-slide .modal-product .swiper-button-next:active,
.modal-popup .modal-slide .modal-product .swiper-button-prev:active {
    opacity: 0.6 !important;
    transform: translateY(-50%) scale(0.95);
}

/* 모달 슬라이드 이미지 스타일 */
.modal-popup .modal-slide .swiper-slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    border-radius: 12px 12px 0 0; /* 상단만 라운드 처리 */
}

/* 모달 슬라이드 자체 스타일 */
.modal-popup .modal-slide .swiper-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.1);
    border-radius: 12px 12px 0 0; /* 상단만 라운드 처리 */
    overflow: hidden; /* 라운드 영역 밖 내용 숨김 */
}

/* Swiper wrapper도 라운드 처리 */
.modal-popup .modal-slide .swiper-wrapper {
    border-radius: 12px 12px 0 0; /* 상단만 라운드 처리 */
    overflow: hidden; /* 라운드 영역 밖 내용 숨김 */
}

.modal-content {
  max-height: 90vh;
  overflow-y: auto;
}

/* 제품스펙 */
.spec-wrap .spec-accordion .accordion-content {
    height: 0;
    overflow: hidden;
    padding-bottom: 0;
    transition: height 0.3s ease, padding-bottom 0.3s ease;
}
.spec-wrap .spec-accordion .accordion-content img {width: 100%;}
.spec-wrap .spec-accordion .accordion-header {display: flex; justify-content: space-between; align-items: center; margin-bottom: 30px; width: 100%; cursor: pointer; background: none; border: none; font-size: 20px; font-weight: 600; color: #1a1a1a;}
.spec-wrap .spec-accordion .accordion-item.active .arrow {transform: rotate(180deg);}
.spec-wrap .spec-accordion .accordion-item.active .accordion-content {
    height: auto;
    padding-bottom: 30px;
}

.spec-wrap .spec-box {}

.spec-wrap .spec-box .accordion-item  {padding:30px; padding-bottom: 0px; background-color: #f8f8f8; border-radius: 10px; cursor: pointer;}
.spec-wrap .spec-box .accordion-item + .accordion-item {margin-top:10px;}

/* 구성품 */
.product-components {}
.product-components .component-list {display: flex; align-items: center; flex-wrap: wrap; gap: 10px;}
.product-components .component-list li {width: calc(25% - 7.5px); text-align: center;}
.product-components .component-list li .component-item {display: block; cursor: default;}
.product-components .component-list li .component-item div {background-color: #f8f8f8;display: flex; align-items: center; justify-content: center; padding:10px 0; height: 180px;}
.product-components .component-list li .component-item div img {max-height: 160px; width: auto;}
.product-components .component-list li .component-item p {font-size: 18px; font-weight: 600; color: #1a1a1a; margin:10px 0 20px 0;}

body.modal-open {
  overflow: hidden !important;
  position: fixed;
  width: 100%;
  touch-action: none;
}

/* 제품 비교 */
.compare-page {width: 100%; min-height: 100vh; background: #fff; padding: 100px 50px; margin: 0 auto; box-sizing: border-box;}

@media print {
  .compare-page {page-break-after: always;}
}

.compare-cont {margin-top: 45px;}

.compare-product {display: flex; gap: 7px; list-style: none; padding: 0; margin: 0;}
.compare-product > li {width: 33.3%;}

.compare-product .product-box {display: flex; background-color: #f8f8f8; padding: 15px 15px 15px 5px; align-items: center; border-radius: 8px;}

.compare-product .product-img {max-width: 80px;}
.compare-product .product-img img {width: 60px; height: 60px; object-fit: cover;}

.compare-product .product-info {width: 100%; margin-left: 10px;}

.compare-product .category-txt {font-size: 11.8px; font-weight: 500; color: #4d4d4d; margin: 0;}

.compare-product .pd-name {margin-top: 8px; display: block; color: #1a1a1a; font-size: 14.78px; font-weight: 700;}

.compare-keyword {list-style: none; padding: 0; margin: 10px 0 0 0;}
.compare-keyword li {text-align: center; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,0.1);}
.compare-keyword li em {font-style: normal; display: block; font-size: 13.3px; color: #4d4d4d; font-weight: 400;}
.compare-keyword li span {display: block; margin-top: 6px; color: #1a1a1a; font-size: 14.78px; font-weight: 700;}

.compare-header {display: flex; justify-content: space-between; align-items: center;}
.compare-header-left img {width: 303px;}
.compare-header-left span {margin-top: 10px; display: block; font-weight: 600; color: #004b93; font-size: 20px;}

.compare-header-right {font-size: 18px; color: #808080;}

.compare-bottom {margin-top: 90px; display: flex; justify-content: space-between;}

.manager-info {display: flex; gap: 32px; list-style: none; padding: 0;}
.manager-info li b {font-size: 20px; color: #000; font-weight: 600;}
.manager-info li span {color: #4d4d4d; font-size: 20px; display: inline-block; margin-left: 8px; font-weight: 400;}

.current-page {font-size: 16px; color: #000; font-weight: 500;}