@charset "utf-8";

/* 캡스홈 단독주택 PDP 레이아웃 (필드 1~4 통합본) */

/* ==================== 필드 1 : .prd-service-intro (parts/capshome-house-1.html) ==================== */
/* ========== capshome-common.css ========== */
.prd-service-intro .capshome-blind {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ========== reveal.css ==========
   스크롤 등장 효과. JS 가 대상에 .is-reveal-pending 을 붙인 뒤에만 숨기므로
   JS 가 없거나 모션 줄이기를 켠 경우에는 처음부터 보입니다.
   from 만 두어 끝 값은 각 요소의 원래 opacity 를 따르고, transform 대신 translate 를 써서 기존 transform 과 겹치지 않습니다. */
.prd-service-intro .is-reveal-pending {
  opacity: 0 !important;
}

.prd-service-intro .is-revealed {
  animation: capshome-reveal-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s) both;
}

@keyframes capshome-reveal-up {
  from {
    opacity: 0;
    translate: 0 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prd-service-intro .is-reveal-pending {
    opacity: 1 !important;
  }

  .prd-service-intro .is-revealed {
    animation: none;
  }
}

.prd-service-intro .capshome-visual br.mo,
.prd-service-intro .capshome-intro br.mo,
.prd-service-intro .capshome-points br.mo {
  display: none;
}

.prd-service-intro .capshome-visual br.pc,
.prd-service-intro .capshome-intro br.pc,
.prd-service-intro .capshome-points br.pc {
  display: inline;
}

@media (max-width: 1023px) {
  .prd-service-intro .capshome-visual br.mo,
  .prd-service-intro .capshome-intro br.mo,
  .prd-service-intro .capshome-points br.mo {
    display: inline;
  }

  .prd-service-intro .capshome-visual br.pc,
  .prd-service-intro .capshome-intro br.pc,
  .prd-service-intro .capshome-points br.pc {
    display: none;
  }
}

.prd-service-intro .capshome-intro,
.prd-service-intro .capshome-points {
  --prd-black: #000000;
  --prd-gray-20: #1d1d1d;
  --prd-gray-40: #404040;
  --prd-gray-70: #555555;
  --prd-gray-80: #707070; /* 명도 대비 4.5:1 (시안 #717171) */
  --prd-gray-90: #6e6e6e; /* 명도 대비 4.5:1 (시안 #8e8e8e) */
  --prd-gray-line: #d8d8d8;
  --prd-gray-bg: #f5f5f5;
  --prd-white: #ffffff;
  --prd-blue: #025afc;
  --prd-blue-dark: #0041cc;
  --prd-blue-pale: rgba(204, 220, 255, 0.4);
  --prd-navy: #003594;
  --prd-line: #ccdcff;
  --prd-dim: rgba(204, 220, 255, 0.3);
}
/* ─────────────────────────────────────────────
 섹션 제목·본문 공통 (여백만 섹션에서 덮어씁니다)
 ───────────────────────────────────────────── */

.prd-service-intro .capshome-intro .tit,
.prd-service-intro .capshome-points .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}

.prd-service-intro .capshome-intro .txt,
.prd-service-intro .capshome-points .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}

/* ========== visual.css ========== */
.prd-service-intro .capshome-visual {
  --prd-black: #000000;
  --prd-gray-40: #404040;
  --prd-gray-70: #555555;
  --prd-white: #ffffff;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 912;
  background: #efefef;
}

.prd-service-intro .capshome-visual .visual {
  position: absolute;
  inset: 0;
  isolation: isolate;
}

.prd-service-intro .capshome-visual picture {
  position: absolute;
  inset: 0;
}

.prd-service-intro .capshome-visual .visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

.prd-service-intro .capshome-visual .visual-dim {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: min(916px, 47.71%);
  height: 100%;
  pointer-events: none;
}

.prd-service-intro .capshome-visual .visual-dim-soft {
  background: radial-gradient(100% 101% at 0% 50%, #000 0%, rgba(0, 0, 0, 0) 100%);
  mix-blend-mode: soft-light;
}

.prd-service-intro .capshome-visual .visual-dim-shade {
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0) 100%);
}

.prd-service-intro .capshome-visual .txt-wrap {
  position: absolute;
  left: 240px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
}

.prd-service-intro .capshome-visual .txt-wrap .tit {
  color: var(--prd-white);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

.prd-service-intro .capshome-visual .txt-wrap .tit span {
  display: inline-block;
}

.prd-service-intro .capshome-visual .txt-wrap .txt {
  margin-top: 12px;
  color: var(--prd-white);
  font-weight: 500;
  font-size: 24px;
  line-height: 1.5;
  letter-spacing: -0.24px;
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}

.prd-service-intro .capshome-visual .visual-caption {
  position: absolute;
  right: 60px;
  bottom: 40px;
  z-index: 2;
  color: var(--prd-white);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  text-align: right;
  letter-spacing: -0.16px;
  opacity: 0.6;
}

.prd-service-intro .capshome-visual .mo {
  display: none;
}

/* 첫 화면 문구 등장. JS 가 .is-visual-pending 으로 숨겨 두었다가 화면에 들어오면 .is-visual-in 으로 바꿔 재생합니다.
   JS 가 돌지 않으면 두 클래스가 모두 없어 문구가 그대로 보입니다.
   to 를 비워 두어 끝 값은 각 요소의 원래 값(opacity 1 등)을 따릅니다. */
.prd-service-intro .capshome-visual.is-visual-pending .txt-wrap .tit span,
.prd-service-intro .capshome-visual.is-visual-pending .txt-wrap .txt {
  opacity: 0;
}

.prd-service-intro .capshome-visual.is-visual-in .txt-wrap .tit span {
  animation: capshome-visual-tit-in 1s 0.2s both;
}

.prd-service-intro .capshome-visual.is-visual-in .txt-wrap .txt {
  animation: capshome-visual-txt-in 1s 0.2s both;
}

@keyframes capshome-visual-tit-in {
  from {
    opacity: 0;
    transform: translateY(50%);
  }
}

@keyframes capshome-visual-txt-in {
  from {
    opacity: 0;
    transform: translateY(-50%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prd-service-intro .capshome-visual.is-visual-pending .txt-wrap .tit span,
  .prd-service-intro .capshome-visual.is-visual-pending .txt-wrap .txt {
    opacity: 1;
  }

  .prd-service-intro .capshome-visual.is-visual-in .txt-wrap .tit span,
  .prd-service-intro .capshome-visual.is-visual-in .txt-wrap .txt {
    animation: none;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-service-intro .capshome-visual .txt-wrap {
    left: 40px;
  }
}

@media (max-width: 1023px) {
  /* 모바일 시안(375x724)은 전용 이미지 한 장을 그대로 씁니다.
   PC 처럼 딤을 얹지 않아도 사진 위쪽이 충분히 어둡습니다. */
  .prd-service-intro .capshome-visual {
    height: auto;
    aspect-ratio: 375 / 724;
  }

  .prd-service-intro .capshome-visual .visual-img {
    object-position: center;
  }

  .prd-service-intro .capshome-visual .visual-dim {
    display: none;
  }

  /* 시안: left 20 / top 72 / width 335 / 좌측 정렬 */
  .prd-service-intro .capshome-visual .txt-wrap {
    left: 20px;
    right: 20px;
    top: 9.94%;
    transform: none;
  }

  /* 시안: right 20 / bottom 16 / 11px */
  .prd-service-intro .capshome-visual .visual-caption {
    right: 20px;
    bottom: 16px;
    font-size: 11px;
    line-height: 1.27;
    letter-spacing: -0.22px;
  }

  .prd-service-intro .capshome-visual .mo {
    display: inline;
  }

  .prd-service-intro .capshome-visual .txt-wrap .tit {
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: -0.26px;
    word-break: keep-all;
    text-shadow: none;
  }

  /* 시안은 흰색 80% 입니다. opacity 는 등장 애니메이션(0 → 1)이 쓰므로
     여기서 opacity 를 주면 시작값 0 을 덮어 처음부터 보입니다. 색으로 줍니다. */
  .prd-service-intro .capshome-visual .txt-wrap .txt {
    margin-top: 6px;
    color: rgba(255, 255, 255, 0.8);
    font-weight: 400;
    font-size: 16px;
    line-height: 1.45;
    letter-spacing: -0.16px;
    text-shadow: none;
    word-break: keep-all;
  }
}

/* ========== capshome-intro.css ========== */
/* 배지 → 연결선 → 타이틀은 문서 흐름으로 쌓고,
 하단 이미지 3분할(970px)은 섹션 아래쪽에 절대배치로 깔립니다.
 이미지 윗면은 마스크로 배경 그라디언트에 녹여 타이틀 뒤가 비치지 않게 합니다. */
.prd-service-intro .capshome-intro {
  overflow: hidden;
  position: relative;
  width: 100%;
  padding: 140px 0 706px;
  background: linear-gradient(180deg, #092049 0%, var(--prd-navy) 100%);
}

.prd-service-intro .capshome-intro .intro-badge {
  width: 372px;
  margin: 0 auto;
  padding: 24px;
  color: var(--prd-white);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  text-align: center;
  letter-spacing: -0.2px;
  border-radius: 12px 12px 12px 0;
  background: rgba(255, 255, 255, 0.2);
}

.prd-service-intro .capshome-intro .intro-line {
  display: block;
  width: 92px;
  height: 209px;
  margin: 38px auto 0;
}

.prd-service-intro .capshome-intro .tit-wrap {
  position: relative;
  z-index: 1;
  margin-top: 36px;
  padding: 0 40px;
  text-align: center;
}

.prd-service-intro .capshome-intro .tit {
  color: var(--prd-white);
}

.prd-service-intro .capshome-intro .txt {
  margin-top: 12px;
  color: var(--prd-white);
}

.prd-service-intro .capshome-intro .intro-list {
  display: flex;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 970px;
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.93%, #000 50%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 25.93%, #000 50%);
}

/* 캡션이 읽히도록 이미지 하단을 어둡게 깔아 줍니다. */
.prd-service-intro .capshome-intro .intro-list::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 264px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.4) 100%);
}

.prd-service-intro .capshome-intro .intro-item {
  overflow: hidden;
  position: relative;
  flex: 1;
}

.prd-service-intro .capshome-intro .intro-img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}

/* 1번 이미지는 원본이 작아 cover 로 맞추면 시안보다 위쪽이 더 보입니다.
 시안대로 원본 크기(736x1104)를 왼쪽 아래에 붙여 씁니다. */
.prd-service-intro .capshome-intro .intro-item-1 .intro-img {
  width: 115%;
  height: 113.81%;
}

.prd-service-intro .capshome-intro .intro-item-2 .intro-img {
  object-position: 62.3% center;
}

.prd-service-intro .capshome-intro .intro-item-3 .intro-img {
  object-position: 7.9% center;
}

.prd-service-intro .capshome-intro .intro-txt-wrap {
  position: absolute;
  left: 50%;
  bottom: 100px;
  z-index: 1;
  width: 270px;
  text-align: center;
  transform: translateX(-50%);
}

.prd-service-intro .capshome-intro .intro-tit {
  display: block;
  color: var(--prd-white);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
}

.prd-service-intro .capshome-intro .intro-txt {
  margin-top: 12px;
  color: var(--prd-white);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

/* 1024~1919: 폭만 줄고 높이가 970px 고정이면 칸이 세로로 길쭉해져
 cover 가 좌우를 잘라 내 카메라 같은 피사체가 밖으로 밀려납니다.
 시안 비율(1920x970)로 묶어 통째로 줄이고, 이미지 몫으로 비워 둔 섹션 하단 여백(706)과
 캡션 위치도 같은 비율로 맞춥니다. (padding % 는 폭 기준이라 706/1920 을 그대로 씁니다) */
@media (min-width: 1024px) and (max-width: 1919px) {
  .prd-service-intro .capshome-intro {
    padding-bottom: 36.77%;
  }

  .prd-service-intro .capshome-intro .intro-list {
    height: auto;
    aspect-ratio: 1920 / 970;
  }

  .prd-service-intro .capshome-intro .intro-list::after {
    height: 27.22%;
  }

  .prd-service-intro .capshome-intro .intro-txt-wrap {
    bottom: 10.31%;
  }
}

@media (max-width: 1023px) {
  /* 모바일 시안(23:8817, 375x1137.5) 기준.
   PC 는 이미지 3분할 + 마스크지만, 모바일은 375x203 밴드 3개가 세로로 쌓이고
   캡션이 각 밴드 정중앙에 얹힙니다. 밴드 사진은 전용 합성본을 picture 로 받습니다. */
  .prd-service-intro .capshome-intro {
    padding: 72px 0 0;
  }

  .prd-service-intro .capshome-intro .intro-badge {
    width: fit-content;
    max-width: calc(100% - 40px);
    padding: 16px;
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.32px;
    box-shadow: 3px 3px 10px rgba(74, 97, 133, 0.05);
  }

  .prd-service-intro .capshome-intro .intro-line {
    width: 40px;
    height: 91.5px;
    margin-top: 30px;
  }

  .prd-service-intro .capshome-intro .tit-wrap {
    margin-top: 40px;
    padding: 0 20px;
  }

  .prd-service-intro .capshome-intro .tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }

  .prd-service-intro .capshome-intro .txt {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }

  .prd-service-intro .capshome-intro .intro-list {
    display: block;
    position: static;
    height: auto;
    margin-top: 39.5px;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .prd-service-intro .capshome-intro .intro-list::after,
  .prd-service-intro .capshome-intro .intro-item::after {
    content: none;
  }

  /* 밴드 비율 375:203. 딤은 합성본에 이미 들어가 있습니다. */
  .prd-service-intro .capshome-intro .intro-item {
    height: auto;
    aspect-ratio: 375 / 203;
  }

  .prd-service-intro .capshome-intro .intro-item-1 {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .prd-service-intro .capshome-intro .intro-item .intro-img,
  .prd-service-intro .capshome-intro .intro-item-1 .intro-img {
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    object-position: center;
  }

  /* 캡션은 밴드 정중앙 */
  .prd-service-intro .capshome-intro .intro-txt-wrap {
    left: 50%;
    top: 50%;
    bottom: auto;
    width: 335px;
    padding: 0;
    transform: translate(-50%, -50%);
  }

  .prd-service-intro .capshome-intro .intro-tit {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.2px;
  }

  .prd-service-intro .capshome-intro .intro-txt {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
}

/* ========== capshome-points.css ========== */
/* 카드 5장을 좌우로 넘기는 캐러셀입니다.
 트랙은 1440 콘텐츠 왼쪽 끝(1920 기준 240px)에서 시작해 오른쪽 화면 밖으로 흘러갑니다.
 동작은 slider.js 의 _capshome_initSlider 를 그대로 씁니다. */
.prd-service-intro .capshome-points {
  /* 레이아웃 토큰은 이 섹션에서만 쓴다. 전역 선언은 CMS 규칙상 금지라 여기에 둔다. */
  --layout-max: 1920px;
  --layout-width: min(var(--layout-max), 100vw);
  /* 화면 폭에 비례해 카드가 약 3.6장 보이게 줄어들고, 1440 시안 폭(360px)에서 멈춥니다. */
  --card-w: min(360px, calc((var(--layout-width) - 80px) / 3.6));
  overflow: hidden;
  width: 100%;
  padding: 140px 0;
  background: var(--prd-gray-bg);
}

.prd-service-intro .capshome-points .tit-wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
}

.prd-service-intro .capshome-points .txt {
  margin-top: 12px;
}

.prd-service-intro .capshome-points .note {
  margin-top: 8px;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.16px;
}

.prd-service-intro .capshome-points .con {
  position: relative;
  margin-top: 80px;
}

.prd-service-intro .capshome-points .slide-view {
  display: block;
  overflow: hidden;
  z-index: auto;
  isolation: isolate;
  touch-action: pan-y;
  width: var(--layout-width);
  margin-left: calc(50% - var(--layout-width) / 2);
}

/* 트랙 좌우 여백. Swiper 가 총폭에 포함하도록 첫·마지막 슬라이드 마진으로 준다. */
.prd-service-intro .capshome-points .card:first-child {
  margin-left: max(40px, calc((var(--layout-width) - 1440px) / 2));
}

.prd-service-intro .capshome-points .card:last-child {
  margin-right: max(40px, calc((var(--layout-width) - 1440px) / 2));
}

.prd-service-intro .capshome-points .card {
  overflow: hidden;
  position: relative;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: auto;
  aspect-ratio: 360 / 432;
  border-radius: 12px;
  background: #d9d9d9;
}

.prd-service-intro .capshome-points .card-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.prd-service-intro .capshome-points .card-body {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 164px;
  padding: 34px 32px;
}

/* 블러를 판 전체에 균일하게 걸면 윗변에 직선 경계가 그대로 드러납니다.
 같은 크기의 겹을 깔고 마스크로 서서히 진해지게 해 경계를 없앱니다. */
.prd-service-intro .capshome-points .card-body::before {
  content: "";
  position: absolute;
  inset: 0;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 55%);
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 55%);
}

/* 딤 그라디언트는 시안 값 그대로, 블러 위에 덮습니다. */
.prd-service-intro .capshome-points .card-body::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.65) 100%);
}

.prd-service-intro .capshome-points .card-tit {
  position: relative;
  z-index: 1;
  color: var(--prd-white);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}

.prd-service-intro .capshome-points .card-txt {
  position: relative;
  z-index: 1;
  margin-top: 6px;
  color: var(--prd-white);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.prd-service-intro .capshome-points .slide-nav {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  max-width: 1520px;
  margin: 40px auto 0;
  padding: 0 40px;
}

.prd-service-intro .capshome-points .slide-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--prd-black);
  border-radius: 50%;
  background: transparent;
}

.prd-service-intro .capshome-points .slide-btn:disabled {
  border-color: var(--prd-gray-line);
  cursor: default;
  opacity: 0.4;
}

.prd-service-intro .capshome-points .slide-btn img {
  width: 28px;
  height: 28px;
}

/* 모바일 전용 스와이프 진행 바 */
.prd-service-intro .capshome-points .slide-bar {
  display: none;
}

/* 1024~1439: 카드 폭이 화면 따라 줄어드는 만큼 글자·여백도 줄이고,
 글자 영역은 내용 높이만큼 늘어나게 해 카드 밖으로 넘치지 않게 합니다. 1440 이상은 시안 그대로입니다. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-service-intro .capshome-points .card-body {
    height: auto;
    min-height: 38%; /* 시안 164 / 432 */
    padding: clamp(20px, 2.2vw, 34px) clamp(18px, 2.2vw, 32px);
  }

  .prd-service-intro .capshome-points .card-tit {
    font-size: clamp(18px, 1.67vw, 24px);
    word-break: keep-all;
  }

  .prd-service-intro .capshome-points .card-txt {
    font-size: clamp(14px, 1.25vw, 18px);
    line-height: 1.5;
    word-break: keep-all;
  }

  .prd-service-intro .capshome-points .card-txt br {
    display: none;
  }
}

@media (max-width: 1023px) {
  /* 모바일 시안(23:8846, 375x624): 카드 218x262 · 간격 12 · 화살표 대신 스와이프 바 */
  .prd-service-intro .capshome-points {
    /* 375 폰에서 시안 폭(218px)이고, 화면 폭에 비례해 커지다 320px 에서 멈춥니다. */
    --card-w: min(320px, 58.13vw);
    /* 양옆 기본 여백 20px 은 섹션에서 한 번에 줍니다. */
    padding: 72px 20px;
  }

  /* PC 는 좌측 정렬이지만 모바일 시안은 가운데 정렬입니다. */
  .prd-service-intro .capshome-points .tit-wrap {
    padding: 0;
    text-align: center;
  }

  .prd-service-intro .capshome-points .tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }

  .prd-service-intro .capshome-points .txt {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }

  .prd-service-intro .capshome-points .note {
    margin-top: 8px;
    font-size: 13px;
    line-height: 1.4;
    letter-spacing: -0.39px;
  }

  .prd-service-intro .capshome-points .con {
    margin-top: 40px;
  }

  /* PC 는 화면 끝까지 늘리지만, 모바일은 섹션 여백(20px) 안에서 잘리게 합니다. */
  .prd-service-intro .capshome-points .slide-view {
    width: 100%;
    margin-left: 0;
  }

  .prd-service-intro .capshome-points .card:first-child {
    margin-left: 0;
  }

  .prd-service-intro .capshome-points .card:last-child {
    margin-right: 0;
  }

  .prd-service-intro .capshome-points .card {
    aspect-ratio: 218 / 262;
    border-radius: 8px;
  }

  /* 카드가 화면 폭 따라 줄어도 글이 넘치지 않게 높이는 내용만큼 늘어납니다(최소는 시안 114 / 262). */
  .prd-service-intro .capshome-points .card-body {
    height: auto;
    min-height: 43.5%;
    padding: 24px 16px;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.6) 100%);
  }

  .prd-service-intro .capshome-points .card-tit {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  .prd-service-intro .capshome-points .card-txt {
    margin-top: 6px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.42px;
  }

  .prd-service-intro .capshome-points .slide-nav {
    display: none;
  }

  /* 트랙 전체를 N 등분해 현재 칸만 검게 칠합니다. */
  .prd-service-intro .capshome-points .slide-bar {
    overflow: hidden;
    display: block;
    height: 2px;
    margin: 24px 0 0;
    border-radius: 2px;
    background: var(--prd-gray-line);
  }

  .prd-service-intro .capshome-points .slide-bar-fill {
    display: block;
    width: 20%;
    height: 100%;
    background: var(--prd-black);
    transition: transform 0.35s ease;
  }
}

/* ── 태블릿 폭(~1023) 보정 ──
 모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
 비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
 카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
/* 비주얼이 폭 따라 커지는 만큼 문구도 비례해 키웁니다(375 기준값 → 1023 에서 상한). */
.prd-service-intro .capshome-visual .txt-wrap {
  left: clamp(20px, 5.33vw, 40px);
  right: clamp(20px, 5.33vw, 40px);
}

.prd-service-intro .capshome-visual .txt-wrap .tit {
  font-size: clamp(26px, 6.93vw, 38px);
  letter-spacing: -0.01em;
}

.prd-service-intro .capshome-visual .txt-wrap .txt {
  margin-top: clamp(6px, 1.6vw, 10px);
  font-size: clamp(16px, 4.27vw, 22px);
  letter-spacing: -0.01em;
}

/* 시안 375x724 비율 그대로면 1023 에서 1900px 가까이 길어져 900px 에서 멈춥니다(724/375 = 193.07vw). */
.prd-service-intro .capshome-visual {
  height: clamp(724px, 193.07vw, 900px);
  aspect-ratio: auto;
}
}

/* ==================== 필드 2 : .prd-feature-intro (parts/capshome-house-2.html) ==================== */
/* ========== capshome-common.css ========== */
.prd-feature-intro .capshome-blind {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ========== reveal.css ==========
   스크롤 등장 효과. JS 가 대상에 .is-reveal-pending 을 붙인 뒤에만 숨기므로
   JS 가 없거나 모션 줄이기를 켠 경우에는 처음부터 보입니다.
   from 만 두어 끝 값은 각 요소의 원래 opacity 를 따르고, transform 대신 translate 를 써서 기존 transform 과 겹치지 않습니다. */
.prd-feature-intro .is-reveal-pending {
  opacity: 0 !important;
}

.prd-feature-intro .is-revealed {
  animation: capshome-reveal-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s) both;
}

@keyframes capshome-reveal-up {
  from {
    opacity: 0;
    translate: 0 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prd-feature-intro .is-reveal-pending {
    opacity: 1 !important;
  }

  .prd-feature-intro .is-revealed {
    animation: none;
  }
}

.prd-feature-intro .capshome-cctv br.mo,
.prd-feature-intro .capshome-quality br.mo {
  display: none;
}

.prd-feature-intro .capshome-cctv br.pc,
.prd-feature-intro .capshome-quality br.pc {
  display: inline;
}

@media (max-width: 1023px) {
  .prd-feature-intro .capshome-cctv br.mo,
  .prd-feature-intro .capshome-quality br.mo {
    display: inline;
  }

  .prd-feature-intro .capshome-cctv br.pc,
  .prd-feature-intro .capshome-quality br.pc {
    display: none;
  }
}

.prd-feature-intro .capshome-cctv,
.prd-feature-intro .capshome-quality {
  --prd-black: #000000;
  --prd-gray-20: #1d1d1d;
  --prd-gray-40: #404040;
  --prd-gray-70: #555555;
  --prd-gray-80: #707070; /* 명도 대비 4.5:1 (시안 #717171) */
  --prd-gray-90: #6e6e6e; /* 명도 대비 4.5:1 (시안 #8e8e8e) */
  --prd-gray-line: #d8d8d8;
  --prd-gray-bg: #f5f5f5;
  --prd-white: #ffffff;
  --prd-blue: #025afc;
  --prd-blue-dark: #0041cc;
  --prd-blue-pale: rgba(204, 220, 255, 0.4);
  --prd-navy: #003594;
  --prd-line: #ccdcff;
  --prd-dim: rgba(204, 220, 255, 0.3);
}
/* ─────────────────────────────────────────────
 섹션 제목·본문 공통 (여백만 섹션에서 덮어씁니다)
 ───────────────────────────────────────────── */

.prd-feature-intro .capshome-cctv .tit,
.prd-feature-intro .capshome-quality .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}

.prd-feature-intro .capshome-cctv .txt,
.prd-feature-intro .capshome-quality .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}

/* ========== capshome-cctv.css ========== */
/* 라이브 전역 리셋으로 p·ul 여백은 이미 0 이지만 h3·dl·dd 는 확인된 범위가 아니라
 섹션 안에서 직접 눌러 둡니다. (임베드 환경이 바뀌어도 여백이 튀지 않게) */
.prd-feature-intro .capshome-cctv h3,
.prd-feature-intro .capshome-cctv dl,
.prd-feature-intro .capshome-cctv dd {
  margin: 0;
}

/* 왼쪽 아코디언(details/summary)과 오른쪽 조감도가 가로로 겹쳐 놓이는 구성입니다.
 조감도 위의 점·말풍선은 이미지 박스 기준 % 로 찍어 두어 폭이 줄어도 같은 자리에 붙습니다. */
.prd-feature-intro .capshome-cctv {
  overflow: hidden;
  width: 100%;
  padding: 140px 0;
  background: var(--prd-white);
}

.prd-feature-intro .capshome-cctv .tit-wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.prd-feature-intro .capshome-cctv .sub-tit {
  color: var(--prd-gray-40);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: -0.68px;
}

.prd-feature-intro .capshome-cctv .tit {
  margin-top: 6px;
}

.prd-feature-intro .capshome-cctv .txt {
  margin-top: 24px;
}

.prd-feature-intro .capshome-cctv .con {
  max-width: 1520px;
  margin: 80px auto 0;
  padding: 0 40px;
}

/* 아코디언과 조감도를 한 덩어리로 묶어 가로·세로 모두 가운데에 둡니다.
 폭이 줄면 둘 다 같은 비율로 작아지고 세로 중심도 계속 맞습니다.
 비율은 시안 기준(462 : 125 : 812 / 1440)을 그대로 옮긴 값입니다. */
.prd-feature-intro .capshome-cctv .con-inner {
  display: flex;
  align-items: center;
  /* 시안: 리스트 x=0, 조감도 x=587 (간격 125 / 1440) */
  justify-content: flex-start;
  gap: 8.68%;
  padding: 27px 0;
}

/* ── 왼쪽 아코디언 ── */
.prd-feature-intro .capshome-cctv .cctv-list {
  flex-shrink: 0;
  width: 32.08%;
}

.prd-feature-intro .capshome-cctv .cctv-item {
  border-bottom: 1px solid var(--prd-gray-line);
}

/* 열리면 패널 아랫선이 구분선 역할을 하므로 항목 선은 지웁니다. */
.prd-feature-intro .capshome-cctv .cctv-item[open] {
  border-bottom: 0;
}

.prd-feature-intro .capshome-cctv .cctv-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 80px;
  padding: 30px 32px;
  color: var(--prd-black);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
  list-style: none;
  cursor: pointer;
}

/* 기본 삼각형 마커를 지웁니다. */
.prd-feature-intro .capshome-cctv .cctv-summary::-webkit-details-marker {
  display: none;
}

/* 라벨은 h3 라서 브라우저 기본 크기·굵기가 붙습니다. summary 값을 그대로 쓰게 합니다. */
.prd-feature-intro .capshome-cctv .cctv-summary-tit {
  font: inherit;
  color: inherit;
}

/* 40x40 안에 16x2 막대 두 개로 +, 열리면 - 가 됩니다. */
.prd-feature-intro .capshome-cctv .cctv-ico {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 40px;
}

.prd-feature-intro .capshome-cctv .cctv-ico::before,
.prd-feature-intro .capshome-cctv .cctv-ico::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 16px;
  height: 2px;
  border-radius: 1px;
  background: var(--prd-black);
  transform: translate(-50%, -50%);
}

.prd-feature-intro .capshome-cctv .cctv-ico::after {
  transform: translate(-50%, -50%) rotate(90deg);
  transition: transform 0.3s ease;
}

.prd-feature-intro .capshome-cctv .cctv-item[open] .cctv-ico::after {
  transform: translate(-50%, -50%) rotate(180deg);
}

.prd-feature-intro .capshome-cctv .cctv-panel {
  padding: 36px 40px;
  border-bottom: 1px solid var(--prd-gray-line);
  border-radius: 0 0 12px 12px;
  background: #f8f8f8;
}

.prd-feature-intro .capshome-cctv .cctv-lead {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.prd-feature-intro .capshome-cctv .cctv-example {
  margin-top: 24px;
}

.prd-feature-intro .capshome-cctv .cctv-example-tit {
  color: var(--prd-gray-20);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.44;
  letter-spacing: -0.18px;
}

.prd-feature-intro .capshome-cctv .cctv-example-txt {
  margin-top: 4px;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

/* ── 오른쪽 조감도 ── */
.prd-feature-intro .capshome-cctv .cctv-house {
  position: relative;
  flex-shrink: 0;
  width: 56.39%;
  aspect-ratio: 1623 / 1266;
}

.prd-feature-intro .capshome-cctv .cctv-house-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 시안 B안(1:11835): 호버 없이 말풍선 5개를 항상 띄우고 라인으로 점과 잇습니다.
 좌표는 모두 조감도 박스(시안 기준 812x632, con 안 586.8, 4.9) 대비 % 입니다. */
.prd-feature-intro .capshome-cctv .cctv-spot {
  position: absolute;
  width: 32px;
  height: 32px;
  transform: translate(-50%, -50%);
}

.prd-feature-intro .capshome-cctv .cctv-spot-1 {
  left: 26.88%;
  top: 35.01%;
}

.prd-feature-intro .capshome-cctv .cctv-spot-2 {
  left: 20.09%;
  top: 66.18%;
}

.prd-feature-intro .capshome-cctv .cctv-spot-3 {
  left: 37.45%;
  top: 80.58%;
}

.prd-feature-intro .capshome-cctv .cctv-spot-4 {
  left: 56.66%;
  top: 60.48%;
}

.prd-feature-intro .capshome-cctv .cctv-spot-5 {
  left: 77.96%;
  top: 44.97%;
}

/* 흰 점 두 겹(바깥 32px 30% + 안쪽 16px 불투명)을 CSS 로 그립니다.
 내보낸 SVG 는 backdrop-filter 를 foreignObject 에 담고 있어 img 로는 블러가 살지 않습니다. */
.prd-feature-intro .capshome-cctv .cctv-dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.prd-feature-intro .capshome-cctv .cctv-dot::after {
  content: "";
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  background: var(--prd-white);
}

/* 밖으로 번지며 사라지는 링. 점마다 시작을 조금씩 어긋내 한꺼번에 튀지 않게 합니다. */
.prd-feature-intro .capshome-cctv .cctv-dot::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.45);
  animation: capshome-cctv-ping 2s cubic-bezier(0.165, 0.84, 0.44, 1) 0.4s infinite;
}

@keyframes capshome-cctv-ping {
  0% {
    opacity: 0.8;
    transform: scale(0.6);
  }

  100% {
    opacity: 0;
    transform: scale(2.2);
  }
}

.prd-feature-intro .capshome-cctv .cctv-spot-2 .cctv-dot::before {
  animation-delay: 0.8s;
}
.prd-feature-intro .capshome-cctv .cctv-spot-3 .cctv-dot::before {
  animation-delay: 1.2s;
}
.prd-feature-intro .capshome-cctv .cctv-spot-4 .cctv-dot::before {
  animation-delay: 1.6s;
}
.prd-feature-intro .capshome-cctv .cctv-spot-5 .cctv-dot::before {
  animation-delay: 2s;
}

.prd-feature-intro .capshome-cctv .cctv-dot-sm {
  position: absolute;
  left: 13.58%;
  top: 24.25%;
  width: 10px;
  height: 10px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--prd-white);
}

/* 점과 말풍선을 잇는 라인. 저장한 이미지 그대로, 폭만 % 로 줘서 조감도와 같이 줄어듭니다. */
.prd-feature-intro .capshome-cctv .cctv-line {
  position: absolute;
  height: auto;
  max-width: none;
  pointer-events: none;
}

.prd-feature-intro .capshome-cctv .cctv-line-1 {
  left: 5.81%;
  top: 26.77%;
  width: 19.21%;
}
.prd-feature-intro .capshome-cctv .cctv-line-2 {
  left: 17.63%;
  top: 69.03%;
  width: 2.71%;
}
.prd-feature-intro .capshome-cctv .cctv-line-3 {
  left: 28.47%;
  top: 80.58%;
  width: 7.02%;
}
.prd-feature-intro .capshome-cctv .cctv-line-4 {
  left: 58.63%;
  top: 60.48%;
  width: 8.62%;
}
.prd-feature-intro .capshome-cctv .cctv-line-5 {
  left: 80.67%;
  top: 27.88%;
  width: 14.16%;
}

/* 말풍선은 크기가 고정이라, 라인 끝점에 닿는 쪽 모서리를 기준으로 붙여 둡니다.
 그래야 조감도가 줄어도 라인과 떨어지지 않습니다. */
.prd-feature-intro .capshome-cctv .cctv-tips {
  margin: 0;
  padding: 0;
  list-style: none;
}

.prd-feature-intro .capshome-cctv .cctv-tip {
  position: absolute;
  z-index: 1;
  padding: 12px 16px;
  white-space: nowrap;
  border: 1px solid var(--prd-gray-line);
  border-radius: 6px;
  background: var(--prd-white);
  box-shadow: 3px 3px 10px rgba(74, 97, 133, 0.05);
}

/* 실내: 라인 끝점 위 */
.prd-feature-intro .capshome-cctv .cctv-tip-1 {
  left: -8.6%;
  bottom: 74.81%;
}

/* 마당·주차장: 라인 끝점 왼쪽 */
.prd-feature-intro .capshome-cctv .cctv-tip-2 {
  right: 83.65%;
  top: 79.63%;
  transform: translateY(-50%);
}

/* 대문·진입로: 라인 끝점 왼쪽 */
.prd-feature-intro .capshome-cctv .cctv-tip-3 {
  right: 72.77%;
  top: 99.89%;
  transform: translateY(-50%);
}

/* 현관: 라인 끝점 오른쪽 */
.prd-feature-intro .capshome-cctv .cctv-tip-4 {
  left: 68.36%;
  top: 97.2%;
  transform: translateY(-50%);
}

/* 후문·측면: 라인 끝점 위 */
.prd-feature-intro .capshome-cctv .cctv-tip-5 {
  left: 79.93%;
  bottom: 73.71%;
}

.prd-feature-intro .capshome-cctv .cctv-tip-tit {
  display: block;
  color: var(--prd-gray-20);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.prd-feature-intro .capshome-cctv .cctv-tip-txt {
  display: block;
  margin-top: 4px;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.16px;
}

/* 1024~1439 는 조감도가 최대 0.65배까지 줄어 말풍선도 같이 줄입니다.
 후문·측면은 오른쪽 끝이라 오른쪽 기준으로 바꿔 화면 밖으로 잘리지 않게 합니다. */
@media (min-width: 1024px) and (max-width: 1439px) {
  /* 말풍선이 조감도 밖으로 좌우 튀어나오는 만큼 자리를 비워 둡니다.
   오른쪽: 후문·측면 말풍선 몫(조감도 폭의 8.75%)만큼 조감도를 안으로 당기고
   왼쪽: 리스트를 줄여 마당·주차장 말풍선과 띄웁니다. */
  .prd-feature-intro .capshome-cctv .con-inner {
    justify-content: space-between;
    gap: 24px;
  }

  .prd-feature-intro .capshome-cctv .cctv-list {
    width: 28%;
  }

  .prd-feature-intro .capshome-cctv .cctv-house {
    width: 52%;
    margin-right: 4.5%;
  }

  .prd-feature-intro .capshome-cctv .cctv-summary {
    gap: 16px;
    padding: 24px;
  }

  .prd-feature-intro .capshome-cctv .cctv-panel {
    padding: 28px 24px;
  }

  .prd-feature-intro .capshome-cctv .cctv-tip {
    padding: clamp(8px, 0.83vw, 12px) clamp(12px, 1.11vw, 16px);
  }

  .prd-feature-intro .capshome-cctv .cctv-tip-5 {
    left: auto;
    right: -8.75%;
  }

  .prd-feature-intro .capshome-cctv .cctv-tip-tit {
    font-size: clamp(15px, 1.25vw, 18px);
  }

  .prd-feature-intro .capshome-cctv .cctv-tip-txt {
    margin-top: 2px;
    font-size: clamp(13px, 1.11vw, 16px);
  }
}

/* 움직임을 줄여 달라고 설정한 사용자에게는 링을 띄우지 않습니다. */
@media (prefers-reduced-motion: reduce) {
  .prd-feature-intro .capshome-cctv .cctv-dot::before {
    animation: none;
  }
}

@media (max-width: 1023px) {
  .prd-feature-intro .capshome-cctv {
    padding: 72px 0;
  }

  .prd-feature-intro .capshome-cctv .tit-wrap {
    padding: 0 20px;
  }

  /* 모바일 시안(1:13116) */
  .prd-feature-intro .capshome-cctv .sub-tit {
    color: var(--prd-gray-70);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -0.22px;
  }

  .prd-feature-intro .capshome-cctv .tit {
    margin-top: 6px;
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }

  .prd-feature-intro .capshome-cctv .txt {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }

  .prd-feature-intro .capshome-cctv .con {
    margin-top: 40px;
    padding: 0 20px;
  }

  /* 조감도를 con 밖으로 넘치게 깝니다(시안: x -90, y -12.5, 492x338).
   모바일 조감도는 크롭 전 원본이라 좌표계가 달라 점·라벨·라인 위치를 모바일용으로 따로 잡습니다.
   % 는 모두 이 조감도 박스 기준입니다. */
  .prd-feature-intro .capshome-cctv .con-inner {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0;
  }

  .prd-feature-intro .capshome-cctv .cctv-house {
    order: 1;
    position: relative;
    left: -26.87%;
    width: 146.87%;
    margin-top: -12.5px;
    aspect-ratio: 492 / 338;
  }

  .prd-feature-intro .capshome-cctv .cctv-house-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
  }

  /* 크롭 전 원본 기준, 점 중심 좌표 */
  .prd-feature-intro .capshome-cctv .cctv-spot-1 {
    left: 38.82%;
    top: 32.54%;
  }
  .prd-feature-intro .capshome-cctv .cctv-spot-2 {
    left: 33.13%;
    top: 54.44%;
  }
  .prd-feature-intro .capshome-cctv .cctv-spot-3 {
    left: 44.72%;
    top: 66.86%;
  }
  .prd-feature-intro .capshome-cctv .cctv-spot-4 {
    left: 57.52%;
    top: 52.66%;
  }
  .prd-feature-intro .capshome-cctv .cctv-spot-5 {
    left: 71.75%;
    top: 40.83%;
  }

  .prd-feature-intro .capshome-cctv .cctv-dot-sm {
    display: none;
  }

  /* 점 칸을 점 크기(24)에 맞춰야 % 좌표가 점 중심이 됩니다. (PC 32 그대로면 4px 씩 치우침) */
  .prd-feature-intro .capshome-cctv .cctv-spot {
    width: 24px;
    height: 24px;
  }

  .prd-feature-intro .capshome-cctv .cctv-dot {
    display: block;
    width: 24px;
    height: 24px;
  }

  .prd-feature-intro .capshome-cctv .cctv-dot::after {
    inset: 6px;
  }

  /* 모바일 라인(cctv-spot-N-line-m.webp, 2배). 픽셀로 꺾임 지점을 재서
   한쪽 끝은 점 가장자리, 다른 끝(검은 점)은 라벨 옆에 오도록 맞춘 값입니다. */
  .prd-feature-intro .capshome-cctv .cctv-line-1 {
    left: 23.98%;
    top: 26.48%;
    width: 12.5%;
  }
  .prd-feature-intro .capshome-cctv .cctv-line-2 {
    left: 28.86%;
    top: 58.14%;
    width: 4.47%;
  }
  .prd-feature-intro .capshome-cctv .cctv-line-3 {
    left: 36.28%;
    top: 66.72%;
    width: 6%;
  }
  .prd-feature-intro .capshome-cctv .cctv-line-4 {
    left: 59.96%;
    top: 52.66%;
    width: 10.06%;
  }
  .prd-feature-intro .capshome-cctv .cctv-line-5 {
    left: 74.19%;
    top: 22.19%;
    width: 3.35%;
  }

  /* 모바일 라벨은 박스 없는 10px 텍스트입니다(제목 Bold / 설명 Regular, #555). */
  .prd-feature-intro .capshome-cctv .cctv-tip,
  .prd-feature-intro .capshome-cctv .cctv-tip-2,
  .prd-feature-intro .capshome-cctv .cctv-tip-3,
  .prd-feature-intro .capshome-cctv .cctv-tip-4 {
    right: auto;
    bottom: auto;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    transform: none;
  }

  .prd-feature-intro .capshome-cctv .cctv-tip-tit,
  .prd-feature-intro .capshome-cctv .cctv-tip-txt {
    color: var(--prd-gray-70);
    font-size: 10px;
    line-height: 1.2;
    letter-spacing: 0;
  }

  .prd-feature-intro .capshome-cctv .cctv-tip-txt {
    margin-top: 2px;
  }

  /* 설명이 두 줄로 접히는 라벨은 시안 폭을 그대로 줍니다. */
  .prd-feature-intro .capshome-cctv .cctv-tip-1,
  .prd-feature-intro .capshome-cctv .cctv-tip-2,
  .prd-feature-intro .capshome-cctv .cctv-tip-5 {
    white-space: normal;
  }

  .prd-feature-intro .capshome-cctv .cctv-tip-1 {
    left: 19.11%;
    top: 13.46%;
    width: 73px;
  }
  .prd-feature-intro .capshome-cctv .cctv-tip-2 {
    left: 18.29%;
    top: 62.57%;
    width: 72px;
  }
  .prd-feature-intro .capshome-cctv .cctv-tip-3 {
    left: 25.81%;
    top: 77.66%;
  }
  .prd-feature-intro .capshome-cctv .cctv-tip-4 {
    left: 71.14%;
    top: 77.37%;
  }
  .prd-feature-intro .capshome-cctv .cctv-tip-5 {
    left: 71.75%;
    top: 9.32%;
    width: 77px;
  }

  /* 시안에서 아코디언이 조감도 아래쪽과 29px 겹칩니다(조감도 여백이 비어 있는 구간). */
  .prd-feature-intro .capshome-cctv .cctv-list {
    order: 2;
    position: relative;
    width: 100%;
    margin-top: -29px;
  }

  .prd-feature-intro .capshome-cctv .cctv-summary {
    gap: 16px;
    padding: 16px;
    font-weight: 600;
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.18px;
  }

  .prd-feature-intro .capshome-cctv .cctv-ico {
    width: 36px;
    height: 36px;
  }

  .prd-feature-intro .capshome-cctv .cctv-panel {
    padding: 20px 16px;
  }
}

/* ========== capshome-quality.css ========== */
/* 시안 con 영역이 1920 풀블리드 2분할입니다(왼쪽 화소 비교 / 오른쪽 IR 비교).
 사진은 % 로 잡아 폭을 따라 같이 줄고, 확대 썸네일과 라벨 칩은 px 를 유지합니다. */
.prd-feature-intro .capshome-quality {
  overflow: hidden;
  width: 100%;
  padding: 0 0 140px;
  background: var(--prd-white);
}

.prd-feature-intro .capshome-quality .tit-wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.prd-feature-intro .capshome-quality .txt {
  margin-top: 12px;
}

.prd-feature-intro .capshome-quality .txt b {
  font-weight: 600;
}

.prd-feature-intro .capshome-quality .con {
  display: flex;
  width: 100%;
  margin-top: 80px;
}

/* ── 왼쪽: 화소 비교 ── */
.prd-feature-intro .capshome-quality .quality-pixel {
  overflow: hidden;
  position: relative;
  flex: 1 1 50%;
  height: 680px;
  background: var(--prd-gray-bg);
}

.prd-feature-intro .capshome-quality .quality-pixel-img {
  position: absolute;
  left: -5.63%;
  top: -18.09%;
  width: 120.1%;
  max-width: none;
  height: 141.62%;
  object-fit: cover;
  object-position: bottom;
}

.prd-feature-intro .capshome-quality .quality-zoom-list {
  display: flex;
  flex-direction: column;
  gap: 24px;
  position: absolute;
  left: 12.5%;
  top: 13.97%;
  width: 180px;
}

.prd-feature-intro .capshome-quality .quality-zoom {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
}

.prd-feature-intro .capshome-quality .quality-zoom-thumb {
  overflow: hidden;
  display: block;
  width: 180px;
  height: 180px;
  border: 2.4px solid var(--prd-white);
}

.prd-feature-intro .capshome-quality .quality-zoom-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 오른쪽: IR 비교 ── */
.prd-feature-intro .capshome-quality .quality-ir {
  display: flex;
  overflow: hidden;
  position: relative;
  flex: 1 1 50%;
  height: 680px;
  background: var(--prd-gray-bg);
}

.prd-feature-intro .capshome-quality .quality-ir-col {
  overflow: hidden;
  position: relative;
  flex: 1 1 50%;
}

/* 시안에서 사진이 패널 위아래로 넘쳐 잘립니다. 그 비율을 그대로 옮겼습니다. */
.prd-feature-intro .capshome-quality .quality-ir-img {
  position: absolute;
  top: -27.94%;
  width: 199.66%;
  max-width: none;
  height: 140.94%;
  object-fit: cover;
}

.prd-feature-intro .capshome-quality .quality-ir-img-off {
  left: -36.3%;
}

.prd-feature-intro .capshome-quality .quality-ir-img-on {
  left: -34.25%;
}

.prd-feature-intro .capshome-quality .quality-focus {
  position: absolute;
  left: 14.87%;
  top: 20.49%;
  width: 43.38%;
  height: 32.21%;
  border: 2.726px solid var(--prd-white);
  background: rgba(0, 53, 148, 0.1);
}

.prd-feature-intro .capshome-quality .quality-focus-corner {
  position: absolute;
  width: 28.31px;
  height: 28.31px;
}

.prd-feature-intro .capshome-quality .corner-tl {
  left: -6.35px;
  top: -6.35px;
  border-top: 1.4px solid var(--prd-white);
  border-left: 1.4px solid var(--prd-white);
}

.prd-feature-intro .capshome-quality .corner-tr {
  right: -6.35px;
  top: -6.35px;
  border-top: 1.4px solid var(--prd-white);
  border-right: 1.4px solid var(--prd-white);
}

.prd-feature-intro .capshome-quality .corner-bl {
  left: -6.35px;
  bottom: -6.35px;
  border-bottom: 1.4px solid var(--prd-white);
  border-left: 1.4px solid var(--prd-white);
}

.prd-feature-intro .capshome-quality .corner-br {
  right: -6.35px;
  bottom: -6.35px;
  border-bottom: 1.4px solid var(--prd-white);
  border-right: 1.4px solid var(--prd-white);
}

/* ── 라벨 칩 ── */
.prd-feature-intro .capshome-quality .quality-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 30px;
  color: var(--prd-white);
  font-weight: 700;
  font-size: 18px;
  line-height: 1.45;
  text-align: center;
  white-space: nowrap;
  border-radius: 60px;
  background: rgba(255, 255, 255, 0.2);
  box-shadow: 7.463px 9.951px 19.902px rgba(0, 0, 0, 0.08);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
}

.prd-feature-intro .capshome-quality .quality-label-off,
.prd-feature-intro .capshome-quality .quality-label-on {
  position: absolute;
  left: 50%;
  bottom: 7.35%;
  box-shadow: 8.179px 10.905px 21.81px rgba(0, 0, 0, 0.08);
  transform: translateX(-50%);
}

.prd-feature-intro .capshome-quality .quality-label-on {
  color: var(--prd-gray-20);
  background: rgba(255, 255, 255, 0.8);
}

/* 1024~1919: 폭은 줄어드는데 높이가 680px 로 고정이면 패널마다 사진이 가로로만 잘려
 세 칸의 구도가 제각각이 됩니다. 패널을 시안 비율(960x680)로 묶어 통째로 축소하고,
 px 로 고정된 썸네일·라벨·모서리도 패널 폭 기준(cqw, 960 = 100cqw)으로 같이 줄입니다. */
@media (min-width: 1024px) and (max-width: 1919px) {
  .prd-feature-intro .capshome-quality .quality-pixel,
  .prd-feature-intro .capshome-quality .quality-ir {
    height: auto;
    aspect-ratio: 960 / 680;
    container-type: inline-size;
  }

  .prd-feature-intro .capshome-quality .quality-zoom-list {
    gap: 2.5cqw;
    width: 18.75cqw;
  }

  .prd-feature-intro .capshome-quality .quality-zoom {
    gap: 0.94cqw;
  }

  .prd-feature-intro .capshome-quality .quality-zoom-thumb {
    width: 18.75cqw;
    height: 18.75cqw;
    border-width: max(1.5px, 0.25cqw);
  }

  .prd-feature-intro .capshome-quality .quality-label {
    padding: clamp(5px, 0.94cqw, 9px) clamp(16px, 3.125cqw, 30px);
    font-size: clamp(13px, 1.875cqw, 18px);
  }

  /* IR 칸은 1024 에서 256px 까지 좁아져 한 줄 라벨이 칸 밖으로 잘립니다.
   칸 폭 90% 를 넘으면 두 줄로 넘깁니다. (left:50% 라 폭을 max-content 로 따로 잡습니다) */
  .prd-feature-intro .capshome-quality .quality-label-off,
  .prd-feature-intro .capshome-quality .quality-label-on {
    width: max-content;
    max-width: 90%;
    white-space: normal;
    word-break: keep-all;
  }

  .prd-feature-intro .capshome-quality .quality-focus {
    border-width: max(1.5px, 0.28cqw);
  }

  .prd-feature-intro .capshome-quality .quality-focus-corner {
    width: 2.95cqw;
    height: 2.95cqw;
  }

  .prd-feature-intro .capshome-quality .corner-tl,
  .prd-feature-intro .capshome-quality .corner-tr {
    top: -0.66cqw;
  }

  .prd-feature-intro .capshome-quality .corner-bl,
  .prd-feature-intro .capshome-quality .corner-br {
    bottom: -0.66cqw;
  }

  .prd-feature-intro .capshome-quality .corner-tl,
  .prd-feature-intro .capshome-quality .corner-bl {
    left: -0.66cqw;
  }

  .prd-feature-intro .capshome-quality .corner-tr,
  .prd-feature-intro .capshome-quality .corner-br {
    right: -0.66cqw;
  }
}

@media (max-width: 1023px) {
  /* 모바일 시안(23:8951, 375x968): PC 는 좌우 2분할이지만 모바일은
   화소 비교(375x358) 위, IR 비교(375x354) 아래로 쌓입니다. */
  .prd-feature-intro .capshome-quality {
    padding: 0 0 72px;
  }

  .prd-feature-intro .capshome-quality .tit-wrap {
    padding: 0 20px;
  }

  .prd-feature-intro .capshome-quality .tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }

  .prd-feature-intro .capshome-quality .txt {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }

  .prd-feature-intro .capshome-quality .con {
    display: block;
    margin-top: 40px;
  }

  /* ── 화소 비교 ── */
  .prd-feature-intro .capshome-quality .quality-pixel {
    height: auto;
    aspect-ratio: 375 / 358;
  }

  .prd-feature-intro .capshome-quality .quality-pixel-img {
    left: -43.2%;
    top: -21.79%;
    width: 175.47%;
    height: 153.63%;
  }

  .prd-feature-intro .capshome-quality .quality-zoom-list {
    left: 10.67%;
    top: 15.92%;
    gap: 20px;
    width: 84px;
  }

  .prd-feature-intro .capshome-quality .quality-zoom {
    gap: 8px;
  }

  .prd-feature-intro .capshome-quality .quality-zoom-thumb {
    width: 80px;
    height: 80px;
    border-width: 1.6px;
  }

  /* ── IR 비교 ── */
  .prd-feature-intro .capshome-quality .quality-ir {
    height: auto;
    aspect-ratio: 375 / 354;
  }

  .prd-feature-intro .capshome-quality .quality-ir-img {
    top: 0;
    width: 189.3%;
    height: 100%;
  }

  .prd-feature-intro .capshome-quality .quality-ir-img-off {
    left: -32.09%;
  }

  .prd-feature-intro .capshome-quality .quality-ir-img-on {
    left: -31.38%;
  }

  .prd-feature-intro .capshome-quality .quality-focus {
    left: 14.36%;
    top: 33.6%;
    width: 41.03%;
    height: 22.85%;
    border-width: 1.2px;
  }

  .prd-feature-intro .capshome-quality .quality-focus-corner {
    width: 9.88px;
    height: 9.88px;
  }

  .prd-feature-intro .capshome-quality .corner-tl,
  .prd-feature-intro .capshome-quality .corner-tr {
    top: -2.2px;
  }

  .prd-feature-intro .capshome-quality .corner-bl,
  .prd-feature-intro .capshome-quality .corner-br {
    bottom: -2.2px;
  }

  .prd-feature-intro .capshome-quality .corner-tl,
  .prd-feature-intro .capshome-quality .corner-bl {
    left: -2.2px;
  }

  .prd-feature-intro .capshome-quality .corner-tr,
  .prd-feature-intro .capshome-quality .corner-br {
    right: -2.2px;
  }

  /* ── 라벨 칩 ── */
  .prd-feature-intro .capshome-quality .quality-label {
    padding: 4px 14px;
    font-weight: 600;
    font-size: 12px;
    line-height: 1.3;
    letter-spacing: -0.12px;
    border-radius: 47px;
    box-shadow: 2.855px 3.807px 7.614px rgba(0, 0, 0, 0.08);
  }

  /* 줄바꿈은 시안 지점의 <br> 로 잡고 자동 줄바꿈은 끕니다. */
  .prd-feature-intro .capshome-quality .quality-label-off,
  .prd-feature-intro .capshome-quality .quality-label-on {
    bottom: 8.47%;
    box-shadow: 2.855px 3.807px 7.614px rgba(0, 0, 0, 0.08);
  }
}

/* ── 태블릿 폭(~1023) 보정 ──
 모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
 비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
 카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
/* 조감도(con 의 146.87%)·10px 라벨이 함께 커지지 않게 con 을 묶습니다. 라벨·라인은 조감도 % 라 그대로 맞습니다. */
.prd-feature-intro .capshome-cctv .con {
  max-width: 520px;
  margin-left: auto;
  margin-right: auto;
}

/* 화소·IR 패널(375:358 / 375:354)이 각각 화면 폭만큼 커지지 않게 묶습니다. */
.prd-feature-intro .capshome-quality .con {
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}
}

/* ==================== 필드 3 : .prd-html-content (parts/capshome-house-3.html) ==================== */
/* ========== capshome-common.css ========== */
.prd-html-content .capshome-blind {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ========== reveal.css ==========
   스크롤 등장 효과. JS 가 대상에 .is-reveal-pending 을 붙인 뒤에만 숨기므로
   JS 가 없거나 모션 줄이기를 켠 경우에는 처음부터 보입니다.
   from 만 두어 끝 값은 각 요소의 원래 opacity 를 따르고, transform 대신 translate 를 써서 기존 transform 과 겹치지 않습니다. */
.prd-html-content .is-reveal-pending {
  opacity: 0 !important;
}

.prd-html-content .is-revealed {
  animation: capshome-reveal-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s) both;
}

@keyframes capshome-reveal-up {
  from {
    opacity: 0;
    translate: 0 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prd-html-content .is-reveal-pending {
    opacity: 1 !important;
  }

  .prd-html-content .is-revealed {
    animation: none;
  }
}

.prd-html-content .capshome-ai br.mo,
.prd-html-content .capshome-env br.mo {
  display: none;
}

.prd-html-content .capshome-ai br.pc,
.prd-html-content .capshome-env br.pc {
  display: inline;
}

@media (max-width: 1023px) {
  .prd-html-content .capshome-ai br.mo,
  .prd-html-content .capshome-env br.mo {
    display: inline;
  }

  .prd-html-content .capshome-ai br.pc,
  .prd-html-content .capshome-env br.pc {
    display: none;
  }
}

.prd-html-content .capshome-ai,
.prd-html-content .capshome-env {
  --prd-black: #000000;
  --prd-gray-20: #1d1d1d;
  --prd-gray-40: #404040;
  --prd-gray-70: #555555;
  --prd-gray-80: #707070; /* 명도 대비 4.5:1 (시안 #717171) */
  --prd-gray-90: #6e6e6e; /* 명도 대비 4.5:1 (시안 #8e8e8e) */
  --prd-gray-line: #d8d8d8;
  --prd-gray-bg: #f5f5f5;
  --prd-white: #ffffff;
  --prd-blue: #025afc;
  --prd-blue-dark: #0041cc;
  --prd-blue-pale: rgba(204, 220, 255, 0.4);
  --prd-navy: #003594;
  --prd-line: #ccdcff;
  --prd-dim: rgba(204, 220, 255, 0.3);
}
/* ─────────────────────────────────────────────
 섹션 제목·본문 공통 (여백만 섹션에서 덮어씁니다)
 ───────────────────────────────────────────── */

.prd-html-content .capshome-ai .tit,
.prd-html-content .capshome-env .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}

.prd-html-content .capshome-ai .txt,
.prd-html-content .capshome-env .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}

/* ========== capshome-ai.css ========== */
/* 가운데 폰을 두고 좌우로 기능 카드 2장씩 놓입니다.
 카드는 탭이고, 누르면 폰 화면이 바뀝니다 — 동작은 slider.js 를 그대로 씁니다
 (apartment-villa 의 capshome-app 과 같은 구성). */
/* 시안에서 이 섹션은 위아래 패딩이 0 입니다.
 앞 섹션(quality)의 하단 140px 이 위 간격을, 다음 섹션이 아래 간격을 담당합니다. */
.prd-html-content .capshome-ai {
  overflow: hidden;
  width: 100%;
  padding: 0;
  background: var(--prd-white);
}

.prd-html-content .capshome-ai .tit-wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.prd-html-content .capshome-ai .txt {
  margin-top: 12px;
}

.prd-html-content .capshome-ai .ai-note {
  margin-top: 8px;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.16px;
}

.prd-html-content .capshome-ai .con {
  max-width: 1520px;
  margin: 80px auto 0;
  padding: 0 40px;
}

.prd-html-content .capshome-ai .con-inner {
  position: relative;
  height: 728px;
}

/* ── 가운데 폰 ── */
/* 폭만 % 로 줄고 높이가 728px 로 고정이면 프레임(contain)은 작아지는데
 안쪽 화면은 세로로 그대로라 프레임 밖으로 삐져나옵니다.
 시안 비율(360x728)로 묶고 줄어든 만큼은 세로 가운데에 둡니다. */
.prd-html-content .capshome-ai .phone {
  position: absolute;
  left: 37.5%;
  top: 50%;
  width: 25%;
  height: auto;
  aspect-ratio: 360 / 728;
  transform: translateY(-50%);
  container-type: inline-size;
}

/* 프레임 PNG 를 화면 위에 덮습니다.
 z-index: -1 로 화면을 내리면 섹션 배경색 아래로 들어가 아예 안 보입니다. */
.prd-html-content .capshome-ai .phone::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("https://images.ctfassets.net/6hqdqj4fjyeg/7huIChMNUtlOHgbt6fm8dh/f33735144774853d98f3bb827777f86f/capshome-house-ai-phone.webp") no-repeat center / contain;
  pointer-events: none;
}

/* 프레임 PNG 안쪽 화면 자리 */
.prd-html-content .capshome-ai .slide-view {
  display: block;
  overflow: hidden;
  position: absolute;
  z-index: auto;
  isolation: isolate;
  left: 5.28%;
  top: 2.34%;
  width: 89.44%;
  height: 95.47%;
  touch-action: pan-y;
  /* 폰 폭 360 기준 30px. 폰이 줄면 모서리도 같이 줄어야 프레임 안쪽 곡선과 맞습니다. */
  border-radius: 8.33cqw;
}

.prd-html-content .capshome-ai .card {
  overflow: hidden;
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.prd-html-content .capshome-ai .card img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ── 좌우 기능 카드 ── */
.prd-html-content .capshome-ai .tab-list {
  display: contents;
}

.prd-html-content .capshome-ai .ai-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: absolute;
  padding: 0;
  text-align: left;
}

/* 비활성 카드는 opacity 대신 색으로 흐리게 합니다(명도 대비 기준). 아이콘은 글자가 아니라 opacity 를 그대로 씁니다. */
.prd-html-content .capshome-ai .ai-card.on .ai-card-icon {
  opacity: 1;
}

.prd-html-content .capshome-ai .ai-card.on .ai-card-eyebrow {
  color: var(--prd-blue);
}

.prd-html-content .capshome-ai .ai-card.on .ai-card-tit {
  color: var(--prd-black);
}

.prd-html-content .capshome-ai .ai-card.on .ai-card-txt {
  color: var(--prd-gray-70);
}

.prd-html-content .capshome-ai .ai-card-1 {
  left: 4.72%;
  top: 67px;
  width: 24.58%;
}

.prd-html-content .capshome-ai .ai-card-2 {
  left: 4.72%;
  top: 409px;
  width: 23.06%;
}

.prd-html-content .capshome-ai .ai-card-3 {
  left: 72.22%;
  top: 67px;
  width: 24.86%;
}

.prd-html-content .capshome-ai .ai-card-4 {
  left: 72.22%;
  top: 409px;
  width: 23.06%;
}

.prd-html-content .capshome-ai .ai-card-icon {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--prd-white);
  opacity: 0.4;
  transition: opacity 0.35s ease;
}

/* 아이콘 PNG 는 60px 박스 전체(여백 포함)를 2배(120x120)로 뽑은 것이라 박스를 꽉 채웁니다. */
.prd-html-content .capshome-ai .ai-card-icon img {
  display: block;
  width: 100%;
  height: 100%;
}

.prd-html-content .capshome-ai .ai-card-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
}

.prd-html-content .capshome-ai .ai-card-eyebrow {
  color: var(--prd-gray-90);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.44;
  letter-spacing: -0.18px;
  transition: color 0.35s ease;
}

.prd-html-content .capshome-ai .ai-card-tit {
  color: #949494; /* 굵은 24px 라 명도 대비 3:1 기준 */
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
  transition: color 0.35s ease;
}

.prd-html-content .capshome-ai .ai-card-txt {
  color: var(--prd-gray-90);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  white-space: nowrap;
  letter-spacing: -0.18px;
  transition: color 0.35s ease;
}

/* 하단 각주도 PC·모바일 문구가 달라 둘 다 넣어 두고 폭에 따라 하나만 보입니다. */
.prd-html-content .capshome-ai .ai-foot-mo {
  display: none;
}

/* 설명은 PC·모바일 문구가 달라 둘 다 넣어 두고 폭에 따라 하나만 보입니다. 모바일은 시안(1:13472 등)의 짧은 문구입니다. */
.prd-html-content .capshome-ai .ai-card-txt-mo {
  display: none;
}

/* 시안: 폰 아래 40px 에 8px 점 4개(간격 20px). 같은 일을 하는 큰 카드 버튼이 옆에 있어 WCAG 2.5.8 예외에 해당합니다.
 .con-inner 는 폰 높이(728px)라 그 아래에 붙이고, 각주는 점 줄(8px)만큼 더 내립니다. */
.prd-html-content .capshome-ai .slide-dot {
  display: flex;
  position: absolute;
  top: calc(100% + 40px);
  left: 0;
  right: 0;
  justify-content: center;
  gap: 0;
}

.prd-html-content .capshome-ai .slide-dot button {
  position: relative;
  width: 20px;
  height: 24px;
  margin: -8px 0;
  padding: 0;
  border: 0;
  background: none;
}

.prd-html-content .capshome-ai .slide-dot button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--prd-gray-line);
  transform: translate(-50%, -50%);
  content: "";
}

.prd-html-content .capshome-ai .slide-dot button.on::before {
  background: var(--prd-black);
}

.prd-html-content .capshome-ai .ai-foot {
  margin-top: 88px;
  color: var(--prd-gray-90);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  text-align: center;
  letter-spacing: -0.16px;
}

/* 1024~1439: 본문이 nowrap·18px 고정이라 폭이 줄면 왼쪽 카드는 폰을 덮고
 오른쪽 카드는 화면 밖으로 잘립니다. 카드를 폰 양옆 남은 폭(폰과 32px 간격)에 가두고
 줄바꿈을 허용한 뒤 글자도 폭에 맞춰 줄입니다. */
@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-html-content .capshome-ai .ai-card {
    width: calc(37.5% - 32px);
  }

  .prd-html-content .capshome-ai .ai-card-1,
  .prd-html-content .capshome-ai .ai-card-2 {
    left: 0;
  }

  .prd-html-content .capshome-ai .ai-card-3,
  .prd-html-content .capshome-ai .ai-card-4 {
    left: calc(62.5% + 32px);
  }

  .prd-html-content .capshome-ai .ai-card-eyebrow {
    font-size: clamp(16px, 1.4vw, 18px);
  }

  .prd-html-content .capshome-ai .ai-card-tit {
    font-size: clamp(20px, 1.9vw, 24px);
    word-break: keep-all;
  }

  .prd-html-content .capshome-ai .ai-card-txt {
    font-size: clamp(15px, 1.4vw, 18px);
    white-space: normal;
    word-break: keep-all;
  }
}

@media (max-width: 1023px) {
  /* 모바일 시안(23:8995, 375x1005): 폰 → 닷 → "활성 카드 1장" 순서.
   PC 처럼 카드 4장을 늘어놓지 않고 현재 카드만 보여 줍니다. */
  .prd-html-content .capshome-ai {
    padding: 0 0 72px;
  }

  .prd-html-content .capshome-ai .tit-wrap,
  .prd-html-content .capshome-ai .con {
    padding: 0 20px;
  }

  .prd-html-content .capshome-ai .tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }

  /* 모바일 시안(1:13053)은 제목 바로 아래 뷰가드 안내만 두고 설명 문단은 뺍니다. */
  .prd-html-content .capshome-ai .txt {
    display: none;
  }

  .prd-html-content .capshome-ai .ai-note {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }

  .prd-html-content .capshome-ai .con {
    margin-top: 40px;
  }

  .prd-html-content .capshome-ai .con-inner {
    display: flex;
    flex-direction: column;
    height: auto;
  }

  /* static 으로 두면 안쪽 .slide-view 의 % 가 .con-inner 기준으로 잡힙니다. */
  .prd-html-content .capshome-ai .phone {
    order: 1;
    position: relative;
    left: auto;
    top: auto;
    width: 191px;
    height: 385px;
    margin: 0 auto;
    transform: none;
  }

  .prd-html-content .capshome-ai .slide-view {
    left: 5.24%;
    top: 1.95%;
    width: 89.53%;
    height: 95.84%;
    border-radius: 16px;
  }

  /* 닷: 6px 4개, 간격 8px */
  .prd-html-content .capshome-ai .slide-dot {
    order: 2;
    position: static;
    display: flex;
    gap: 0;
    justify-content: center;
    margin-top: 24px;
  }

  .prd-html-content .capshome-ai .slide-dot button {
    /* 터치 영역 24×24px. 점 중심 간격도 24px 이 되어 WCAG 2.5.8(타깃 크기) 을 만족합니다. 세로는 음수 마진으로 줄 높이를 그대로 둡니다. */
    position: relative;
    width: 24px;
    height: 24px;
    margin: -9px 0;
    padding: 0;
    border: 0;
    background: none;
  }

  .prd-html-content .capshome-ai .slide-dot button::before {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--prd-gray-line);
    transform: translate(-50%, -50%);
    content: "";
  }

  .prd-html-content .capshome-ai .slide-dot button.on::before {
    background: var(--prd-black);
  }

  /* 활성 카드 한 장만 노출 */
  .prd-html-content .capshome-ai .tab-list {
    order: 3;
    display: block;
    margin-top: 40px;
  }

  /* 아이콘 | (제목 + 본문) 2열. 카드 자식이 셋이라 flex row 로 두면
   본문까지 같은 줄에 들어가 폭이 찌그러집니다. */
  .prd-html-content .capshome-ai .ai-card {
    display: none;
    position: static;
    grid-template-columns: 60px 1fr;
    column-gap: 16px;
    row-gap: 12px;
    width: 100%;
    padding-right: 8px;
    opacity: 1;
  }

  .prd-html-content .capshome-ai .ai-card.on {
    display: grid;
  }

  .prd-html-content .capshome-ai .ai-card-icon {
    grid-row: 1 / span 2; /* 두 줄에 걸쳐야 1행 높이가 아이콘(60px)이 아닌 제목 높이로 잡힙니다. */
    align-self: start;
    grid-column: 1;
  }

  .prd-html-content .capshome-ai .ai-card-head {
    grid-row: 1;
    grid-column: 2;
    gap: 6px;
  }

  .prd-html-content .capshome-ai .ai-card-eyebrow {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.28px;
  }

  .prd-html-content .capshome-ai .ai-card-tit {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }

  .prd-html-content .capshome-ai .ai-card-txt {
    grid-row: 2;
    grid-column: 2;
    margin-top: 0;
    font-size: 14px;
    line-height: 1.5;
    white-space: normal;
    letter-spacing: -0.42px;
  }

  .prd-html-content .capshome-ai .ai-card-txt {
    word-break: keep-all;
  }

  .prd-html-content .capshome-ai .ai-card-txt-pc {
    display: none;
  }

  .prd-html-content .capshome-ai .ai-card-txt-mo {
    display: inline;
  }

  /* 모바일 시안(1:13053): 각주를 회색 박스에 담습니다. 카드 본문과 30px 간격. */
  .prd-html-content .capshome-ai .ai-foot {
    margin-top: 30px;
    padding: 24px 20px;
    color: var(--prd-gray-70);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
    word-break: keep-all;
    border-radius: 8px;
    background: var(--prd-gray-bg);
  }

  .prd-html-content .capshome-ai .ai-foot-pc {
    display: none;
  }

  .prd-html-content .capshome-ai .ai-foot-mo {
    display: inline;
  }
}

/* ========== capshome-env.css ========== */
/* 왼쪽 카드가 위에, 오른쪽 카드가 아래로 어긋난 2열입니다.
 등장 모션은 apartment-villa 의 capshome-setup .cards 와 같습니다.
 상세 사양은 details/summary 로 접고 펼칩니다. */
.prd-html-content .capshome-env {
  --prd-gray-5: #f8f8f8;
  --prd-gray-mid: #c6c6c6;
  overflow: hidden;
  width: 100%;
  padding: 140px 0;
  background: var(--prd-white);
}

.prd-html-content .capshome-env .tit-wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.prd-html-content .capshome-env .txt {
  margin-top: 12px;
}

.prd-html-content .capshome-env .con {
  max-width: 1520px;
  margin: 80px auto 0;
  padding: 0 40px;
}

/* 카드를 절대배치하면 con-inner 높이를 따로 정해야 하는데, 폭이 줄 때 높이만 비율로 줄고
 카드 안 텍스트·간격(px)은 그대로라 카드가 넘쳐 아래 토글 버튼에 붙었습니다.
 흐름 배치로 두어 높이가 내용대로 잡히게 합니다.
 시안 1440: 584 + 32 + 584 = 1200 가운데 정렬 → 카드 x=120 / 736, 오른쪽 카드는 180 아래. */
.prd-html-content .capshome-env .con-inner {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  width: 100%;
}

.prd-html-content .capshome-env .env-feature {
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  gap: 40px;
  position: relative;
  width: 584px;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.prd-html-content .capshome-env .env-feature-1 {
  transform: translate3d(0, 100px, 0);
}

.prd-html-content .capshome-env .env-feature-2 {
  margin-top: 180px;
  transform: translate3d(0, -100px, 0);
}

.prd-html-content .capshome-env.on .env-feature-1,
.prd-html-content .capshome-env.on .env-feature-2 {
  transform: translate3d(0, 0, 0);
}

.prd-html-content .capshome-env .env-feature-img {
  overflow: hidden;
  position: relative;
  width: 100%;
  aspect-ratio: 584 / 665;
  border-radius: 12px;
  background: var(--prd-gray-bg);
}

.prd-html-content .capshome-env .env-feature-img img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.prd-html-content .capshome-env .env-feature-1 .env-feature-bg {
  left: -18.66%;
  top: -3.91%;
  width: 134.08%;
  height: 129.17%;
}

.prd-html-content .capshome-env .env-feature-1 .env-feature-photo {
  left: -64.73%;
  top: -14.89%;
  width: 229.62%;
  height: 129.77%;
}

.prd-html-content .capshome-env .env-feature-2 .env-feature-img {
  background: transparent;
}

.prd-html-content .capshome-env .env-feature-2 .env-feature-bg {
  left: -15.58%;
  top: -29.47%;
  width: 146.58%;
  height: 148.27%;
}

.prd-html-content .capshome-env .env-feature-2 .env-feature-photo {
  left: -65.75%;
  top: -0.15%;
  width: 235.45%;
  height: 100.15%;
}

.prd-html-content .capshome-env .env-feature-txt-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 0 12px;
}

.prd-html-content .capshome-env .env-feature-tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}

.prd-html-content .capshome-env .env-feature-txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.prd-html-content .capshome-env .env-feature-txt b {
  font-weight: 600;
}

/* details 를 flex 로 만들면 실제 flex 아이템은 브라우저 UA 섀도의 slot 이다.
 align-items: center 를 주면 그 slot 이 shrink-to-fit 으로 줄어 자식의 width:100% 가 먹지 않는다.
 토글 버튼은 .env-toggle 의 margin: 0 auto 로 이미 가운데 정렬된다. */
.prd-html-content .capshome-env .env-details {
  display: flex;
  flex-direction: column-reverse;
  margin-top: 80px;
}

/* details 에 flex 를 걸면 닫힌 상태에서도 본문이 남을 수 있어 직접 숨깁니다. */
.prd-html-content .capshome-env .env-details:not([open]) .env-spec {
  display: none;
}

.prd-html-content .capshome-env .env-spec {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 50px;
  width: 100%;
  margin-bottom: 80px;
  padding: 60px 0;
  border-top: 1px solid var(--prd-gray-line);
  border-bottom: 1px solid var(--prd-gray-line);
  background: var(--prd-gray-5);
}

.prd-html-content .capshome-env .env-spec-tit,
.prd-html-content .capshome-env .env-spec-label {
  display: none;
}

.prd-html-content .capshome-env .env-spec-cam-list {
  display: flex;
  gap: 400px;
  justify-content: center;
}

.prd-html-content .capshome-env .env-spec-cam {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.prd-html-content .capshome-env .env-spec-cam-img {
  overflow: hidden;
  position: relative;
  display: block;
}

.prd-html-content .capshome-env .env-spec-cam-img img {
  position: absolute;
  max-width: none;
  object-fit: cover;
}

.prd-html-content .capshome-env .env-spec-cam-img-in {
  width: 136px;
  height: 130px;
}

.prd-html-content .capshome-env .env-spec-cam-img-in img {
  left: -4.31%;
  top: 7.94%;
  width: 109.11%;
  height: 84.11%;
}

.prd-html-content .capshome-env .env-spec-cam-img-out {
  width: 166px;
  height: 130px;
}

.prd-html-content .capshome-env .env-spec-cam-img-out img {
  left: 50%;
  top: calc(50% - 2.5px);
  width: 189px;
  height: 189px;
  transform: translate(-50%, -50%);
}

.prd-html-content .capshome-env .env-spec-cam-tit {
  color: var(--prd-gray-40);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
}

.prd-html-content .capshome-env .env-spec-line {
  display: block;
  width: min(1100px, 76.39%);
  height: 1px;
  background: #efefef;
}

.prd-html-content .capshome-env .env-spec-table {
  display: flex;
  gap: 160px;
  justify-content: center;
  width: 100%;
}

.prd-html-content .capshome-env .env-spec-col {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.prd-html-content .capshome-env .env-spec-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

/* 시안: 라벨 87px 고정, 단 "AI 기능 지원"만 자연폭(nowrap)이라 87 로 묶으면 두 줄로 꺾입니다. */
.prd-html-content .capshome-env .env-spec-key {
  flex-shrink: 0;
  min-width: 87px;
  white-space: nowrap;
  color: var(--prd-gray-80);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.prd-html-content .capshome-env .env-spec-val {
  position: relative;
  padding-left: 21px;
  color: var(--prd-gray-40);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.prd-html-content .capshome-env .env-spec-val::before {
  content: "";
  position: absolute;
  left: 0;
  top: 6px;
  width: 1px;
  height: 16px;
  background: var(--prd-gray-mid);
}

.prd-html-content .capshome-env .env-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: fit-content;
  height: 64px;
  margin: 0 auto;
  padding: 18px 30px;
  border: 1.5px solid var(--prd-gray-40);
  border-radius: 8px;
  background: none;
  color: var(--prd-black);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
  list-style: none;
  cursor: pointer;
}

.prd-html-content .capshome-env .env-toggle::-webkit-details-marker {
  display: none;
}

.prd-html-content .capshome-env .env-toggle-ico {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  transition: transform 0.25s ease;
}

/* 2배 PNG(40x40)라 기존 SVG 크기(20x20)로 고정합니다. */
.prd-html-content .capshome-env .env-toggle-ico img {
  display: block;
  width: 20px;
  height: 20px;
}

.prd-html-content .capshome-env .env-details:not([open]) .env-toggle-ico {
  transform: rotate(180deg);
}

@media (prefers-reduced-motion: reduce) {
  .prd-html-content .capshome-env .env-feature,
  .prd-html-content .capshome-env .env-feature-1,
  .prd-html-content .capshome-env .env-feature-2 {
    transform: none;
    transition: none;
  }
}

@media (min-width: 1024px) and (max-width: 1439px) {
  /* 1440 기준 비율 그대로: 카드 584 → 40.556%, 간격 32 → 2.222%,
   오른쪽 카드 내림 180 → 12.5% (margin % 는 폭 기준) */
  .prd-html-content .capshome-env .con-inner {
    gap: 2.222%;
  }

  .prd-html-content .capshome-env .env-feature {
    width: 40.556%;
  }

  .prd-html-content .capshome-env .env-feature-2 {
    margin-top: 12.5%;
  }

  .prd-html-content .capshome-env .env-spec-cam-list {
    gap: min(400px, 18vw);
  }

  .prd-html-content .capshome-env .env-spec-table {
    gap: min(160px, 6vw);
    padding: 0 24px;
  }
}

@media (max-width: 1023px) {
  .prd-html-content .capshome-env {
    padding: 0 0 72px;
  }

  .prd-html-content .capshome-env .tit-wrap,
  .prd-html-content .capshome-env .con {
    padding: 0 20px;
  }

  .prd-html-content .capshome-env .tit {
    font-size: 25px;
    letter-spacing: -0.25px;
  }

  .prd-html-content .capshome-env .txt {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }

  .prd-html-content .capshome-env .con {
    margin-top: 40px;
  }

  .prd-html-content .capshome-env .con-inner {
    display: flex;
    flex-direction: column;
    gap: 40px;
    height: auto;
  }

  .prd-html-content .capshome-env .env-feature,
  .prd-html-content .capshome-env .env-feature-1,
  .prd-html-content .capshome-env .env-feature-2,
  .prd-html-content .capshome-env.on .env-feature-1,
  .prd-html-content .capshome-env.on .env-feature-2 {
    position: static;
    width: 100%;
    margin-top: 0;
    transform: none;
  }

  .prd-html-content .capshome-env .env-feature {
    gap: 20px;
  }

  .prd-html-content .capshome-env .env-feature-img {
    aspect-ratio: 335 / 381;
    border-radius: 8px;
    background: var(--prd-gray-line);
  }

  .prd-html-content .capshome-env .env-feature-1 .env-feature-bg {
    left: 50%;
    top: -6.82%;
    width: 139.4%;
    height: 134.38%;
    transform: translateX(-50%);
  }

  .prd-html-content .capshome-env .env-feature-1 .env-feature-photo {
    left: -66.27%;
    top: -17.06%;
    width: 237.31%;
    height: 134.38%;
  }

  .prd-html-content .capshome-env .env-feature-2 .env-feature-bg {
    left: -63.73%;
    top: -27.56%;
    width: 142.09%;
    height: 143.83%;
  }

  .prd-html-content .capshome-env .env-feature-2 .env-feature-photo {
    left: -64.48%;
    top: -0.26%;
    width: 235.52%;
    height: 100.26%;
  }

  .prd-html-content .capshome-env .env-feature-txt-wrap {
    gap: 12px;
    padding: 0 8px;
  }

  .prd-html-content .capshome-env .env-feature-tit {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.2px;
  }

  .prd-html-content .capshome-env .env-feature-txt {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }

  .prd-html-content .capshome-env .env-details {
    margin-top: 40px;
  }

  .prd-html-content .capshome-env .env-spec {
    gap: 40px;
    margin-bottom: 40px;
    padding: 40px 0;
    border: 0;
    border-radius: 8px;
    background: var(--prd-gray-bg);
  }

  .prd-html-content .capshome-env .env-spec-tit {
    display: block;
    color: var(--prd-black);
    font-weight: 700;
    font-size: 17px;
    line-height: 1.45;
    letter-spacing: -0.17px;
    text-align: center;
  }

  .prd-html-content .capshome-env .env-spec-cam-list {
    gap: 40px;
  }

  .prd-html-content .capshome-env .env-spec-cam {
    gap: 12px;
  }

  .prd-html-content .capshome-env .env-spec-cam-img-in {
    width: 80px;
    height: 80px;
  }

  .prd-html-content .capshome-env .env-spec-cam-img-in img {
    left: -4.31%;
    top: 9.38%;
    width: 109.05%;
    height: 81.25%;
  }

  .prd-html-content .capshome-env .env-spec-cam-img-out {
    width: 96px;
    height: 80px;
  }

  .prd-html-content .capshome-env .env-spec-cam-img-out img {
    left: calc(50% - 2px);
    top: calc(50% - 2px);
    width: 106px;
    height: 106px;
  }

  .prd-html-content .capshome-env .env-spec-cam-tit {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }

  /* 시안(1:14214): 카메라 ↔ 구분선 ↔ 사양 간격 28 (블록 gap 40 에서 -12).
   구분선은 카드 좌우 20px 안쪽(카드 335 기준 295px), #d8d8d8 입니다. */
  .prd-html-content .capshome-env .env-spec-line {
    width: calc(100% - 40px);
    margin: -12px 0;
    background: var(--prd-gray-line);
  }

  /* 시안: 사양 블록은 카드 좌우 20px 안쪽 */
  .prd-html-content .capshome-env .env-spec-label {
    display: block;
    width: calc(100% - 40px);
    margin-bottom: -20px;
    color: var(--prd-black);
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }

  .prd-html-content .capshome-env .env-spec-table {
    flex-direction: column;
    gap: 6px;
    width: calc(100% - 40px);
    padding: 0;
  }

  .prd-html-content .capshome-env .env-spec-col {
    gap: 6px;
  }

  .prd-html-content .capshome-env .env-spec-key {
    min-width: 72px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.42px;
  }

  .prd-html-content .capshome-env .env-spec-val {
    font-size: 13px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }

  .prd-html-content .capshome-env .env-spec-val::before {
    top: 6px;
    height: 13px;
  }

  .prd-html-content .capshome-env .env-toggle {
    width: 260px;
    height: 48px;
    padding: 0 28px;
    border-radius: 6px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }

  .prd-html-content .capshome-env .env-toggle-ico {
    width: 20px;
    height: 20px;
  }
}

/* ── 태블릿 폭(~1023) 보정 ──
 모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
 비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
 카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
/* 카드 이미지(335:381)가 화면 폭만큼 커지지 않게 묶습니다(좌우 패딩 20 포함). */
.prd-html-content .capshome-env .con {
  max-width: 590px;
  margin-left: auto;
  margin-right: auto;
}

/* 폰(191px)·닷은 가운데 고정인데 아래 활성 카드만 화면 폭을 다 써서 묶습니다. */
.prd-html-content .capshome-ai .tab-list {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}
}

/* ==================== 필드 4 : .prd-install-notice (parts/capshome-house-4.html) ==================== */
/* ========== capshome-common.css ========== */
.prd-install-notice .capshome-blind {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border-width: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}

/* ========== reveal.css ==========
   스크롤 등장 효과. JS 가 대상에 .is-reveal-pending 을 붙인 뒤에만 숨기므로
   JS 가 없거나 모션 줄이기를 켠 경우에는 처음부터 보입니다.
   from 만 두어 끝 값은 각 요소의 원래 opacity 를 따르고, transform 대신 translate 를 써서 기존 transform 과 겹치지 않습니다. */
.prd-install-notice .is-reveal-pending {
  opacity: 0 !important;
}

.prd-install-notice .is-revealed {
  animation: capshome-reveal-up 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) var(--reveal-delay, 0s) both;
}

@keyframes capshome-reveal-up {
  from {
    opacity: 0;
    translate: 0 40px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .prd-install-notice .is-reveal-pending {
    opacity: 1 !important;
  }

  .prd-install-notice .is-revealed {
    animation: none;
  }
}

.prd-install-notice .capshome-compensation br.mo,
.prd-install-notice .capshome-plan br.mo {
  display: none;
}

.prd-install-notice .capshome-compensation br.pc,
.prd-install-notice .capshome-plan br.pc {
  display: inline;
}

@media (max-width: 1023px) {
  .prd-install-notice .capshome-compensation br.mo,
  .prd-install-notice .capshome-plan br.mo {
    display: inline;
  }

  .prd-install-notice .capshome-compensation br.pc,
  .prd-install-notice .capshome-plan br.pc {
    display: none;
  }
}

.prd-install-notice .capshome-compensation,
.prd-install-notice .capshome-plan {
  --prd-black: #000000;
  --prd-gray-20: #1d1d1d;
  --prd-gray-40: #404040;
  --prd-gray-70: #555555;
  --prd-gray-80: #707070; /* 명도 대비 4.5:1 (시안 #717171) */
  --prd-gray-90: #6e6e6e; /* 명도 대비 4.5:1 (시안 #8e8e8e) */
  --prd-gray-line: #d8d8d8;
  --prd-gray-bg: #f5f5f5;
  --prd-white: #ffffff;
  --prd-blue: #025afc;
  --prd-blue-dark: #0041cc;
  --prd-blue-pale: rgba(204, 220, 255, 0.4);
  --prd-navy: #003594;
  --prd-line: #ccdcff;
  --prd-dim: rgba(204, 220, 255, 0.3);
}
/* ─────────────────────────────────────────────
 섹션 제목·본문 공통 (여백만 섹션에서 덮어씁니다)
 ───────────────────────────────────────────── */

.prd-install-notice .capshome-compensation .tit,
.prd-install-notice .capshome-plan .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}

.prd-install-notice .capshome-compensation .txt,
.prd-install-notice .capshome-plan .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}

/* ========== capshome-compensation.css ========== */
/* 왼쪽은 사고 상황, 오른쪽은 보상 안내입니다.
 두 카드 사이 점선 화살표는 PC에서만 보입니다. */
.prd-install-notice .capshome-compensation {
  overflow: hidden;
  width: 100%;
  padding: 140px 0;
  background: var(--prd-gray-bg);
}

.prd-install-notice .capshome-compensation .tit-wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.prd-install-notice .capshome-compensation .txt {
  margin-top: 12px;
  color: var(--prd-gray-40);
}

.prd-install-notice .capshome-compensation .con {
  max-width: 1520px;
  margin: 80px auto 0;
  padding: 0 40px;
}

.prd-install-notice .capshome-compensation .card-list {
  display: flex;
  flex-direction: column;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.prd-install-notice .capshome-compensation .card {
  display: flex;
  align-items: stretch;
}

.prd-install-notice .capshome-compensation .card-before,
.prd-install-notice .capshome-compensation .card-after {
  flex: 1;
  min-width: 0;
  height: 260px;
  border-radius: 12px;
}

.prd-install-notice .capshome-compensation .card-before {
  position: relative;
  overflow: hidden;
  padding: 40px;
  background: var(--prd-white);
}

.prd-install-notice .capshome-compensation .card-copy {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  /* 말풍선 오른쪽 끝이 카드 x=401(시안)에 오도록 copy 폭을 361 / 504(카드 584 - 패딩 80)로 잡습니다. */
  width: 71.6%;
}

.prd-install-notice .capshome-compensation .card-eyebrow {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}

.prd-install-notice .capshome-compensation .card-ask {
  color: var(--prd-gray-20);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.4;
  white-space: nowrap;
  opacity: 0.8;
}

/* 시안: 질문 문구 아래 29px, 말풍선 4개의 오른쪽 끝을 맞추고 문구 길이만큼 왼쪽으로 늘어납니다.
 (absolute 로 두면 기준이 .card-copy 가 되어 위치가 어긋나 흐름 배치로 둡니다. 29 - gap 8 = 21) */
.prd-install-notice .capshome-compensation .card-bubble {
  align-self: flex-end;
  margin-top: 21px;
  padding: 16px;
  border-radius: 12px 12px 0 12px;
  background: var(--prd-gray-70);
  box-shadow: 3px 3px 5px rgba(74, 97, 133, 0.05);
  color: var(--prd-white);
  font-weight: 600;
  font-size: 18px;
  line-height: 1.44;
  letter-spacing: -0.18px;
  text-align: right;
  white-space: nowrap;
}

.prd-install-notice .capshome-compensation .card-img {
  position: absolute;
  right: 17px;
  bottom: 9px;
  width: 166px;
  height: 166px;
}

.prd-install-notice .capshome-compensation .card-img picture {
  display: block;
  width: 100%;
  height: 100%;
}

.prd-install-notice .capshome-compensation .card-img img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  filter: drop-shadow(13px 1px 2.4px #e7ecf0);
}

.prd-install-notice .capshome-compensation .card-lightning .card-img {
  width: 171px;
  height: 171px;
  bottom: 12px;
}

.prd-install-notice .capshome-compensation .card-storm .card-img {
  right: -23px;
  bottom: 25px;
  width: 251px;
  height: 140px;
}

.prd-install-notice .capshome-compensation .card-earthquake .card-img {
  right: 21px;
  bottom: 10px;
  width: 159px;
  height: 159px;
}

.prd-install-notice .capshome-compensation .card-earthquake .card-img img {
  filter: drop-shadow(9px 1px 2.4px rgba(231, 236, 240, 0.95));
}

.prd-install-notice .capshome-compensation .card-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 32px;
}

/* 2배 PNG(72x16)라 시안 크기(36x8)로 고정합니다. (기존 SVG 와 같은 크기) */
.prd-install-notice .capshome-compensation .card-arrow img {
  display: block;
  flex-shrink: 0;
  width: 36px;
  max-width: none;
  height: 8px;
}

.prd-install-notice .capshome-compensation .card-after {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 40px 24px;
  background: var(--prd-navy);
  text-align: center;
}

.prd-install-notice .capshome-compensation .card-after-eyebrow {
  color: var(--prd-white);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
  opacity: 0.8;
}

.prd-install-notice .capshome-compensation .card-after-tit {
  color: var(--prd-white);
  font-weight: 700;
  font-size: 44px;
  line-height: 1.4;
  letter-spacing: -1.32px;
}

.prd-install-notice .capshome-compensation .note {
  margin-top: 60px;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  text-align: center;
  letter-spacing: -0.2px;
}

@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-install-notice .capshome-compensation .card-after-tit {
    font-size: 36px;
    letter-spacing: -1.08px;
  }

  /* 카드가 456px 까지 줄면 copy 폭(71.6%)도 줄어 긴 말풍선은 두 줄로 넘깁니다. */
  .prd-install-notice .capshome-compensation .card-bubble {
    max-width: 100%;
    white-space: normal;
    word-break: keep-all;
  }

  /* 아이콘이 그대로면 좁은 카드에서 질문 문구와 겹쳐 0.8 배로 줄입니다(오른쪽 아래 기준). */
  .prd-install-notice .capshome-compensation .card-img {
    transform: scale(0.8);
    transform-origin: right bottom;
  }
}

@media (max-width: 1023px) {
  .prd-install-notice .capshome-compensation {
    padding: 72px 0;
  }

  .prd-install-notice .capshome-compensation .tit-wrap,
  .prd-install-notice .capshome-compensation .con {
    padding: 0 20px;
  }

  .prd-install-notice .capshome-compensation .tit {
    font-size: 25px;
    letter-spacing: -0.25px;
  }

  .prd-install-notice .capshome-compensation .txt {
    margin-top: 8px;
    color: var(--prd-gray-70);
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }

  .prd-install-notice .capshome-compensation .con {
    margin-top: 40px;
  }

  .prd-install-notice .capshome-compensation .card-list {
    gap: 14px;
  }

  /* 위는 사고 카드, 아래는 보상 카드가 한 덩어리로 붙습니다. */
  .prd-install-notice .capshome-compensation .card {
    flex-direction: column;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.06);
  }

  .prd-install-notice .capshome-compensation .card-before,
  .prd-install-notice .capshome-compensation .card-after {
    height: auto;
    min-height: 0;
  }

  .prd-install-notice .capshome-compensation .card-before {
    display: flex;
    align-items: center;
    overflow: visible;
    padding: 24px 20px;
    border-radius: 8px 8px 0 0;
  }

  .prd-install-notice .capshome-compensation .card-copy {
    flex: 1;
    gap: 6px;
    width: auto;
    min-width: 0;
  }

  .prd-install-notice .capshome-compensation .card-eyebrow {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }

  /* 시안: "캡스홈 없을 때" ↔ 질문 2px, 질문 ↔ 부담 문구 6px (copy gap 6 에서 -4) */
  .prd-install-notice .capshome-compensation .card-ask {
    margin-top: -4px;
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: -0.18px;
    white-space: normal;
  }

  .prd-install-notice .capshome-compensation .card-bubble {
    position: static;
    align-self: auto;
    margin: 0;
    padding: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    color: var(--prd-gray-20);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    text-align: left;
    white-space: normal;
    opacity: 0.8;
  }

  /* 모바일 전용 이미지(*-m.webp, 2배)에 원 배경·아이콘·그림자가 합쳐져 있어 80px 칸을 그대로 채웁니다. */
  .prd-install-notice .capshome-compensation .card-img,
  .prd-install-notice .capshome-compensation .card-lightning .card-img,
  .prd-install-notice .capshome-compensation .card-storm .card-img,
  .prd-install-notice .capshome-compensation .card-earthquake .card-img {
    position: static;
    flex-shrink: 0;
    order: -1;
    width: 80px;
    height: 80px;
    margin-right: 16px;
    transform: none;
  }

  .prd-install-notice .capshome-compensation .card-img img,
  .prd-install-notice .capshome-compensation .card-earthquake .card-img img {
    width: 100%;
    height: 100%;
    filter: none;
  }

  .prd-install-notice .capshome-compensation .card-arrow {
    display: none;
  }

  .prd-install-notice .capshome-compensation .card-after {
    gap: 6px;
    padding: 24px 20px 28px;
    border-radius: 0 0 8px 8px;
  }

  .prd-install-notice .capshome-compensation .card-after-eyebrow {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
    opacity: 1;
  }

  .prd-install-notice .capshome-compensation .card-after-tit {
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -0.66px;
  }

  .prd-install-notice .capshome-compensation .note {
    margin-top: 40px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }
}

/* ========== capshome-plan.css ========== */
.prd-install-notice .capshome-plan {
  overflow: hidden;
  width: 100%;
  padding: 140px 0;
  background: var(--prd-white);
}

.prd-install-notice .capshome-plan .tit-wrap {
  max-width: 1520px;
  margin: 0 auto;
  padding: 0 40px;
  text-align: center;
}

.prd-install-notice .capshome-plan .txt {
  margin-top: 12px;
}

.prd-install-notice .capshome-plan .con {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1520px;
  margin: 80px auto 0;
  padding: 0 40px;
}

.prd-install-notice .capshome-plan .card {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: 594px;
  padding: 48px 50px;
  border-radius: 12px;
  background: var(--prd-blue-pale);
  text-align: center;
}

.prd-install-notice .capshome-plan .card-tit {
  margin: 0;
  color: var(--prd-blue-dark);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: -0.68px;
}

.prd-install-notice .capshome-plan .card-lead {
  margin: 6px 0 0;
  color: var(--prd-gray-40);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}

.prd-install-notice .capshome-plan .visual {
  position: relative;
  width: 100%;
  max-width: 494px;
  height: 252px;
  margin: 40px 0;
}

/* 시안: 원 중심이 비주얼 가운데보다 3px 위 */
.prd-install-notice .capshome-plan .glow {
  position: absolute;
  left: 50%;
  top: calc(50% - 3px);
  width: 294px;
  height: 294px;
  object-fit: contain;
  transform: translate(-50%, -50%);
}

.prd-install-notice .capshome-plan .chip {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  padding: 0 32px;
  border-radius: 90px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 3px 3px 10px rgba(74, 97, 133, 0.05);
  color: var(--prd-blue);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.6px;
  white-space: nowrap;
  animation: _capshome_chipFloat 3.6s ease-in-out infinite;
}

.prd-install-notice .capshome-plan .chip-1 {
  left: 50%;
  top: 16px;
  margin-left: -147px;
  animation-delay: 0s;
}
.prd-install-notice .capshome-plan .chip-2 {
  left: 50%;
  top: 86px;
  margin-left: 43px;
  animation-delay: -1.2s;
}
.prd-install-notice .capshome-plan .chip-3 {
  left: 50%;
  top: 176px;
  margin-left: -132px;
  animation-delay: -2.4s;
}

@keyframes _capshome_chipFloat {
  0%,
  100% {
    transform: translateY(-3px);
  }
  50% {
    transform: translateY(3px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .prd-install-notice .capshome-plan .chip {
    animation: none;
  }
}

.prd-install-notice .capshome-plan .reco {
  width: 100%;
  text-align: left;
}

.prd-install-notice .capshome-plan .reco-tit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: var(--prd-gray-20);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
}

.prd-install-notice .capshome-plan .reco-tit::before {
  flex-shrink: 0;
  width: 24px;
  height: 28px;
  background: url("https://images.ctfassets.net/6hqdqj4fjyeg/3D4I9SmOgzs8NneugEYUCp/d78093ec998374e5af702c0486075714/capshome-house-plan-check.webp") center / 24px 28px no-repeat;
  content: "";
}

.prd-install-notice .capshome-plan .reco-list {
  margin: 8px 0 0;
  padding-left: 36px;
}

/* 시안: 불릿 칸 6px + 간격 4px 뒤에 문구 (목록 왼쪽 36px 기준 문구 x=46) */
.prd-install-notice .capshome-plan .reco-list li {
  position: relative;
  padding-left: 10px;
  color: var(--prd-gray-40);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.prd-install-notice .capshome-plan .reco-list li::before {
  position: absolute;
  left: 1px;
  top: calc(0.8em - 2px);
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: currentColor;
  content: "";
}

.prd-install-notice .capshome-plan .price {
  width: 100%;
  margin-top: 40px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--prd-white);
}

.prd-install-notice .capshome-plan .price-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 12px;
  color: var(--prd-blue);
}

/* 시안: 라벨은 남은 폭을 쓰고(flex 1), 오른쪽 금액 블록은 줄지 않습니다. */
.prd-install-notice .capshome-plan .price-label {
  flex: 1 1 0;
  min-width: 0;
  word-break: keep-all;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  text-align: left;
}

/* flex-wrap 으로 두면 최대 폭이 "숫자+원부터+기준 문구" 한 줄 길이로 잡혀 라벨을 짓눌렀습니다.
 grid 로 [숫자][원부터] / [기준 문구] 2줄을 만들어 폭이 둘 중 긴 쪽으로만 잡히게 합니다.
 기준 문구가 더 길 때 남는 폭은 숫자 칸(1fr)이 받고, 숫자는 오른쪽 정렬로 원부터에 붙입니다. */
.prd-install-notice .capshome-plan .price-val {
  display: grid;
  grid-template-columns: 1fr auto;
  text-align: right;
  align-items: center;
  justify-content: end;
  flex-shrink: 0;
  column-gap: 2px;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.64px;
}

/* 시안: 34px 칸에 pt 3px 이라 숫자보다 살짝 아래에 앉습니다. */
.prd-install-notice .capshome-plan .price-val span {
  padding-top: 3px;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.prd-install-notice .capshome-plan .price-val small {
  display: block;
  grid-column: 1 / -1;
  justify-self: end;
  color: var(--prd-gray-80);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  text-align: right;
}

.prd-install-notice .capshome-plan .price-note {
  margin-top: 12px;
  color: var(--prd-gray-90);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.32px;
  text-align: center;
}

.prd-install-notice .capshome-plan .btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  max-width: 100%;
  height: 64px;
  margin-top: 40px;
  border: 1px solid var(--prd-white);
  border-radius: 8px;
  background: var(--prd-blue);
  color: var(--prd-white);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.6px;
}

.prd-install-notice .capshome-plan .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 64px;
  margin: 80px auto 0;
  padding: 0 30px;
  border: 1.5px solid var(--prd-gray-40);
  border-radius: 8px;
  background: none;
  color: var(--prd-black);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.6px;
  cursor: pointer;
}

.prd-install-notice .capshome-plan .btn-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

/* 2배 PNG(42x40). 시안 아이콘 영역 20px + 선 끝 여유분 그대로 21x20 */
.prd-install-notice .capshome-plan .btn-icon img {
  display: block;
  width: 21px;
  height: 20px;
}

.prd-install-notice .capshome-plan .banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  min-height: 225px;
  margin-top: 80px;
  padding: 24px 72px;
  border: 1px solid var(--prd-blue-pale);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 12%, #d8f1ff 100%);
}

.prd-install-notice .capshome-plan .banner-sub {
  margin: 0;
  color: var(--prd-gray-40);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}

.prd-install-notice .capshome-plan .banner-tit {
  margin: 2px 0 0;
  color: var(--prd-black);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.64px;
}

.prd-install-notice .capshome-plan .banner-tit span {
  color: var(--prd-blue);
}

/* 시안: 선물 상자는 x=811 에서 배너 아래로 잘려 나갑니다. PNG 가 이미 잘린 모양(231x168)이라
 배너 바닥에 붙이고 오른쪽에서 158px(1200 - 811 - 231) 띄웁니다. */
.prd-install-notice .capshome-plan .banner-img {
  position: absolute;
  right: 158px;
  bottom: 0;
  width: 231px;
}

.prd-install-notice .capshome-plan .banner-img img {
  display: block;
  width: 100%;
  height: auto;
}

/* 배너 전체가 /events/benefits 링크입니다. .con 이 가운데 정렬 플렉스라 폭과 위 여백을 배너 대신 링크가 갖고,
   호스트의 a 기본 스타일(밑줄·색)을 끊습니다. */
.prd-install-notice .capshome-plan .banner-link {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin-top: 80px;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}

.prd-install-notice .capshome-plan .banner-link .banner {
  margin-top: 0;
}

.prd-install-notice .capshome-plan .banner-link:focus-visible {
  outline: 2px solid var(--prd-blue);
  outline-offset: 4px;
}

.capshome-plan.popup-portal {
  /* 포털은 .prd-install-notice 밖이라 컨테이너 토큰이 상속되지 않습니다. 여기서 다시 선언합니다. */
  --prd-black: #000000;
  --prd-gray-40: #404040;
  --prd-gray-80: #707070; /* 명도 대비 4.5:1 (시안 #717171) */
  --prd-gray-90: #6e6e6e; /* 명도 대비 4.5:1 (시안 #8e8e8e) */
  --prd-gray-line: #d8d8d8;
  --prd-white: #ffffff;
  width: auto;
  padding: 0;
  background: none;
}

.capshome-plan .popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  touch-action: none;
}

.capshome-plan .popup.is-active {
  display: flex;
}

.capshome-plan .popup-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  touch-action: none;
}

.capshome-plan .popup-box {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  width: 720px;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 12px;
  background: var(--prd-white);
  box-shadow: 0 4px 32px rgba(53, 58, 63, 0.1);
  touch-action: pan-x pan-y;
}

.capshome-plan .popup-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  height: 74px;
  padding: 0 24px;
  border-bottom: 1px solid #efefef;
}

.capshome-plan .popup-tit {
  margin: 0;
  color: var(--prd-black);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}

.capshome-plan .popup-close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  border: 0;
  background: none;
  cursor: pointer;
}

.capshome-plan .popup-close img {
  display: block;
}

.capshome-plan .popup-body {
  overflow: auto;
  padding: 20px 24px 40px;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}

.capshome-plan .popup-foot {
  display: none;
}

.capshome-plan .info-list {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.capshome-plan .info-row {
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.capshome-plan .info-row dt {
  flex-shrink: 0;
  width: 120px;
  color: var(--prd-gray-80);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.capshome-plan .info-row dd {
  position: relative;
  flex: 1;
  min-width: 0;
  padding-left: 12px;
  color: var(--prd-gray-40);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}

.capshome-plan .info-row dd::before {
  content: "";
  position: absolute;
  left: 0;
  top: 4px;
  width: 1px;
  height: 16px;
  background: var(--prd-gray-line);
}

/* 시안: 한 항목 안의 줄은 붙어 있고(피해보상·부가서비스 제목+설명),
 본문 바로 아래 회색 주석만 6px, 부가서비스의 덩어리(info-block) 사이는 12px 띄웁니다. */
.capshome-plan .info-row dd > p + p.info-sub {
  margin-top: 6px;
}

.capshome-plan .info-row dd .info-block + .info-block {
  margin-top: 12px;
}

.capshome-plan .info-row dd b {
  font-weight: 600;
}

.capshome-plan .info-sub {
  color: var(--prd-gray-90);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.42px;
}

.capshome-plan .info-note {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--prd-gray-line);
  color: var(--prd-gray-90);
  font-weight: 500;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.42px;
}

/* 노트북 폭(1024~1799, 1920 모니터 배율 125% 인 1536 등 포함)은 화면 높이가 낮아 카드 전체가 한 화면에 들어오도록 줄입니다. 1800 이상 PC 는 1200px 기준 그대로입니다.
   칩 묶음은 높이 150px 배치(모바일과 같은 좌표)를 씁니다. */
@media (min-width: 1024px) and (max-width: 1799px) {
  .prd-install-notice .capshome-plan {
    padding: 80px 0;
  }

  .prd-install-notice .capshome-plan .con {
    margin-top: 40px;
  }

  .prd-install-notice .capshome-plan .card {
    max-width: 495px;
    padding: 28px 32px;
  }

  .prd-install-notice .capshome-plan .card-tit {
    font-size: 26px;
    letter-spacing: -0.52px;
  }

  .prd-install-notice .capshome-plan .card-lead {
    margin-top: 4px;
    font-size: 16px;
    letter-spacing: -0.16px;
  }

  .prd-install-notice .capshome-plan .visual {
    height: 150px;
    margin: 16px 0 20px;
  }

  .prd-install-notice .capshome-plan .glow {
    top: 50%;
    width: 150px;
    height: 150px;
  }

  .prd-install-notice .capshome-plan .chip {
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .prd-install-notice .capshome-plan .chip-1 {
    top: 14px;
    margin-left: -100px;
  }
  .prd-install-notice .capshome-plan .chip-2 {
    top: 56px;
    margin-left: 30px;
  }
  .prd-install-notice .capshome-plan .chip-3 {
    top: 99px;
    margin-left: -74px;
  }

  .prd-install-notice .capshome-plan .reco-tit {
    gap: 8px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .prd-install-notice .capshome-plan .reco-tit::before {
    width: 20px;
    height: 20px;
    background-size: 18px auto;
  }

  .prd-install-notice .capshome-plan .reco-list {
    margin-top: 4px;
    padding-left: 28px;
  }

  .prd-install-notice .capshome-plan .reco-list li {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.14px;
  }

  .prd-install-notice .capshome-plan .price {
    margin-top: 20px;
    padding: 8px 16px;
  }

  .prd-install-notice .capshome-plan .price-total {
    gap: 8px 16px;
    padding: 10px 4px;
  }

  .prd-install-notice .capshome-plan .price-label {
    font-size: 16px;
    letter-spacing: -0.16px;
  }

  .prd-install-notice .capshome-plan .price-val {
    font-size: 24px;
    letter-spacing: -0.48px;
  }

  .prd-install-notice .capshome-plan .price-val span {
    padding-top: 2px;
    font-size: 15px;
    letter-spacing: -0.15px;
  }

  .prd-install-notice .capshome-plan .price-val small {
    font-size: 13px;
    letter-spacing: -0.26px;
  }

  .prd-install-notice .capshome-plan .price-note {
    margin-top: 8px;
    font-size: 13px;
    letter-spacing: -0.26px;
  }

  .prd-install-notice .capshome-plan .btn-cta {
    width: 200px;
    height: 48px;
    margin-top: 20px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .prd-install-notice .capshome-plan .btn-more {
    height: 48px;
    margin-top: 40px;
    padding: 0 24px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .prd-install-notice .capshome-plan .banner,
  .prd-install-notice .capshome-plan .banner-link {
    max-width: 1000px;
  }

  .prd-install-notice .capshome-plan .banner {
    min-height: 160px;
    padding: 20px 48px;
  }

  .prd-install-notice .capshome-plan .banner-link {
    margin-top: 40px;
  }

  .prd-install-notice .capshome-plan .banner-sub {
    font-size: 16px;
    letter-spacing: -0.16px;
  }

  .prd-install-notice .capshome-plan .banner-tit {
    font-size: 24px;
    letter-spacing: -0.48px;
  }

  .prd-install-notice .capshome-plan .banner-img {
    right: 120px;
    width: 170px;
  }
}

/* PC(1800 이상)는 폭·글자 크기는 1200px 기준 그대로 두고, 1080 화면에 카드가 다 들어오도록 세로 여백만 줄입니다. */
@media (min-width: 1800px) {
  .prd-install-notice .capshome-plan {
    padding: 100px 0;
  }

  .prd-install-notice .capshome-plan .con {
    margin-top: 56px;
  }

  .prd-install-notice .capshome-plan .card {
    padding-top: 36px;
    padding-bottom: 36px;
  }

  .prd-install-notice .capshome-plan .visual {
    height: 200px;
    margin: 28px 0;
  }

  .prd-install-notice .capshome-plan .glow {
    width: 240px;
    height: 240px;
  }

  .prd-install-notice .capshome-plan .chip-1 {
    top: 10px;
  }
  .prd-install-notice .capshome-plan .chip-2 {
    top: 68px;
  }
  .prd-install-notice .capshome-plan .chip-3 {
    top: 136px;
  }

  .prd-install-notice .capshome-plan .price {
    margin-top: 28px;
  }

  .prd-install-notice .capshome-plan .price-total {
    padding-top: 12px;
    padding-bottom: 12px;
  }

  .prd-install-notice .capshome-plan .btn-cta {
    margin-top: 28px;
  }
}

@media (max-width: 1023px) {
  .prd-install-notice .capshome-plan {
    padding: 72px 0;
  }

  .prd-install-notice .capshome-plan .tit-wrap,
  .prd-install-notice .capshome-plan .con {
    padding: 0 20px;
  }

  .prd-install-notice .capshome-plan .tit {
    font-size: 25px;
    letter-spacing: -0.25px;
  }

  .prd-install-notice .capshome-plan .txt {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }

  .prd-install-notice .capshome-plan .con {
    margin-top: 40px;
  }

  .prd-install-notice .capshome-plan .card {
    padding: 28px 20px;
    border-radius: 8px;
  }

  .prd-install-notice .capshome-plan .card-tit {
    font-weight: 600;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -0.22px;
  }

  .prd-install-notice .capshome-plan .card-lead {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }

  .prd-install-notice .capshome-plan .visual {
    height: 150px;
    margin: 20px 0 0;
  }

  .prd-install-notice .capshome-plan .glow {
    top: 50%;
    width: 150px;
    height: 150px;
  }

  .prd-install-notice .capshome-plan .chip {
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .prd-install-notice .capshome-plan .chip-1 {
    top: 14px;
    margin-left: -100px;
  }
  .prd-install-notice .capshome-plan .chip-2 {
    top: 56px;
    margin-left: 30px;
  }
  .prd-install-notice .capshome-plan .chip-3 {
    top: 99px;
    margin-left: -74px;
  }

  .prd-install-notice .capshome-plan .reco {
    margin-top: 20px;
  }

  .prd-install-notice .capshome-plan .reco-tit {
    gap: 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }

  /* 체크 PNG 는 24x28(위아래 여백 포함)이라 폭 기준으로 줄입니다. */
  .prd-install-notice .capshome-plan .reco-tit::before {
    width: 20px;
    height: 20px;
    background-size: 16px auto;
  }

  /* 문구 시작(x=24)은 기존과 같게: 목록 14 + 불릿 칸 10 */
  .prd-install-notice .capshome-plan .reco-list {
    margin-top: 6px;
    padding-left: 8px;
  }

  .prd-install-notice .capshome-plan .reco-list li {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }

  .prd-install-notice .capshome-plan .reco-list li::before {
    top: calc(0.75em - 2px);
    width: 3px;
    height: 3px;
  }

  .prd-install-notice .capshome-plan .price {
    margin-top: 20px;
    padding: 20px 16px;
    border-radius: 6px;
  }

  .prd-install-notice .capshome-plan .price-total {
    padding: 0 4px;
    gap:12px;
  }

  .prd-install-notice .capshome-plan .price-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.28px;
  }

  .prd-install-notice .capshome-plan .price-val {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
  }

  .prd-install-notice .capshome-plan .price-val span {
    padding-top: 0;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.45;
  }

  .prd-install-notice .capshome-plan .price-val small {
    font-size: 11px;
    line-height: 1.27;
    letter-spacing: -0.22px;
  }

  .prd-install-notice .capshome-plan .price-note {
    margin-top: 12px;
    font-weight: 500;
    font-size: 12px;
    line-height: 1.33;
    letter-spacing: -0.12px;
  }

  .prd-install-notice .capshome-plan .btn-cta {
    width: 260px;
    height: 48px;
    margin-top: 20px;
    border-radius: 6px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .prd-install-notice .capshome-plan .btn-more {
    width: 260px;
    height: 48px;
    margin-top: 40px;
    padding: 0 28px;
    border-radius: 6px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .prd-install-notice .capshome-plan .btn-icon {
    width: 20px;
    height: 20px;
  }

  .prd-install-notice .capshome-plan .banner {
    position: relative;
    display: block;
    height: 196px;
    margin-top: 40px;
    padding: 23px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #d8f1ff 100%);
  }

  .prd-install-notice .capshome-plan .banner-sub {
    color: var(--prd-black);
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.42px;
    opacity: 0.5;
  }

  .prd-install-notice .capshome-plan .banner-tit {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -0.66px;
  }

  .prd-install-notice .capshome-plan .banner-img {
    position: absolute;
    right: 27px;
    bottom: 20px;
    width: 72px;
  }

  .prd-install-notice .capshome-plan .banner-link {
    margin-top: 40px;
    border-radius: 8px;
  }

  .capshome-plan .popup {
    align-items: flex-end;
    padding: 0;
  }

  .capshome-plan .popup-box {
    width: 100%;
    height: calc(100% - 105px);
    max-height: calc(100% - 105px);
    border-radius: 12px 12px 0 0;
  }

  .capshome-plan .popup-head {
    height: 56px;
    padding: 0 20px;
  }

  .capshome-plan .popup-tit {
    font-size: 16px;
    letter-spacing: -0.32px;
  }

  .capshome-plan .popup-body {
    padding: 20px 20px 24px;
  }

  .capshome-plan .popup-foot {
    display: block;
    flex-shrink: 0;
    padding: 16px 20px max(34px, env(safe-area-inset-bottom));
    background: var(--prd-white);
  }

  .capshome-plan .popup-confirm {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 6px;
    background: var(--prd-black);
    color: var(--prd-white);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    cursor: pointer;
  }

  .capshome-plan .info-row dt {
    width: 88px;
    font-size: 14px;
  }

  .capshome-plan .info-row dd {
    font-size: 14px;
  }
}

/* 모바일 팝업: apartment-villa 와 같이 딤은 서서히, 상자는 아래에서 위로 올라옵니다.
 팝업이 display:none 에서 바뀌므로 transition 대신 keyframes 를 씁니다. */
@media (max-width: 1023px) {
  .capshome-plan .popup.is-active .popup-dim {
    animation: capshome-popup-dim-in 0.3s ease-out;
  }

  .capshome-plan .popup.is-active .popup-box {
    animation: capshome-popup-sheet-up 0.45s cubic-bezier(0.22, 1, 0.36, 1);
  }
}

@keyframes capshome-popup-dim-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes capshome-popup-sheet-up {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .capshome-plan .popup.is-active .popup-dim,
  .capshome-plan .popup.is-active .popup-box {
    animation: none;
  }
}

/* 모바일 팝업 본문 (시안 1:14719). PC 값이 그대로 내려오지 않도록 모바일 값을 다시 잡습니다. */
@media (max-width: 1023px) {
  .capshome-plan .popup-body {
    padding: 20px;
  }

  .capshome-plan .popup-foot {
    padding-bottom: max(32px, env(safe-area-inset-bottom));
  }

  .capshome-plan .info-list {
    gap: 12px;
  }

  /* 라벨 77 + 12 + 구분선 + 12 + 값 */
  .capshome-plan .info-row {
    gap: 12px;
  }

  .capshome-plan .info-row dt {
    width: 77px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.42px;
  }

  .capshome-plan .info-row dd {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }

  .capshome-plan .info-row dd::before {
    top: 6px;
    height: 14px;
    background: #c6c6c6;
  }

  .capshome-plan .info-sub,
  .capshome-plan .info-note {
    color: var(--prd-gray-80);
    font-weight: 500;
    font-size: 12px;
    line-height: 1.33;
    letter-spacing: -0.12px;
  }

  .capshome-plan .info-row dd > p + p.info-sub {
    margin-top: 2px;
  }

  .capshome-plan .info-row dd .info-block + .info-block {
    margin-top: 8px;
  }

  /* 모바일 시안은 안내문 위 구분선 없이 16px 만 띄웁니다. */
  .capshome-plan .info-note {
    margin-top: 16px;
    padding-top: 0;
    border-top: 0;
  }
}

/* ── 태블릿 폭(~1023) 보정 ──
 모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
 비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
 카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
.prd-install-notice .capshome-compensation .card-list {
  max-width: 550px;
  margin-left: auto;
  margin-right: auto;
}

/* 배너 높이 196px 고정이라 위 구독 카드(최대 594) 폭에 맞춥니다. */
.prd-install-notice .capshome-plan .banner {
  max-width: 594px;
  margin-left: auto;
  margin-right: auto;
}
}