@charset "utf-8";

/* ========== 전체 서브페이지 스타일 (컨텐츠만) ========== */

/* 제품 카드 3열 */
.product-list ul {display:flex; flex-wrap:wrap; gap:24px; margin:0;}
.product-list ul li {width:calc((100% - 48px) / 3); padding:0; margin:0; text-align:left;}
.product-list ul li.none {width:100%; padding:70px 0; text-align:center; color:#767676;}
.product-list ul li a {display:block; border-radius:16px; transition:transform 0.2s ease, box-shadow 0.2s ease; position: relative; }
.product-list ul li a::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border: 1px solid #ddd; border-radius: 16px; }
.product-list ul li a:hover {transform:translateY(-12px); box-shadow:0 12px 20px rgba(0,0,0,0.08);}
.product-list ul li .thumb {position:relative; padding-bottom:71%; overflow:hidden; border-radius:16px 16px 0 0; display: block; }
.product-list ul li .thumb img {position:absolute; top:0; left:0; transform:none; width:100% !important; height:100% !important; max-width:none; max-height:none; object-fit:cover;}
.product-list ul li .thumb .cate {position:absolute; top:16px; left:16px; z-index:1; padding:8px 12px; background:rgba(0,0,0,0.5); border:1px solid rgba(255,255,255,0.1); border-radius:500px; color:#fff; font-size:13px; font-weight:600; line-height:1.23em; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.product-list ul li .info {display:flex; flex-direction:column; gap:8px; padding:24px; background:#fff; border-radius:0 0 16px 16px;}
.product-list ul li .tit {color:#2c2c2c; font-size:var(--font-size20); font-weight:700; line-height:1.7em; letter-spacing:-0.02em;}
.product-list ul li .txt {color:#676767; font-weight:400; line-height:1.5em;}
.product-list ul li a:hover .tit {color:var(--color-primary);}

/* 상세 브레드크럼 */
.product-path {display:flex; align-items:center; gap:8px; padding:80px 0 24px; color:#676767; font-size:14px; font-weight:400; line-height:1.14em;}
.product-path a:hover {color:#2c2c2c;}
.product-path strong {color:#2c2c2c; font-weight:600;}
.product-path .arr {display:inline-block; width:6px; height:6px; border-top:1px solid #a8a8a8; border-right:1px solid #a8a8a8; transform:rotate(45deg);}

/* 상세 요약 */
.product-top {background:#f8f7f5; padding:120px 0;}
.product-summary {display:flex; align-items:center; gap:0; margin:0;}
.product-image {width:50%; margin:0; padding-right:48px;}
.product-image .img {position:relative; padding-bottom:78%; overflow:hidden; border-radius:24px; display: block; }
.product-image .img img {position:absolute; top:0; left:0; transform:none; width:100% !important; height:100% !important; max-width:none; max-height:none; object-fit:cover;}
.product-info {display:flex; flex-direction:column; gap:30px; width:50%; padding:12px 0;}
.product-info .txt-box {display:flex; flex-direction:column; gap:16px;}
.product-info .cate {color:var(--color-primary); font-size:14px; font-weight:500; line-height:1.14em; letter-spacing:0.1em;}
.product-info .tit {padding:0; margin:0; border:0; color:#2c2c2c; font-size:var(--font-size36); font-weight:700; line-height:1.44em; letter-spacing:-0.02em;}
.product-info .txt {color:#505050; font-size:var(--font-size18); font-weight:400; line-height:1.67em;}
.product-spec {display:flex; flex-wrap:wrap; width:100%; background:#fff; border:1px solid #e8e6e3; border-radius:24px;}
.product-spec li {display:flex; flex-direction:column; gap:12px; width:50%; padding:24px;}
.product-spec li:nth-child(odd) {border-right:1px solid #e8e6e3;}
.product-spec li:nth-child(-n+2) {border-bottom:1px solid #e8e6e3;}
.product-spec em {color:var(--color-primary); font-size:14px; font-style:normal; font-weight:500; line-height:1.14em;}
.product-spec p {color:#2c2c2c; font-weight:600; line-height:1.5em;}
.product-btns {display:flex; gap:10px;}

/* 상세 안내 */
.product-detail { border:0; color:#2c2c2c; padding-top: 120px; }
.product-detail .tit {padding:0; margin:0 0 40px; border:0; color:#2c2c2c; font-size:var(--font-size36); font-weight:700; line-height:1.44em; letter-spacing:-0.02em;}

/* 버튼 */
.btn-red,
.btn-primary {display:inline-flex; align-items:center; justify-content:center; padding:16px 30px; background:var(--color-primary); border:1px solid var(--color-primary); border-radius:500px; color:#fff; font-size:var(--font-size18); font-weight:600; line-height:1.56em; letter-spacing:-0.02em;}
.btn-red:hover,
.btn-primary:hover {background:#a01830; border-color:#a01830; color:#fff;}
.btn-line,
.btn-white {display:inline-flex; align-items:center; justify-content:center; padding:16px 30px; background:#fff; border:1px solid #eee; border-radius:500px; color:#676767; font-size:var(--font-size18); font-weight:600; line-height:1.56em; letter-spacing:-0.02em;}
.btn-line:hover,
.btn-white:hover {border-color:#c8c8c8; color:#2c2c2c;}

/* 하단 CTA */
.sub-background {background:#f8f7f5; padding:120px 0;}
.sub-background .sub-bg {position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:64px 15px; overflow:hidden; border-radius:24px; color:#fff; text-align:center;}
.sub-background .sub-bg.bg1 {background:#2c2c2c url("../images/sub/product-bg.jpg") no-repeat center/cover;}
.sub-background .sub-bg.bg2 {background:#2c2c2c url("../images/sub/case-bg.jpg") no-repeat center/cover;}
.sub-background .sub-bg .txt-box {display:flex; flex-direction:column; align-items:center; gap:12px;}
.sub-background .sub-bg h2,
.sub-background .sub-bg h3 {color:#fff; font-size:var(--font-size36); font-weight:700; line-height:1.44em; letter-spacing:-0.02em;}
.sub-background .sub-bg p {color:rgba(255,255,255,0.9); font-size:var(--font-size18); font-weight:500; line-height:1.67em; margin: 12px 0 40px;}
.sub-background .sub-bg .btns {display:flex; gap:10px;}
.sub-background .sub-bg .btn-line,
.sub-background .sub-bg .btn-white {background:rgba(255,255,255,0.1); border-color:rgba(255,255,255,0.1); color:#fff; -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);}
.sub-background .sub-bg .btn-line:hover,
.sub-background .sub-bg .btn-white:hover {background:rgba(255,255,255,0.2); color:#fff;}

/* 상담신청 */
.inquiry-form .tit {margin-bottom:24px; color:#2c2c2c; font-size:var(--font-size28); font-weight:700; line-height:1.5em; letter-spacing:-0.02em;}
.inquiry-form .form-body {display:flex; flex-direction:column; gap:40px; padding:50px 0; border-top:2px solid #2c2c2c; border-bottom:1px solid #eee;}
.inquiry-form .field {display:flex; flex-direction:column; gap:20px; width:100%;}
.inquiry-form .field-row {display:flex; gap:20px;}
.inquiry-form .field-row .field {flex:1 1 0; min-width:0;}
.inquiry-form .lbl {color:#2c2c2c; font-size:var(--font-size18); font-weight:500; line-height:1.67em;}
.inquiry-form .lbl i {color:#970403; font-style:normal; font-weight:500;}
.inquiry-form .opt-list {display:flex; align-items:center; gap:40px; height:60px;}
.inquiry-form .radiobox {display:inline-flex; align-items:center; margin:0;}
.inquiry-form .radiobox label {display:inline-flex; align-items:center; color:#676767; font-weight:500; line-height:1.5em;}
.inquiry-form .radiobox label:before {display:block; width:18px; height:18px; margin:0 6px 0 0; background:#fff; border:1px solid #ddd; border-radius:50%; box-shadow:none;}
.inquiry-form .radiobox input:checked + label:before {background:#970403; background-image:none; border-color:#970403; box-shadow:inset 0 0 0 4px #fff;}
.inquiry-form .radiobox input:focus + label:before {outline:none;}
.inquiry-form .input {width:100%; height:60px; padding:0 20px; color:#2c2c2c; border:1px solid #dfdfdf; border-radius:8px; background:#fff;}
.inquiry-form .input[readonly] {background:#fff; color:#2c2c2c;}
.inquiry-form textarea.input {height:240px; padding:18px 20px; resize:none;}
.inquiry-form .zip-row {display:flex; gap:6px;}
.inquiry-form .btn-zip {flex-shrink:0; height:60px; padding:0 20px; background:#121212; border:0; border-radius:8px; color:#fff; font-weight:600; line-height:1.5em;}
.inquiry-form .zip-row .input {width:240px;}
/* 보안문자 이미지는 module/board/captcha.php 가 만드는 220x74 이다.
   130x60 박스에 object-fit:cover 로 넣던 탓에 비율(2.86 vs 2.17)이 안 맞아 좌우가 잘려
   글자를 읽을 수 없었다. 원본 비율 그대로 보여준다(width:auto). 자르지 말 것. */
.inquiry-form .captcha-wrap {display:flex; gap:8px; height:70px;}
.inquiry-form .captcha-wrap img {width:auto; height:70px; border-radius:8px;}
.inquiry-form .captcha-wrap .input {width:240px; height:70px;}
.inquiry-form .form-foot {display:flex; flex-direction:column; align-items:center; gap:24px; padding-top:50px;}
.inquiry-form .agree {display:flex; align-items:center; justify-content:center; gap:8px;}
.inquiry-form .agree .checkbox {margin:0;}
.inquiry-form .agree .checkbox label {color:#2c2c2c; font-weight:500; line-height:1.5em;}
.inquiry-form .agree .checkbox label:before {margin:0 8px 0 0; background-color:#fff; border-color:#ddd;}
/* 체크 상태 — 이 두 줄이 없으면 체크해도 모양이 안 바뀐다.
   위 줄이 reset.css 의 `.checkbox input:checked + label:before`(우선순위 0,2,3)보다
   높은 우선순위(0,3,2)라 체크 표시를 덮어버리기 때문. `background` 단축속성을 쓰면
   background-image 까지 날려 체크 아이콘 자체가 사라지므로 background-color 로 쓴다.
   아이콘(background-image)은 reset.css / responsive.css(x2) 가 계속 담당한다. */
.inquiry-form .agree .checkbox input:checked + label:before {background-color:var(--color-primary); border-color:var(--color-primary);}
.inquiry-form .agree .pop_privacy {color:#878787; font-weight:500; line-height:1.5em; text-decoration:underline; text-underline-position:under;}