/* ============================================================
   시공사례 목록 (cases.html) / 상세 (case-detail.html) / 문의하기 (contact.html)
   sub.css 와 함께 로드 — 헤더·푸터·배너·풀블리드 인프라는 sub.css 사용
   ============================================================ */

/* ===== 시공사례 목록 ===== */
.case-filter {
  position: absolute;
  left: 105px; top: 1328px;
  display: flex;
  gap: 20px;
}
.case-filter a {
  width: 205px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--gray);
  border-radius: 100px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: var(--black);
  white-space: nowrap;
  text-decoration: none;
  transition: color .2s, border-color .2s, background .2s;
}
.case-filter a:hover { border-color: #26b4e4; color: #26b4e4; }
.case-filter a.active {
  background: #26b4e4;
  border-color: #26b4e4;
  color: #fff;
  font-weight: 500;
}
.case-filter a.active:hover { color: #fff; }

.case-card {
  position: absolute;
  width: 554px; height: 580px;
  border: 1px solid #dcdcdc;
  border-radius: 35px;
  overflow: hidden;
  background: #fff;
  text-decoration: none;
  display: block;
  transition: transform .3s ease, box-shadow .3s ease;
}
.case-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
}
.case-card .cc-img {
  position: absolute;
  left: 0; top: 0;
  width: 554px; height: 360px;
  overflow: hidden;
}
.case-card .cc-img img { width: 100%; height: 100%; object-fit: cover; }
.case-card .cc-title {
  position: absolute;
  left: 47px; top: 394px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 35px;
  color: var(--black);
  white-space: nowrap;
}
.case-card .cc-meta {
  position: absolute;
  left: 47px; top: 446px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 25px;
  color: var(--gray);
}
.case-card .cc-tag {
  position: absolute;
  left: 47px; top: 501px;
  background: #ececec;
  border-radius: 100px;
  padding: 8px 20px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 17px;
  color: #a8a8a8;
  white-space: nowrap;
}

.case-page {
  position: absolute;
  left: 0; top: 2900px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 45px;
}
.case-page a {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: #c5c5c5;
  text-decoration: none;
}
.case-page a.active { color: var(--black); }
.case-page .pg-arrow {
  font-size: 34px;
  color: var(--black);
  font-weight: 400;
  line-height: 1;
}

/* ===== 시공사례 상세 ===== */
.cd-bc {
  position: absolute;
  left: 135px; top: 1574px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 25px;
  color: var(--gray);
  white-space: nowrap;
}
.cd-photo {
  position: absolute;
  left: 105px; top: 1649px;
  width: 1710px; height: 650px;
  border-radius: 35px;
  overflow: hidden;
}
.cd-photo img { width: 100%; height: 100%; object-fit: cover; }
.cd-title {
  position: absolute;
  left: 105px; top: 2388px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 70px;
  color: var(--black);
  white-space: nowrap;
}
.cd-tags {
  position: absolute;
  right: 171px; top: 2405px;
  display: flex;
  gap: 20px;
}
.cd-tags span {
  background: #ececec;
  border-radius: 100px;
  padding: 9px 21px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 35px;
  color: #a8a8a8;
  white-space: nowrap;
}
.cd-table {
  position: absolute;
  left: 171px; top: 2550px;
  width: 1578px;
  border-top: 1px solid #3b3b3b;
}
.cd-row {
  display: flex;
  align-items: center;
  height: 130px;
  border-bottom: 1px solid #e6e6e6;
}
.cd-row:last-child { border-bottom: 1px solid #3b3b3b; }
.cd-row .lbl {
  width: 646px;
  padding-left: 104px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  font-size: 50px;
  color: var(--black);
}
.cd-row .val {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 45px;
  color: var(--gray);
}
.cd-gallery { position: absolute; left: 104px; top: 3400px; }
.cd-gallery .cd-thumb {
  position: absolute;
  width: 410px; height: 410px;
  border: .5px solid #eaeaea;
  border-radius: 35px;
  overflow: hidden;
}
.cd-gallery .cd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cd-desc {
  position: absolute;
  left: 105px; top: 4384px;
  width: 1710px;
  min-height: 360px;
  background: #f3f3f3;
  border-radius: 35px;
  padding: 80px 108px;
  box-sizing: border-box;
  font-family: 'Pretendard', sans-serif;
  font-weight: 500;
  font-size: 35px;
  line-height: 55px;
  color: #848484;
}
.cd-desc p { margin: 0 0 18px; }
.cd-desc p:last-child { margin-bottom: 0; }
.cd-desc img { max-width: 100%; height: auto; border-radius: 20px; }

/* ===== 문의하기 ===== */
.inq-label {
  position: absolute;
  left: 113px; top: 1372px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 35px;
  color: #26b4e4;
}
.inq-head {
  position: absolute;
  left: 104px; top: 1433px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 80px;
  letter-spacing: -2.4px;
  color: var(--black);
}
.inq-req {
  position: absolute;
  left: 420px; top: 1500px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 25px;
  color: var(--gray);
}
.inq-req b { color: #26b4e4; font-weight: 400; }

.inq-flabel {
  position: absolute;
  font-family: 'Pretendard', sans-serif;
  font-weight: 600;
  font-size: 50px;
  color: var(--black);
  white-space: nowrap;
}
.inq-flabel .req { color: #26b4e4; font-weight: 400; margin-left: 10px; }
.inq-input {
  position: absolute;
  height: 100px;
  background: #f3f3f3;
  border: none;
  border-radius: 20px;
  padding: 0 29px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: var(--black);
  outline: none;
}
.inq-input::placeholder { color: var(--gray); }
.inq-textarea {
  position: absolute;
  left: 105px; top: 2187px;
  width: 1710px; height: 400px;
  background: #f3f3f3;
  border: none;
  border-radius: 20px;
  padding: 32px 29px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 30px;
  line-height: 42px;
  color: var(--black);
  resize: none;
  outline: none;
}
.inq-textarea::placeholder { color: var(--gray); }

.inq-type {
  position: absolute;
  left: 105px; top: 1956px;
  display: flex;
  gap: 20px;
}
.inq-type button {
  width: 185px; height: 65px;
  border: 1px solid #c2c2c2;
  border-radius: 100px;
  background: #fff;
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 30px;
  color: var(--black);
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.inq-type button:hover { border-color: #26b4e4; color: #26b4e4; }
.inq-type button.active {
  background: #26b4e4;
  border-color: #26b4e4;
  color: #fff;
  font-weight: 500;
}
.inq-type button.active:hover { color: #fff; }

.inq-agree {
  position: absolute;
  left: 125px; top: 2617px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.inq-agree input {
  width: 35px; height: 35px;
  border: 1px solid var(--black);
  border-radius: 5px;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
}
.inq-agree input:checked {
  background: #26b4e4;
  border-color: #26b4e4;
}
.inq-agree input:checked::after {
  content: '';
  position: absolute;
  left: 11px; top: 4px;
  width: 8px; height: 16px;
  border: solid #fff;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}
.inq-agree label {
  font-family: 'Pretendard', sans-serif;
  font-weight: 400;
  font-size: 25px;
  color: var(--black);
  cursor: pointer;
}
.inq-submit {
  position: absolute;
  left: 685px; top: 2802px;
  width: 550px; height: 130px;
  border: none;
  border-radius: 95px;
  background: #26b4e4;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 55px;
  letter-spacing: -1.65px;
  color: #fff;
  cursor: pointer;
  transition: background .3s, transform .3s;
}
.inq-submit:hover {
  background: linear-gradient(135deg, #029edd, #abeca9);
  transform: translateY(-3px);
}

.inq-card {
  position: absolute;
  left: 105px; top: 3092px;
  width: 1710px; height: 710px;
  border-radius: 35px;
  overflow: hidden;
  background: #222;
}
.inq-card > img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.inq-card .ov {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}
.inq-card .ic-head {
  position: absolute;
  left: 108px; top: 89px;
  font-family: 'Pretendard', sans-serif;
  font-weight: 800;
  font-size: 55px;
  line-height: 70px;
  color: #fff;
}
.inq-card .ic-item {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 29px;
}
.inq-card .ic-box {
  width: 80px; height: 80px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.inq-card .ic-box svg { width: 40px; height: 40px; }
.inq-card .ic-t {
  font-family: 'Pretendard', sans-serif;
  font-weight: 700;
  font-size: 25px;
  color: #fff;
  margin-bottom: 3px;
}
.inq-card .ic-v {
  font-family: 'Pretendard', sans-serif;
  font-weight: 300;
  font-size: 30px;
  color: #fff;
}
.inq-card .ic-v small { font-size: 23px; margin-left: 8px; }