@charset "utf-8";

/* 상품 상세페이지 */
.product-summary { height: 704px; background: #fafafa; border-bottom: 1px solid #eee; padding-top: 20px; margin-bottom: 80px; }
.product-summary .contain { display: flex; align-items: flex-start; gap: 20px; padding-left: 290px; }
.product-summary .contain::after { content: none;}
.product-image { width: calc(52% - 10px); }
.product-image .thumb { position: relative; padding-bottom: 75%; display: block; overflow: hidden; border-radius: 16px;}
.product-image .thumb img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; }
.pd-board-swiper { width: 100%; margin-bottom: 20px; }
.pd-thumb-swiper { width: 100%; }
.pd-thumb-swiper .swiper-slide { cursor: pointer;}
.pd-navigation { position: absolute; right: 20px; bottom: 20px; display: flex; gap: 8px; }
.pd-prev::after, .pd-next::after { display: none; }
.pd-prev, .pd-next { width: 56px; height: 56px; border-radius: 56px; background-color: rgba(0,0,0,0.4); backdrop-filter: blur(12px); background-repeat: no-repeat; background-position: center; background-size: 9px; transition: .3s; position: relative; top: auto; margin-top: 0; }
.pd-prev { background-image: url(../images/main/main-prev-w.png); left: auto;}
.pd-prev:hover { backdrop-filter: blur(0); background-color: var(--color-primary);}
.pd-next { background-image: url(../images/main/main-next-w.png); right: auto; left: auto;}
.pd-next:hover { backdrop-filter: blur(0); background-color: var(--color-primary);}
.product-info { width: calc(48% - 10px); background: #fff; padding: 25px 40px; border-radius: 16px; border: 1px solid #eee;}
.product-info .num { font-size: var(--font-size18); font-weight: 600; line-height: 1.77em; color: var(--color-primary); }
.product-info .tit { font-size: var(--font-size26); font-weight: 600; line-height: 1.53em; color: #2c2c2c; padding: 4px 0 15px; border-bottom: 1px solid #eee;}
.product-info ul { padding: 11px 0; border-bottom: 1px solid #eee;}
.product-info ul li { padding: 8px 0; display: flex; font-size: 16px; line-height: 1.77em; }
.product-info ul li.yellow { color: #E9AF22; font-weight: 600;}
.product-info ul li.red { color: #bc1d1d; font-weight: 600;}
.product-info ul li.blue { color: #125C98; font-weight: 600;}
.product-info ul li .tt { width: 124px; font-weight: 600; }
.product-info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; }
.product-info ul li .txt span { display: inline-block; padding-right: 20px; position: relative; }
.product-info ul li .txt span::after { content: ""; position: absolute; right: 9px; width: 1px; height: 12px; background: #ddd; top:8px; }
.product-info ul li .txt span:last-child { padding-right: 0; }
.product-info ul li .txt span:last-child::after { display: none; }
.product-info .btns { display: flex; margin-top: 23px; gap: 8px; }
.product-info .btns a { width: calc(100%/2 - 4px); height: 48px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 32px; font-size: var(--font-size18); font-weight: 600; line-height: 1em; }
.product-info .btns a.list-btn { background: #2c2c2c; }
.product-info .btns a.contact-btn { background: var(--color-primary); }
.detail-tab {text-align:center; margin:80px 0 40px; display: flex; }
.detail-tab li {flex:1; height:64px; border:1px solid var(--color-primary); border-right:0; border-bottom:1px solid var(--color-primary); border-top: none; border-left: none; }
.detail-tab li a {display:flex; align-items:center; justify-content:center; height:100%; color:#9999; font-size:var(--font-size18); font-weight:600; line-height:1.3em;}
.detail-tab li.active {border:1px solid var(--color-primary); border-bottom:1px solid #fff; background:#fff; border-radius: 24px 24px 0 0;}
.detail-tab li.active a { color: var(--color-primary); }
.detail-tab li.active + li {border-left:none;}
.detail-cnt-wrap { margin-bottom: 60px;}
[data-tab-content] { display: none; }
[data-tab-content].active { display: block; }
.detail-btns { display: flex; gap: 8px; justify-content: center;}
.detail-btns a { width: 190px; height: 80px; display: flex; align-items: center; justify-content: center; color: #fff; border-radius: 40px; font-size: var(--font-size18); font-weight: 600; line-height: 1em; }
.detail-btns a.list-btn { background: #2c2c2c; }
.detail-btns a.contact-btn { background: var(--color-primary); }

/* 상세 검색 */
.sub2-form { padding: 32px; background: #fff; border-radius: 24px; box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.16); margin-top: 30px; }
.sub2-form .wrap { display: flex; flex-wrap: wrap; gap: 16px 42px; margin-bottom: 30px; }
.sub2-form .wrap dl { width: calc(100%/2 - 21px); display: flex; align-items: center; }
.sub2-form .wrap dl dt { width: 73px; font-size: var(--font-size20); font-weight: 600; color: #2c2c2c; line-height: 1em; }
.sub2-form .wrap dl dd { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; gap: 8px; }
.sub2-form .wrap dl dd .input { flex: 1; border-radius: 8px; height: 48px; }
.sub2-form .btn { width: 100%; height: 82px; border-radius: 16px; background: var(--color-primary); color: #fff; line-height: 1em; display: flex; align-items: center; justify-content: center; font-size: var(--font-size20); font-weight: 600; border: none; cursor: pointer; }
.search-wrap .group { margin-bottom: 80px; }
.search-wrap .group:last-child { margin-bottom: 0; }
.premium-swiper .item a { display: block; }
.premium-swiper .item a:hover .product-thumb .abbox::before { opacity: 1; }
.premium-swiper .item a:hover .product-thumb .abbox .view { opacity: 1; }

/* 폼 공통 */
.ct-form { display: flex; flex-wrap: wrap; padding: 40px 0; border-top: 2px solid #686868; border-bottom: 1px solid #ddd; gap: 40px 80px; }
.ct-form dl { display: flex; align-items: center; width: calc(100%/2 - 40px); }
.ct-form dl.w100 { width: 100%; }
.ct-form dl dt { width: 200px; line-height: 1.5em; font-size: var(--font-size18); font-weight: 600; color: #2c2c2c; }
.ct-form dl dt .required { color: var(--color-primary); }
.ct-form dl dd { flex: 1 1 auto; min-width: 0; width: 1%; }
.ct-form dl dd .input { width: 100%; border-radius: 8px; height: 48px; }
.ct-form .sel-fx { display: flex; gap: 8px; flex-wrap: wrap;}
.ct-form .item-fx { display: flex; gap: 10px 40px; flex-wrap: wrap; padding: 15px 0;}

/* 오시는 길 */
.map { border-radius: 16px; overflow: hidden; margin-bottom: 40px; }
.lct { display: flex; flex-wrap: wrap; gap: 24px; }
.lct .group { width: calc(100%/3 - 16px); border-radius: 16px; padding: 40px 10px 35px; background: #f9f9f9; text-align: center; }
.lct .group .tit { display: inline-block; font-size: var(--font-size18); line-height: 1.77em; font-weight: 700; color: #fff; padding: 8px 24px; margin-bottom: 24px; background: var(--color-primary); border-radius: 25px; }
.lct .group .txt { font-size: var(--font-size20); line-height: 1.7em; font-weight: 400;}

/* 정렬 필터 버튼 - 2026.04.20 추가 */
.main-sort-wrap { display: flex; align-items: center; gap: 6px; }
.main-sort-wrap .sort-btn { font-size: var(--font-size14); font-weight: 400; color: #999; line-height: 1.5em; transition: color 0.2s; }
.main-sort-wrap .sort-btn:hover { color: #333; }
.main-sort-wrap .sort-btn.active { font-weight: 700; color: #222; }
.main-sort-wrap .sort-divider { color: #ddd; font-size: var(--font-size14); }

/* sec4 오른쪽 컬럼 래퍼 - 2026.04.20 추가 */
.sec4-right { flex: 1 1 auto; min-width: 0; width: 1%; display: flex; flex-direction: column; gap: 12px; }
.sec4-right .sec4-sort-wrap { justify-content: flex-end; margin-top: 6px; }
.sec4-right .sec4-info { width: 100%; }

/* 상세페이지 그래프 */
.pd-graph { margin-bottom: 100px; }
.pd-graph-notice { background:var(--color-primary); color:#fff; text-align:left; padding: 30px; line-height:1.6em; margin-bottom:60px; border-radius:6px; }
.pd-graph-notice h3 { font-weight: 600; font-size: var(--font-size20); line-height: 1.4em; margin-bottom: 8px; }
.pd-graph-notice p { font-size: 16px; }
.pd-graph .main-tit { margin-bottom: 30px; }
.pd-graph-wrap { display:flex; gap:40px; }
.pd-graph-box { flex:1; }
.pd-graph-box .gp-tbl-wrap { overflow: auto;}
.pd-graph-box .gp-tbl { width: 100%; border-collapse: collapse; border-top: 2px solid #2c2c2c;}
.pd-graph-box .gp-tbl tr { border-bottom: 1px solid #ddd;}
.pd-graph-box .gp-tbl tr th { text-align: center; padding: 15px 25px; background: #fafafa; font-size: var(--font-size18); font-weight: 600; line-height: 1.66em; color: #2c2c2c; }
.pd-graph-box .gp-tbl tr th.highlight { color: #bc1d1d; font-weight: 700; }
.pd-graph-box .gp-tbl tr td { padding: 15px 25px; font-size: var(--font-size18); font-weight: 400; line-height: 1.66em; height: 102px;  }
.pd-graph-box .gp-tbl tr td.highlight { color: #bc1d1d; font-weight: 700; }
.pd-graph-box .gp-tbl tr td.note { background: var(--color-primary); color: #fff; text-align: center; font-weight: 600; }
.pd-chart { padding: 30px; border: 1px solid #ddd; border-radius: 15px; }
.pd-chart .item { margin-bottom: 20px; }
.pd-chart .item:last-child { margin-bottom: 0; }
.pd-chart .item h3 { color: #2c2c2c; font-weight: 600; line-height: 1.6em; font-size: var(--font-size18); margin-bottom: 5px; display: flex; justify-content: space-between; align-items: center;}
.pd-chart .item h3 span { color: var(--color-primary);}
.pd-chart .item .bar-wrap { display: flex; align-items: center; gap: 10px; }
.pd-chart .item .bar { height: 40px; border-radius: 5px; position: relative; color: #fff; display: flex; align-items: center;justify-content: flex-end; font-weight: 600; font-size: var(--font-size18); }
.pd-chart .item .percent { font-size: var(--font-size16); font-weight: 400; line-height: 1.6em; color: #999; }
.pd-chart .item .bar.color1 { background: #e53e3e; }
.pd-chart .item .bar.color2 { background: #d4a017; }
.pd-chart .item .bar.color3 { background: #38a169; }
.pd-chart .item .bar.color4 { background: #3182ce; }
.pd-chart .item .bar.color5 { background: #805ad5; }
/* .pd-table { width:100%; border-collapse:collapse; font-size:15px; }
.pd-table thead th { background:#4a4a4a; color:#fff; padding:12px 16px; text-align:left; font-size:16px; font-weight:600; }
.pd-table tbody tr { border-bottom:1px solid #eee; }
.pd-table tbody td { padding:11px 16px; color:#333; }
.pd-table .tt { color:#555; font-weight:500; }
.pd-table tr.highlight { color:#bc1d1d; font-weight:700; }
.pd-table tr.note td { font-size:13px; color:#888; padding-top:6px; border-bottom:none; }
.pd-chart-table .tt { width:90px; }
.pd-chart-table .amount { width:70px; color:#333; }
.pd-chart-table .bar { padding-right:10px; }
.pd-chart-table .bar span { display:block; height:22px; border-radius:4px; min-width:4px; }
.pd-chart-table .pct { width:50px; text-align:right; color:#555; font-size:14px; white-space:nowrap; } */