@charset "utf-8";

/* 캡스홈 아파트, 빌라 PDP 레이아웃 (필드 1~6 통합본) */

/* ==================== 필드 1 : .prd-service-intro (css/prd-service-intro.css) ==================== */
/* ========== capshome-common.css ========== */
/* 모든 캡스홈 PDP 섹션이 함께 쓰는 값·스타일입니다.
   섹션 CSS 보다 먼저 불러오세요.
   PDP 규칙상 html·body·* 같은 전역 선택자는 쓰지 않고, 섹션 클래스에만 걸어 둡니다. */
.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-features br.mo,
.prd-service-intro .capshome-relief br.mo {
  display: none;
}
.prd-service-intro .capshome-visual br.pc,
.prd-service-intro .capshome-intro br.pc,
.prd-service-intro .capshome-features br.pc,
.prd-service-intro .capshome-relief 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-features br.mo,
  .prd-service-intro .capshome-relief br.mo {
    display: inline;
  }
  .prd-service-intro .capshome-visual br.pc,
  .prd-service-intro .capshome-intro br.pc,
  .prd-service-intro .capshome-features br.pc,
  .prd-service-intro .capshome-relief br.pc {
    display: none;
  }
}
.prd-service-intro .capshome-features,
.prd-service-intro .capshome-relief {
  --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-features .tit,
.prd-service-intro .capshome-relief .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}
.prd-service-intro .capshome-features .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;
}
.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 .txt-wrap {
  position: absolute;
  left: 240px;
  top: 50%;
  z-index: 2;
  transform: translateY(-50%);
  text-shadow: 0 0 4px rgba(0, 0, 0, 0.15);
}
.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;
}
.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;
}
.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) {
  /* 시안 375x630. 높이를 고정하면 넓은 모바일·태블릿(~1023)에서 납작해져
     폭에 비례해 키우되(168vw = 630/375) 화면보다 지나치게 길어지지 않게 900px 에서 멈춥니다. */
  .prd-service-intro .capshome-visual {
    height: clamp(630px, 168vw, 900px);
    aspect-ratio: auto;
  }
  .prd-service-intro .capshome-visual .visual-img {
    object-position: center 35%;
  }
  .prd-service-intro .capshome-visual .txt-wrap {
    left: 20px;
    right: 20px;
    top: 60px;
    transform: none;
    text-shadow: none;
  }
  .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;
  }
  .prd-service-intro .capshome-visual .txt-wrap .txt {
    margin-top: 6px;
    /* 시안은 흰색 90% 입니다. opacity 는 등장 애니메이션이 쓰므로 색으로 줍니다. */
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.16px;
    word-break: keep-all;
  }
}
/* ── 태블릿 폭(~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);
    top: clamp(60px, 16vw, 96px);
  }
  .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;
  }
}
/* ========== capshome-features.css ========== */
/* capshome-features + capshome-relief 를 한 섹션으로 묶는 껍데기입니다.
   두 블록은 각자 클래스로 스코프가 나뉘어 있어 스타일이 섞이지 않습니다. */
.prd-service-intro .capshome-intro {
  width: 100%;
  background: radial-gradient(100% 100% at 49.87% 0%, #F0F5FF 0%, #FFF 100%);
}
.prd-service-intro .capshome-features {
  width: 100%;
  padding: 140px 40px;
}
.prd-service-intro .capshome-features .tit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto 80px;
  text-align: center;
}
.prd-service-intro .capshome-features .sub-tit {
  margin: 0;
  color: var(--prd-gray-40);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: -0.68px;
}
.prd-service-intro .capshome-features .tit {
  margin: 6px 0 0;
}
.prd-service-intro .capshome-features .txt {
  margin: 24px 0 0;
}
.prd-service-intro .capshome-features .con {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  max-width: 1340px;
  min-height: 540px;
  margin: 0 auto;
  padding: 0;
}
.prd-service-intro .capshome-features .circle-wrap {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 0;
  /* 시안 1340px 폭에서 580px 이 되도록 비율을 맞춥니다. */
  width: min(580px, 43.3%);
  height: auto;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: url("https://images.ctfassets.net/6hqdqj4fjyeg/7vhijMVsWR9Go8S9H3kQbP/58a3ae1ffcb09a118f820747ceb21e63/capshome-apartment-villa-logo.png?fm=webp") center / contain no-repeat;
  pointer-events: none;
}
.prd-service-intro .capshome-features .card-col {
  position: relative;
  z-index: 1;
  display: flex;
  flex: 0 1 420px;
  flex-direction: column;
  gap: 40px;
  width: 100%;
  max-width: 420px;
  min-width: 0;
}
.prd-service-intro .capshome-features .card {
  display: flex;
  overflow: hidden;
  width: 100%;
  height: auto;
  aspect-ratio: 420 / 172;
  background: var(--prd-white);
  border-radius: 12px;
  box-shadow: 8px 15px 30px 0 rgba(0, 0, 0, 0.06);
}
.prd-service-intro .capshome-features .card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 42.857%;
  width: 42.857%;
  height: auto;
  align-self: stretch;
  min-width: 0;
}
.prd-service-intro .capshome-features .card-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.prd-service-intro .capshome-features .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  width: auto;
  padding: 16px 20px;
}
.prd-service-intro .capshome-features .card-tit {
  margin: 0;
  color: var(--prd-black);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.22px;
}
.prd-service-intro .capshome-features .card-txt {
  margin: 8px 0 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.16px;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-service-intro .capshome-features .con {
    min-height: 0;
  }
  .prd-service-intro .capshome-features .circle-wrap {
    width: min(580px, 40%);
  }
  .prd-service-intro .capshome-features .card-col {
    gap: 24px;
  }
  .prd-service-intro .capshome-features .card-tit {
    font-size: 18px;
    letter-spacing: -0.18px;
  }
  .prd-service-intro .capshome-features .card-txt {
    font-size: 14px;
    letter-spacing: -0.14px;
  }
}
@media (max-width: 1023px) {
  .prd-service-intro .capshome-features {
    padding: 72px 20px;
  }
  .prd-service-intro .capshome-features .tit-wrap {
    align-items: center;
    margin-bottom: 40px;
    text-align: center;
  }
  .prd-service-intro .capshome-features .sub-tit {
    color: var(--prd-gray-70);
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.2px;
  }
  .prd-service-intro .capshome-features .tit {
    margin-top: 6px;
    font-size: 26px;
    line-height: 1.4;
    letter-spacing: -0.26px;
    word-break: keep-all;
  }
  .prd-service-intro .capshome-features .txt {
    margin-top: 12px;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.48px;
    word-break: keep-all;
  }
  /* 시안은 카드 4장을 행 단위(2×2)로 놓아 같은 행 카드 높이를 맞춥니다.
     열(.card-col)을 풀어서 카드가 바로 격자 칸이 되게 하고, DOM 순서(열 기준)를 세로로 채웁니다. */
  .prd-service-intro .capshome-features .con {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto auto;
    grid-auto-flow: column;
    align-items: stretch;
    gap: 20px 12px;
    min-height: 0;
    padding: 0;
  }
  /* 모바일 시안에는 원형 그림이 없습니다. */
  .prd-service-intro .capshome-features .circle-wrap {
    display: none;
  }
  .prd-service-intro .capshome-features .card-col {
    display: contents;
  }
  .prd-service-intro .capshome-features .card {
    flex-direction: column;
    width: 100%;
    height: auto;
    aspect-ratio: auto;
    border-radius: 8px;
    box-shadow: 8px 15px 30px rgba(0, 0, 0, 0.06);
  }
  /* PC 이미지(180×172 @2x)를 카드 폭에 맞춰 줄이고 위로 올려 아래를 자릅니다.
     높이·올리는 값을 시안(카드 폭 161.5, 높이 132) 기준 비율로 잡아 폭이 커져도 같은 모양입니다.
     margin % 는 폭 기준이라 -3 / -9 / -6px 을 161.5 로 나눈 값입니다. */
  .prd-service-intro .capshome-features .card-img {
    display: block;
    overflow: hidden;
    flex: none;
    width: 100%;
    height: auto;
    aspect-ratio: 161.5 / 132;
  }
  .prd-service-intro .capshome-features .card-img img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: initial;
  }
  .prd-service-intro .capshome-features .card-1 .card-img img { margin-top: -1.86%; }
  .prd-service-intro .capshome-features .card-2 .card-img img,
  .prd-service-intro .capshome-features .card-4 .card-img img { margin-top: -5.57%; }
  /* APP 화면 카드는 휴대폰이 작게 들어가 가운데에 둡니다. */
  .prd-service-intro .capshome-features .card-3 .card-img img {
    width: 92.5%;
    margin: -3.72% auto 0;
  }
  .prd-service-intro .capshome-features .card-body {
    width: auto;
    padding: 20px 16px;
  }
  .prd-service-intro .capshome-features .card-tit {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }
  .prd-service-intro .capshome-features .card-txt {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
    word-break: keep-all;
  }
}
/* ========== capshome-relief.css ========== */
.prd-service-intro .capshome-relief {
  --layout-max: 1920px;
  --layout-width: min(var(--layout-max), 100vw);
  --card-w: min(1140px, calc(var(--layout-width) - 300px));
  overflow: hidden;
  width: 100%;
  padding: 20px 40px 140px;
}
.prd-service-intro .capshome-relief .tit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto 80px;
  text-align: center;
}
.prd-service-intro .capshome-relief .sub-tit {
  margin: 0;
  color: var(--prd-gray-40);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: -0.68px;
}
.prd-service-intro .capshome-relief .tit {
  margin: 6px 0 0;
}
.prd-service-intro .capshome-relief .con {
  position: relative;
  max-width: 1440px;
  margin: 0 auto;
}
.prd-service-intro .capshome-relief .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);
}
.prd-service-intro .capshome-relief .card {
  position: relative;
  flex: 0 0 var(--card-w);
  width: var(--card-w);
  height: auto;
  aspect-ratio: 1140 / 602;
  overflow: hidden;
  border-radius: 12px;
  background: #d8d8d8;
}
.prd-service-intro .capshome-relief .card-img {
  position: absolute;
  inset: 0;
}
.prd-service-intro .capshome-relief .card-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.prd-service-intro .capshome-relief .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prd-service-intro .capshome-relief .card-body {
  position: absolute;
  left: min(50px, 4.386%);
  top: 50%;
  width: min(422px, 40%);
  transform: translateY(-50%);
}
.prd-service-intro .capshome-relief .card-cate {
  margin: 0;
  color: var(--prd-white);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
  opacity: 0;
  transform: translateY(50%);
}
.prd-service-intro .capshome-relief .card-tit {
  margin: 6px 0 0;
  color: var(--prd-white);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.24px;
  opacity: 0;
  transform: translateY(50%);
}
.prd-service-intro .capshome-relief .card-txt {
  margin: 12px 0 0;
  color: var(--prd-white);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
  opacity: 0;
  transform: translateY(50%);
}
/* 모두 아래에서 위로 올라옵니다. 분류·제목이 먼저 함께, 본문은 0.3초 뒤에 이어서. */
.prd-service-intro .capshome-relief .card.is-shown .card-cate,
.prd-service-intro .capshome-relief .card.is-shown .card-tit,
.prd-service-intro .capshome-relief .card.is-shown .card-txt {
  opacity: 1;
  transform: translateY(0);
  transition: opacity 1s 0.6s, transform 1s 0.6s;
}
.prd-service-intro .capshome-relief .card.is-shown .card-txt {
  transition-delay: 0.9s;
}
.prd-service-intro .capshome-relief .slide-btn {
  position: absolute;
  top: calc(var(--card-w) * 602 / 1140 / 2);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border: 1px solid var(--prd-black);
  border-radius: 50%;
  background: transparent;
  transform: translateY(-50%);
}
.prd-service-intro .capshome-relief .slide-prev { left: 0; }
.prd-service-intro .capshome-relief .slide-next {
  left: auto;
  right: 0;
}
.prd-service-intro .capshome-relief .slide-prev:disabled,
.prd-service-intro .capshome-relief .slide-next:disabled {
  display: none;
}
.prd-service-intro .capshome-relief .slide-btn:disabled {
  border-color: #d8d8d8;
  cursor: default;
}
.prd-service-intro .capshome-relief .slide-btn img {
  width: 28px;
  height: 28px;
}
.prd-service-intro .capshome-relief .slide-prev img {
  transform: rotate(180deg);
}
/* 점 인디케이터와 자동 재생 정지·시작 버튼을 한 줄로 묶습니다. */
.prd-service-intro .capshome-relief .slide-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-top: 40px;
}
.prd-service-intro .capshome-relief .slide-dot {
  display: flex;
  justify-content: center;
  gap: 0;
}
/* 정지 상태 아이콘(두 줄)은 ::before·::after, 시작 상태(삼각형)는 ::before 하나로 그립니다. 음수 마진으로 줄 높이는 점과 같게 둡니다. */
.prd-service-intro .capshome-relief .slide-toggle {
  position: relative;
  width: 24px;
  height: 24px;
  margin: -8px 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
.prd-service-intro .capshome-relief .slide-toggle[hidden] {
  display: none;
}
.prd-service-intro .capshome-relief .slide-toggle::before,
.prd-service-intro .capshome-relief .slide-toggle::after {
  position: absolute;
  top: 50%;
  width: 2px;
  height: 10px;
  background: var(--prd-black);
  transform: translateY(-50%);
  content: "";
}
.prd-service-intro .capshome-relief .slide-toggle::before {
  left: 8px;
}
.prd-service-intro .capshome-relief .slide-toggle::after {
  right: 8px;
}
.prd-service-intro .capshome-relief .slide-toggle.is-paused::before {
  left: 9px;
  width: 0;
  height: 0;
  border-top: 5px solid transparent;
  border-bottom: 5px solid transparent;
  border-left: 8px solid var(--prd-black);
  background: none;
}
.prd-service-intro .capshome-relief .slide-toggle.is-paused::after {
  display: none;
}
.prd-service-intro .capshome-relief .slide-dot button {
  /* 터치 영역: 높이 24px, 폭은 점+간격(8+12)으로 채워 점 위치는 그대로 두고, 음수 마진으로 줄 높이도 그대로 둡니다. */
  position: relative;
  width: 20px;
  height: 24px;
  margin: -8px 0;
  padding: 0;
  border: 0;
  background: none;
}
.prd-service-intro .capshome-relief .slide-dot button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8d8d8;
  transform: translate(-50%, -50%);
  content: "";
}
.prd-service-intro .capshome-relief .slide-dot button.on::before {
  background: var(--prd-black);
}
@media (max-width: 1023px) {
  .prd-service-intro .capshome-relief {
    padding: 72px 20px;
  }
  .prd-service-intro .capshome-relief .slide-view {
    width: auto;
    margin-left: 0;
    overflow: visible;
  }
  .prd-service-intro .capshome-relief .tit-wrap {
    align-items: center;
    margin-bottom: 40px;
    text-align: center;
  }
  .prd-service-intro .capshome-relief .sub-tit {
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -0.2px;
    word-break: keep-all;
  }
  .prd-service-intro .capshome-relief .tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
    word-break: keep-all;
  }
  .prd-service-intro .capshome-relief .card {
    flex-basis: 100%;
    width: auto;
    height: 480px;
    aspect-ratio: auto;
    border-radius: 8px;
  }
  .prd-service-intro .capshome-relief .card-body {
    left: 20px;
    right: 20px;
    top: auto;
    bottom: 28px;
    width: auto;
    transform: none;
  }
  .prd-service-intro .capshome-relief .card-cate {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.45;
  }
  .prd-service-intro .capshome-relief .card-tit {
    margin-top: 6px;
    font-size: 20px;
    letter-spacing: -0.18px;
  }
  .prd-service-intro .capshome-relief .card-txt {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
    word-break: keep-all;
  }
  .prd-service-intro .capshome-relief .slide-btn {
    display: none;
  }
  .prd-service-intro .capshome-relief .slide-ctrl {
    margin-top: 24px;
  }
  /* 모바일은 이전/다음 화살표가 없어 점이 유일한 탭 수단이므로 24×24px 로 키웁니다(점 중심 간격 24px). */
  .prd-service-intro .capshome-relief .slide-dot button {
    width: 24px;
    margin: -9px 0;
  }
  .prd-service-intro .capshome-relief .slide-dot button::before {
    width: 6px;
    height: 6px;
  }
}
/* ── 태블릿 폭(~1023) 보정 ──
   모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
   비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
   카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (min-width: 600px) and (max-width: 1023px) {
  /* 카드 높이 480px 고정이라 폭이 넓으면 납작해 슬라이드 폭을 묶습니다. 묶은 밖으로 옆 장이 비치지 않게 자릅니다. */
  .prd-service-intro .capshome-relief .con {
    max-width: 550px;
    overflow: hidden;
  }
}

/* ==================== 필드 2 : .prd-feature-intro (css/prd-feature-intro.css) ==================== */
/* ========== capshome-common.css ========== */
/* 모든 캡스홈 PDP 섹션이 함께 쓰는 값·스타일입니다.
   섹션 CSS 보다 먼저 불러오세요.
   PDP 규칙상 html·body·* 같은 전역 선택자는 쓰지 않고, 섹션 클래스에만 걸어 둡니다. */
.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-points br.mo,
.prd-feature-intro .capshome-compensation br.mo {
  display: none;
}
.prd-feature-intro .capshome-points br.pc,
.prd-feature-intro .capshome-compensation br.pc {
  display: inline;
}
@media (max-width: 1023px) {
  .prd-feature-intro .capshome-points br.mo,
  .prd-feature-intro .capshome-compensation br.mo {
    display: inline;
  }
  .prd-feature-intro .capshome-points br.pc,
  .prd-feature-intro .capshome-compensation br.pc {
    display: none;
  }
}
.prd-feature-intro .capshome-compensation,
.prd-feature-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-feature-intro .capshome-points .tit,
.prd-feature-intro .capshome-compensation .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}
.prd-feature-intro .capshome-compensation .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
/* ========== capshome-points.css ========== */
.prd-feature-intro .capshome-points {
  overflow: hidden;
  width: 100%;
  padding: 140px 40px;
  text-align: center;
  background: var(--prd-white);
}
.prd-feature-intro .capshome-points .tit-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.prd-feature-intro .capshome-points .sub-tit {
  margin: 0;
  color: var(--prd-gray-40);
  font-weight: 600;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: -0.68px;
}
.prd-feature-intro .capshome-points .tit {
  margin: 6px 0 0;
}
.prd-feature-intro .capshome-points .step-tab {
  display: inline-block;
  position: relative;
  margin-top: 40px;
  padding: 8px;
  border-radius: 12px;
  background: var(--prd-gray-bg);
}
.prd-feature-intro .capshome-points .tab-bar {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--bar-w, 0);
  height: var(--bar-h, 0);
  border-radius: 6px;
  background: var(--prd-white);
  transition: transform 0.45s cubic-bezier(0.25, 1, 0.5, 1), width 0.45s cubic-bezier(0.25, 1, 0.5, 1);
  transform: translate(var(--bar-x, 0), var(--bar-y, 0));
}
.prd-feature-intro .capshome-points .tab-list {
  display: flex;
}
.prd-feature-intro .capshome-points .tab {
  position: relative;
  z-index: 1;
  height: 46px;
  padding: 0 20px;
  color: var(--prd-gray-90);
  font-weight: 600;
  font-size: 16px;
  line-height: 46px;
  letter-spacing: -0.32px;
  white-space: nowrap;
  border-radius: 6px;
  transition: color 0.3s ease;
}
.prd-feature-intro .capshome-points .tab.is-active {
  color: var(--prd-gray-20);
}
.prd-feature-intro .capshome-points .step-view {
  width: 100%;
  max-width: 1200px;
  margin: 40px auto 0;
}
.prd-feature-intro .capshome-points .step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 675px;
  text-align: left;
  border-radius: 12px;
  background: var(--prd-white);
  animation: capshome-points-fade 0.8s ease-in-out;
}
.prd-feature-intro .capshome-points .step[hidden] {
  display: none;
}
.prd-feature-intro .capshome-points .step-txt {
  position: relative;
  /* 시안은 세로 가운데에서 20px 위에 둡니다. */
  top: -20px;
  margin-left: 42px;
  width: 444px;
}
.prd-feature-intro .capshome-points .step-num {
  margin: 0;
  color: var(--prd-blue);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}
.prd-feature-intro .capshome-points .step-tit {
  margin: 8px 0 0;
  color: var(--prd-black);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.64px;
}
.prd-feature-intro .capshome-points .step-txt-desc {
  margin: 20px 0 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}
.prd-feature-intro .capshome-points .step-img {
  overflow: hidden;
  flex: 0 0 auto;
  width: 654px;
  height: 675px;
  border-radius: 12px;
}
.prd-feature-intro .capshome-points .step-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prd-feature-intro .capshome-points .step-dot {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 24px;
}
.prd-feature-intro .capshome-points .step-dot[hidden] {
  display: none;
}
.prd-feature-intro .capshome-points .step-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-feature-intro .capshome-points .step-dot button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d8d8d8;
  transform: translate(-50%, -50%);
  content: "";
}
.prd-feature-intro .capshome-points .step-dot button.on::before {
  background: var(--prd-black);
}
@keyframes capshome-points-fade {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .prd-feature-intro .capshome-points .tab-bar {
    transition: none;
  }
  .prd-feature-intro .capshome-points .step {
    animation: none;
  }
}
@media (max-width: 1023px) {
  .prd-feature-intro .capshome-points {
    padding: 0 0 72px;
    text-align: center;
  }
  .prd-feature-intro .capshome-points .sub-tit {
    font-weight: 600;
    font-size: 20px;
    line-height: 1.40;
    letter-spacing: -0.2px;
  }
  .prd-feature-intro .capshome-points .tit {
    margin-top: 6px;
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }
  .prd-feature-intro .capshome-points .txt {
    margin-top: 16px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }
  /* 탭 대신 가로 슬라이더로 바뀌므로 탭 바는 JS 가 숨깁니다. */
  .prd-feature-intro .capshome-points .step-tab {
    display: block;
    margin: 32px 20px 0;
  }
  .prd-feature-intro .capshome-points .step-tab[hidden] {
    display: none;
  }
  .prd-feature-intro .capshome-points .tab-list {
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 4px;
  }
  .prd-feature-intro .capshome-points .tab {
    height: 40px;
    padding: 0 14px;
    font-size: 14px;
    line-height: 40px;
    letter-spacing: -0.28px;
  }
  .prd-feature-intro .capshome-points .step-view {
    overflow: hidden;
    margin-top: 40px;
    padding: 0 20px;
  }
  .prd-feature-intro .capshome-points .step-list {
    display: flex;
    transition: transform 0.4s ease;
    will-change: transform;
  }
  .prd-feature-intro .capshome-points .step {
    flex: 0 0 100%;
    flex-direction: column;
    align-items: stretch;
    height: auto;
    text-align: left;
    border-radius: 8px;
    margin-right: 12px;
    animation: none;
    gap: 20px;
  }
  .prd-feature-intro .capshome-points .step-img {
    overflow: hidden;
    order: -1;
    margin: 0;
    width: 100%;
    height: auto;
    aspect-ratio: 335 / 346;
    border-radius: 8px;
  }
  .prd-feature-intro .capshome-points .step-txt {
    top: 0;
    margin: 0;
    padding: 0 8px;
    width: auto;
  }
  .prd-feature-intro .capshome-points .step-num {
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .prd-feature-intro .capshome-points .step-tit {
    margin-top: 4px;
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.2px;
  }
  .prd-feature-intro .capshome-points .step-txt-desc {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
}
/* ── 태블릿 폭(~1023) 보정 ──
   모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
   비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
   카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
  /* 스텝 이미지(335:346)가 화면 폭만큼 커지지 않게 탭·슬라이드를 묶습니다. */
  .prd-feature-intro .capshome-points .step-tab {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
  .prd-feature-intro .capshome-points .step-view {
    max-width: 590px;
    margin-left: auto;
    margin-right: auto;
  }
}
/* ========== capshome-compensation.css ========== */
.prd-feature-intro .capshome-compensation {
  overflow: hidden;
  width: 100%;
  padding: 140px 40px;
  text-align: center;
  background: var(--prd-gray-bg);
}
.prd-feature-intro .capshome-compensation .tit-wrap {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.prd-feature-intro .capshome-compensation .tit {
  margin: 0;
}
.prd-feature-intro .capshome-compensation .txt {
  margin: 12px 0 0;
}
.prd-feature-intro .capshome-compensation .card-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  width: 100%;
  max-width: 1440px;
  margin: 80px auto 0;
}
.prd-feature-intro .capshome-compensation .card {
  display: flex;
  flex-direction: column;
  min-height: 420px;
  padding: 40px;
  text-align: left;
  border: 1px solid var(--prd-gray-line);
  border-radius: 12px;
  background: var(--prd-white);
  box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.06);
}
.prd-feature-intro .capshome-compensation .card-badge {
  display: inline-block;
  margin: 0 0 16px;
  padding: 6px 14px;
  color: var(--prd-blue);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
  border-radius: 6px;
  background: rgba(204, 220, 255, 0.4);
}
.prd-feature-intro .capshome-compensation .card-tit {
  margin: 0;
  color: var(--prd-gray-70);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
}
.prd-feature-intro .capshome-compensation .card-amount {
  margin: 8px 0 0;
  color: var(--prd-gray-20);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: -0.68px;
  opacity: 0.8;
}
.prd-feature-intro .capshome-compensation .card-sub {
  margin: 4px 0 0;
  color: var(--prd-gray-70);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
}
.prd-feature-intro .capshome-compensation .card-txt {
  margin-bottom: auto;
}
.prd-feature-intro .capshome-compensation .card-img {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 32px auto 0;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: var(--prd-gray-bg);
  overflow: hidden;
}
.prd-feature-intro .capshome-compensation .card-img img {
  object-fit: none;
}
.prd-feature-intro .capshome-compensation .note {
  margin: 80px 0 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-feature-intro .capshome-compensation .card-list {
    gap: 16px;
  }
  .prd-feature-intro .capshome-compensation .card {
    min-height: 0;
    padding: 32px 20px;
  }
  .prd-feature-intro .capshome-compensation .card-amount {
    font-size: 28px;
    letter-spacing: -0.56px;
  }
}
@media (max-width: 1023px) {
  .prd-feature-intro .capshome-compensation {
    padding: 72px 20px;
  }
  .prd-feature-intro .capshome-compensation .tit-wrap {
    width: auto;
    padding: 0;
  }
  .prd-feature-intro .capshome-compensation .tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }
  .prd-feature-intro .capshome-compensation .txt {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }
  .prd-feature-intro .capshome-compensation .card-list {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 40px;
    width: auto;
  }
  /* 아이콘을 왼쪽에 두고 문구를 오른쪽에 쌓습니다. */
  .prd-feature-intro .capshome-compensation .card {
    position: relative;
    flex-direction: row;
    align-items: center;
    gap: 16px;
    min-height: 128px;
    padding: 24px 20px;
    border: 0;
    border-radius: 8px;
    box-shadow: 10px 10px 15px rgba(0, 0, 0, 0.06);
  }
  .prd-feature-intro .capshome-compensation .card-img {
    order: -1;
    flex-shrink: 0;
    margin: 0;
    width: 80px;
    height: 80px;
  }
  /* 시안은 PC 아이콘을 약 42% 로 줄여 80px 원 가운데에 둡니다(원 밖으로 조금 나갈 수 있음). */
  .prd-feature-intro .capshome-compensation .card-img {
    overflow: visible;
  }
  .prd-feature-intro .capshome-compensation .card-img img {
    flex-shrink: 0;
    width: 110px;
    max-width: none;
    height: auto;
    object-fit: initial;
  }
  .prd-feature-intro .capshome-compensation .card-txt {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
  }
  /* 모바일 시안은 배지를 카드 오른쪽 위 모서리에 걸쳐 둡니다. */
  .prd-feature-intro .capshome-compensation .card-badge {
    position: absolute;
    top: -8px;
    right: 9px;
    margin: 0;
    padding: 4px 10px;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.28px;
    border: 1px solid var(--prd-blue);
    border-radius: 6px;
    background: #ebf1ff;
  }
  .prd-feature-intro .capshome-compensation .card-tit {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
  .prd-feature-intro .capshome-compensation .card-amount {
    margin-top: 6px;
    font-size: 22px;
    line-height: 1.4;
    letter-spacing: -0.22px;
    opacity: 0.8;
  }
  .prd-feature-intro .capshome-compensation .card-sub {
    margin-top: 2px;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.42px;
  }
  .prd-feature-intro .capshome-compensation .note {
    margin-top: 24px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }
}
/* ── 태블릿 폭(~1023) 보정 ──
   모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
   비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
   카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
  .prd-feature-intro .capshome-compensation .card-list {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==================== 필드 3 : .prd-html-content (css/prd-html-content.css) ==================== */
/* ========== capshome-common.css ========== */
/* 모든 캡스홈 PDP 섹션이 함께 쓰는 값·스타일입니다.
   섹션 CSS 보다 먼저 불러오세요.
   PDP 규칙상 html·body·* 같은 전역 선택자는 쓰지 않고, 섹션 클래스에만 걸어 둡니다. */
.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-live br.mo,
.prd-html-content .capshome-app br.mo {
  display: none;
}
.prd-html-content .capshome-live br.pc,
.prd-html-content .capshome-app br.pc {
  display: inline;
}
/* live·app 은 모바일에서도 br.mo 를 쓰지 않고 단어 단위(keep-all)로 자연스럽게 줄바꿈합니다. */
@media (max-width: 1023px) {
  .prd-html-content .capshome-live br.pc,
  .prd-html-content .capshome-app br.pc {
    display: none;
  }
}
.prd-html-content .capshome-app,
.prd-html-content .capshome-live {
  --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-live .tit,
.prd-html-content .capshome-app .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}
.prd-html-content .capshome-live .txt,
.prd-html-content .capshome-app .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
/* ========== capshome-live.css ========== */
.prd-html-content .capshome-live {
  overflow: hidden;
  width: 100%;
  padding: 140px 40px 160px;
  background: var(--prd-white);
}
.prd-html-content .capshome-live .tit-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 1440px;
  margin: 0 auto 80px;
  text-align: center;
}
.prd-html-content .capshome-live .sub-tit {
  margin: 0;
  color: var(--prd-blue);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}
.prd-html-content .capshome-live .tit {
  margin: 12px 0 0;
}
.prd-html-content .capshome-live .txt {
  margin: 12px 0 0;
}
.prd-html-content .capshome-live .txt span,
.prd-html-content .capshome-live .block-txt span {
  font-weight: 600;
}
.prd-html-content .capshome-live .con {
  max-width: 1440px;
  margin: 0 auto;
}
.prd-html-content .capshome-live .live-view {
  overflow: hidden;
  width: 100%;
  max-width: 1200px;
  height: 568px;
  margin: 0 auto 160px;
  border-radius: 12px;
  background: #d8d8d8;
}
.prd-html-content .capshome-live .live-view picture {
  display: block;
  width: 100%;
  height: 100%;
}
.prd-html-content .capshome-live .live-view img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 현관 CCTV 영상(16:9)을 2.1:1 칸에 채웁니다. 가운데 기준이면 왼쪽 아래 날짜·시간이 잘려 아래 기준으로 맞춥니다. */
.prd-html-content .capshome-live .live-view {
  position: relative;
}
.prd-html-content .capshome-live .live-view video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 100%;
}
/* 정지·재생 토글. 날짜·시간(왼쪽 아래)과 겹치지 않게 오른쪽 아래에 둡니다.
   아이콘은 CSS 로 그립니다: 재생 중 = 일시정지 막대 두 개, 정지 중(.is-paused) = 재생 삼각형. */
.prd-html-content .capshome-live .video-toggle {
  position: absolute;
  right: 20px;
  bottom: 20px;
  z-index: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.prd-html-content .capshome-live .video-toggle::before,
.prd-html-content .capshome-live .video-toggle::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 4px;
  height: 14px;
  border-radius: 1px;
  background: var(--prd-white);
  transform: translateY(-50%);
}
.prd-html-content .capshome-live .video-toggle::before {
  left: 16px;
}
.prd-html-content .capshome-live .video-toggle::after {
  right: 16px;
}
.prd-html-content .capshome-live .video-toggle.is-paused::before {
  left: 17px;
  width: 0;
  height: 0;
  border-top: 8px solid transparent;
  border-bottom: 8px solid transparent;
  border-left: 13px solid var(--prd-white);
  border-radius: 0;
  background: none;
}
.prd-html-content .capshome-live .video-toggle.is-paused::after {
  display: none;
}
.prd-html-content .capshome-live .video-toggle:focus-visible {
  outline: 2px solid var(--prd-white);
  outline-offset: 2px;
}
.prd-html-content .capshome-live .block-label {
  margin: 0;
  color: var(--prd-blue);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}
.prd-html-content .capshome-live .block-tit {
  margin: 12px 0 0;
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}
.prd-html-content .capshome-live .block-txt {
  margin: 12px 0 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
.prd-html-content .capshome-live .block-night {
  position: relative;
  height: 986px;
  /* 섹션 좌우 여백(40px)을 넘어 화면 끝까지 채웁니다. */
  margin: 0 -40px 160px;
}
.prd-html-content .capshome-live .block-night .block-img {
  position: absolute;
  inset: 0;
}
.prd-html-content .capshome-live .block-night .block-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.prd-html-content .capshome-live .block-night .block-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prd-html-content .capshome-live .block-night .block-inner {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  height: 100%;
  margin: 0 auto;
  padding-top: 90px;
}
.prd-html-content .capshome-live .block-night .block-body {
  width: 662px;
}
.prd-html-content .capshome-live .block-night .block-txt {
  color: var(--prd-gray-40);
}
.prd-html-content .capshome-live .block-save {
  position: relative;
  height: 439px;
  margin-bottom: 140px;
}
.prd-html-content .capshome-live .block-imgs {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 1125px;
  height: 359px;
}
.prd-html-content .capshome-live .block-imgs img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: left bottom;
}
.prd-html-content .capshome-live .block-save .block-body {
  position: absolute;
  right: 0;
  top: 0;
  z-index: 1;
  width: 554px;
}
.prd-html-content .capshome-live .block-battery {
  position: relative;
  min-height: 517px;
}
.prd-html-content .capshome-live .block-battery .block-body {
  width: 680px;
}
.prd-html-content .capshome-live .stat-list {
  display: flex;
  gap: 119px;
  margin-top: 94px;
}
.prd-html-content .capshome-live .stat {
  padding-left: 24px;
  border-left: 1px solid #d8d8d8;
}
.prd-html-content .capshome-live .stat-txt {
  margin: 0;
  color: var(--prd-gray-70);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}
.prd-html-content .capshome-live .stat-val {
  margin: 44px 0 0;
  color: var(--prd-black);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.4;
  letter-spacing: -0.4px;
}
.prd-html-content .capshome-live .stat-note {
  margin: 4px 0 0;
  color: var(--prd-gray-80);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}
.prd-html-content .capshome-live .block-battery .block-img {
  position: absolute;
  right: -42px;
  top: -48px;
  overflow: hidden;
  width: 754px;
  height: 566px;
}
.prd-html-content .capshome-live .block-battery .block-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-html-content .capshome-live .live-view {
    height: auto;
    aspect-ratio: 1200 / 568;
  }
  .prd-html-content .capshome-live .block-night .block-inner {
    padding-left: 0;
    padding-right: 0;
  }
  .prd-html-content .capshome-live .block-night .block-body {
    width: min(680px, 100%);
  }
  /* 이미지가 고정 크기(754px)라 화면이 좁아지면 텍스트와 겹치므로 비율로 나눕니다. */
  .prd-html-content .capshome-live .block-battery {
    min-height: 0;
  }
  .prd-html-content .capshome-live .block-battery .block-body {
    position: relative;
    z-index: 1;
    width: min(680px, 56%);
  }
  .prd-html-content .capshome-live .block-battery .block-img {
    right: -3%;
    top: 50%;
    width: 48%;
    height: auto;
    aspect-ratio: 754 / 566;
    transform: translateY(-50%);
  }
  .prd-html-content .capshome-live .block-battery .block-img picture {
    display: block;
    height: 100%;
  }
  .prd-html-content .capshome-live .stat-list {
    margin-top: clamp(48px, 6.5vw, 94px);
  }
  .prd-html-content .capshome-live .stat-txt {
    font-size: clamp(16px, 1.4vw, 20px);
  }
  .prd-html-content .capshome-live .stat-val {
    margin-top: clamp(24px, 3vw, 44px);
    font-size: clamp(28px, 2.8vw, 40px);
  }
  .prd-html-content .capshome-live .stat-note {
    font-size: clamp(14px, 1.25vw, 18px);
  }
  .prd-html-content .capshome-live .block-save .block-body {
    width: min(554px, 46%);
  }
  .prd-html-content .capshome-live .block-imgs {
    width: min(1125px, 58%);
    height: auto;
    aspect-ratio: 1125 / 359;
  }
  .prd-html-content .capshome-live .stat-list {
    gap: clamp(24px, 3.4vw, 48px);
  }
}
@media (max-width: 1023px) {
  .prd-html-content .capshome-live {
    padding: 72px 20px;
  }
  .prd-html-content .capshome-live .tit-wrap {
    margin-bottom: 40px;
  }
  .prd-html-content .capshome-live .sub-tit,
  .prd-html-content .capshome-live .block-label {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.18px;
  }
  .prd-html-content .capshome-live .tit {
    margin-top: 8px;
  }
  .prd-html-content .capshome-live .block-tit {
    margin-top: 6px;
  }
  .prd-html-content .capshome-live .tit,
  .prd-html-content .capshome-live .block-tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
    word-break: keep-all;
  }
  .prd-html-content .capshome-live .txt,
  .prd-html-content .capshome-live .block-txt {
    margin-top: 6px;
    color: var(--prd-gray-70);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.48px;
    word-break: keep-all;
  }
  .prd-html-content .capshome-live .live-view {
    width: 100%;
    height: auto;
    aspect-ratio: 670 / 316;
    margin-bottom: 72px;
    border-radius: 8px;
  }
  .prd-html-content .capshome-live .video-toggle {
    right: 10px;
    bottom: 10px;
    width: 36px;
    height: 36px;
  }
  .prd-html-content .capshome-live .video-toggle::before {
    left: 12px;
  }
  .prd-html-content .capshome-live .video-toggle::after {
    right: 12px;
  }
  .prd-html-content .capshome-live .video-toggle.is-paused::before {
    left: 13px;
  }
  /* 야간 이미지는 섹션 좌우 여백(20px)을 넘어 화면 끝까지 채웁니다. */
  .prd-html-content .capshome-live .block-night {
    width: auto;
    height: auto;
    margin: 0 -20px 72px;
  }
  .prd-html-content .capshome-live .block-night .block-inner {
    max-width: none;
    height: auto;
    padding: 0 20px;
  }
  .prd-html-content .capshome-live .block-night .block-body {
    width: auto;
  }
  .prd-html-content .capshome-live .block-night .block-img {
    position: static;
    width: auto;
    height: auto;
    margin-top: 40px;
  }
  .prd-html-content .capshome-live .block-night .block-img picture,
  .prd-html-content .capshome-live .block-night .block-img img {
    height: auto;
  }
  .prd-html-content .capshome-live .block-save {
    display: flex;
    flex-direction: column;
    height: auto;
    margin-bottom: 72px;
  }
  .prd-html-content .capshome-live .block-imgs {
    order: 2;
    position: static;
    width: 100%;
    height: auto;
    margin-top: 40px;
  }
  .prd-html-content .capshome-live .block-imgs picture,
  .prd-html-content .capshome-live .block-imgs img {
    display: block;
    width: 100%;
    height: auto;
  }
  .prd-html-content .capshome-live .block-save .block-body {
    order: 1;
    position: static;
    width: auto;
  }
  .prd-html-content .capshome-live .block-battery {
    display: block;
    min-height: 0;
  }
  .prd-html-content .capshome-live .block-battery .block-body {
    width: auto;
  }
  /* 모바일은 수치 두 개를 회색 카드로 세로로 쌓습니다. */
  .prd-html-content .capshome-live .stat-list {
    flex-direction: column;
    gap: 14px;
    margin-top: 40px;
  }
  .prd-html-content .capshome-live .stat {
    width: 100%;
    padding: 24px 12px;
    border: 0;
    border-radius: 8px;
    background: var(--prd-gray-bg);
    text-align: center;
  }
  .prd-html-content .capshome-live .stat-txt {
    font-weight: 600;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.32px;
  }
  .prd-html-content .capshome-live .stat-val {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -0.66px;
  }
  .prd-html-content .capshome-live .stat-note {
    margin-top: 4px;
    color: var(--prd-gray-90);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.42px;
  }
  .prd-html-content .capshome-live .block-battery .block-img {
    position: static;
    width: 100%;
    height: auto;
    margin-top: 14px;
  }
  .prd-html-content .capshome-live .block-battery .block-img picture,
  .prd-html-content .capshome-live .block-battery .block-img img {
    display: block;
    width: 100%;
    height: auto;
  }
}
/* ========== capshome-app.css ========== */
.prd-html-content .capshome-app {
  width: 100%;
  /* 좌우 여백 40px 을 빼고 콘텐츠가 시안 폭 1440px 이 되도록 합니다. */
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 40px 100px;
  background: var(--prd-white);
}
.prd-html-content .capshome-app .tit-wrap {
  max-width: 1440px;
  margin: 0 auto 80px;
  text-align: center;
}
.prd-html-content .capshome-app .tit {
  margin: 0;
}
.prd-html-content .capshome-app .txt {
  margin: 12px 0 0;
}
.prd-html-content .capshome-app .con {
  max-width: 1440px;
  margin: 0 auto;
}
.prd-html-content .capshome-app .phone {
  overflow: hidden;
  width: min(850px, 100%);
  height: auto;
  aspect-ratio: 976 / 482;
  margin: 0 auto 40px;
}
.prd-html-content .capshome-app .phone .slide-view {
  display: block;
  overflow: hidden;
  z-index: auto;
  isolation: isolate;
  touch-action: pan-y;
  width: 100%;
  height: 100%;
}
.prd-html-content .capshome-app .phone .card {
  flex: 0 0 100%;
  height: 100%;
}
.prd-html-content .capshome-app .phone img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.prd-html-content .capshome-app .slide-dot {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 40px;
}
.prd-html-content .capshome-app .slide-dot button {
  /* PC 는 시안대로 8px 점을 20px 간격으로 둡니다. 같은 일을 하는 큰 탭 버튼이 아래에 있어 WCAG 2.5.8 예외에 해당합니다.
     세로는 음수 마진으로 줄 높이(8px)를 그대로 둡니다. */
  position: relative;
  width: 20px;
  height: 24px;
  margin: -8px 0;
  padding: 0;
  border: 0;
  background: none;
}
.prd-html-content .capshome-app .slide-dot button::before {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #d8d8d8;
  transform: translate(-50%, -50%);
  content: "";
}
.prd-html-content .capshome-app .slide-dot button.on::before {
  background: var(--prd-black);
}
.prd-html-content .capshome-app .tab-list {
  display: flex;
  justify-content: center;
  gap: 70px;
}
.prd-html-content .capshome-app .tab {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  text-align: center;
}
.prd-html-content .capshome-app .tab-icon {
  position: relative;
  display: flex;
  overflow: hidden;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  width: 60px;
  height: 60px;
  border-radius: 12px;
  background: var(--prd-white);
  opacity: 0.4;
}
/* 아이콘 SVG 는 시안 크기(가로·세로 속성) 그대로 60px 칸 가운데에 둡니다. */
.prd-html-content .capshome-app .tab-icon img {
  display: block;
  width:100%;
}
/* 사람+체크 아이콘은 체크가 오른쪽으로 튀어나와, 시안처럼 2px 오른쪽으로 옮겨 무게 중심을 맞춥니다. */
.prd-html-content .capshome-app .tab-icon-user img {
  translate: 2px 0;
}
/* 비활성 탭은 opacity 대신 색으로 흐리게 합니다(굵은 22px 라 명도 대비 3:1 기준). 활성은 .tab.on 에서 검정. */
.prd-html-content .capshome-app .tab-tit {
  margin: 16px 0 0;
  color: #949494;
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.22px;
}
.prd-html-content .capshome-app .tab-txt {
  margin: 12px 0 0;
  color: var(--prd-gray-90);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;  
}
.prd-html-content .capshome-app .tab.on .tab-icon {
  opacity: 1;
}
.prd-html-content .capshome-app .tab.on .tab-tit {
  color: var(--prd-black);
}
.prd-html-content .capshome-app .tab.on .tab-txt {
  color: var(--prd-gray-70);
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-html-content .capshome-app .tab-list {
    gap: 32px;
  }
  .prd-html-content .capshome-app .tab {
    width: auto;
    flex: 1;
    max-width: 250px;
  }
  /* 탭 폭이 1440 시안보다 좁아 고정 줄바꿈이 어색하게 끊기므로, 이 구간에서는 br 을 끄고 단어 단위로 흐르게 합니다. */
  .prd-html-content .capshome-app .tab-txt {
    word-break: keep-all;
  }
  .prd-html-content .capshome-app .tab-txt br {
    display: none;
  }
}
@media (max-width: 1023px) {
  .prd-html-content .capshome-app {
    padding: 0 20px 72px;
  }
  .prd-html-content .capshome-app .tit-wrap {
    margin-bottom: 40px;
  }
  .prd-html-content .capshome-app .tit {
    font-size: 25px;
    letter-spacing: -0.25px;
    word-break: keep-all;
  }
  .prd-html-content .capshome-app .txt {
    margin-top: 6px;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.48px;
    word-break: keep-all;
  }
  .prd-html-content .capshome-app .phone {
    width: 100%;
    height: auto;
    aspect-ratio: 1952 / 964;
    margin-bottom: 24px;
  }
  /* 모바일은 점이 유일한 버튼이라 터치 영역 24×24px(점 중심 간격 24px)로 WCAG 2.5.8 을 채웁니다. */
  .prd-html-content .capshome-app .slide-dot button {
    width: 24px;
    margin: -9px 0;
  }
  .prd-html-content .capshome-app .slide-dot button::before {
    width: 6px;
    height: 6px;
  }
  .prd-html-content .capshome-app .tab {
    display: none;
    grid-template-columns: 60px 1fr;
    column-gap: 16px;
    row-gap: 12px;
    width: 100%;
    text-align: left;
  }
  .prd-html-content .capshome-app .tab.on {
    display: grid;
  }
  .prd-html-content .capshome-app .tab-icon {
    grid-row: 1 / span 2;
    align-self: start;
    width: 60px;
    height: 60px;
    opacity: 1;
  }
  .prd-html-content .capshome-app .tab-tit {
    grid-column: 2;
    align-self: end;
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.16px;
  }
  .prd-html-content .capshome-app .tab-txt {
    grid-column: 2;
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
    word-break: keep-all;
  }
  /* 모바일은 화면 폭이 제각각이라 고정 줄바꿈이 어색하게 끊기므로, br 을 끄고 단어 단위로 자연스럽게 흐르게 합니다. */
  .prd-html-content .capshome-app .tab-txt br {
    display: none;
  }
}
/* ── 태블릿 폭(~1023) 보정 ──
   모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
   비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
   카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
  /* live·app 의 이미지·박스는 모두 폭 100% 라 화면 폭만큼 커져 묶음 폭을 제한합니다. */
  .prd-html-content .capshome-live .con,
  .prd-html-content .capshome-app .con {
    max-width: 550px;
    margin-left: auto;
    margin-right: auto;
  }
  /* 야간 촬영 블록은 화면 끝까지 차는 구조라 안쪽 글·이미지만 묶습니다(좌우 패딩 20 포함). */
  .prd-html-content .capshome-live .block-night .block-inner,
  .prd-html-content .capshome-live .block-night .block-img {
    max-width: 590px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ==================== 필드 4 : .prd-install-notice (css/prd-install-notice.css) ==================== */
/* ========== capshome-common.css ========== */
/* 모든 캡스홈 PDP 섹션이 함께 쓰는 값·스타일입니다.
   섹션 CSS 보다 먼저 불러오세요.
   PDP 규칙상 html·body·* 같은 전역 선택자는 쓰지 않고, 섹션 클래스에만 걸어 둡니다. */
.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-install br.mo,
.prd-install-notice .capshome-setup br.mo,
.prd-install-notice .capshome-compare br.mo {
  display: none;
}
.prd-install-notice .capshome-install br.pc,
.prd-install-notice .capshome-setup br.pc,
.prd-install-notice .capshome-compare br.pc {
  display: inline;
}
@media (max-width: 1023px) {
  .prd-install-notice .capshome-install br.mo,
  .prd-install-notice .capshome-setup br.mo,
  .prd-install-notice .capshome-compare br.mo {
    display: inline;
  }
  .prd-install-notice .capshome-install br.pc,
  .prd-install-notice .capshome-setup br.pc,
  .prd-install-notice .capshome-compare br.pc {
    display: none;
  }
}
.prd-install-notice .capshome-compare,
.prd-install-notice .capshome-install,
.prd-install-notice .capshome-setup {
  --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-install .tit,
.prd-install-notice .capshome-compare .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}
.prd-install-notice .capshome-install .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
/* ========== capshome-install.css ========== */
.prd-install-notice .capshome-install {
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 1020px;
  background: var(--prd-white);
}
.prd-install-notice .capshome-install .block-img {
  position: absolute;
  inset: 0;
}
.prd-install-notice .capshome-install .block-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prd-install-notice .capshome-install .tit-wrap {
  position: relative;
  z-index: 1;
  max-width: 1440px;
  margin: 0 auto;
  padding: 140px 40px 0;
  text-align: center;
}
.prd-install-notice .capshome-install .tit {
  margin: 0;
}
.prd-install-notice .capshome-install .txt {
  margin: 12px 0 0;
}
@media (max-width: 1023px) {
  .prd-install-notice .capshome-install {
    height: 560px;
  }
  .prd-install-notice .capshome-install .tit-wrap {
    padding: 72px 20px 0;
  }
  .prd-install-notice .capshome-install .tit {
    font-size: 25px;
    letter-spacing: -0.25px;
  }
  .prd-install-notice .capshome-install .txt {
    font-size: 15px;
  }
}
/* ========== capshome-setup.css ========== */
.prd-install-notice .capshome-setup {
  width: 100%;
  padding: 140px 40px 0;
  background: var(--prd-white);
}
/* 카드를 절대배치하면 .cards 높이를 따로 정해야 하는데, 폭이 줄 때 높이만 비율로 줄고
   카드 안 텍스트·간격(px)은 그대로라 카드가 넘쳐 아래 가이드 타이틀에 붙었습니다.
   흐름 배치로 두어 높이가 내용대로 잡히게 합니다.
   시안 1440: 584 + 32 + 584 = 1200 가운데 정렬 → 카드 x=120 / 736, 오른쪽 카드는 180 아래. */
.prd-install-notice .capshome-setup .cards {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 32px;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.prd-install-notice .capshome-setup .card {
  position: relative;
  flex-shrink: 0;
  width: 584px;
  transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
.prd-install-notice .capshome-setup .card-1 {
  transform: translate3d(0, 100px, 0);
}
.prd-install-notice .capshome-setup .card-2 {
  margin-top: 180px;
  transform: translate3d(0, -100px, 0);
}
.prd-install-notice .capshome-setup.on .card-1 {
  transform: translate3d(0, 0, 0);
}
.prd-install-notice .capshome-setup.on .card-2 {
  transform: translate3d(0, 0, 0);
}
.prd-install-notice .capshome-setup .card-img {
  overflow: hidden;
  width: 584px;
  height: 665px;
  border-radius: 12px;
  background: var(--prd-gray-bg);
}
.prd-install-notice .capshome-setup .card-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.prd-install-notice .capshome-setup .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.prd-install-notice .capshome-setup .card-txt {
  margin-top: 40px;
  padding: 0 12px;
}
.prd-install-notice .capshome-setup .card-note {
  margin-top: 8px;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: 0;
}
.prd-install-notice .capshome-setup .card-tit {
  margin: 0;
  color: var(--prd-black);
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}
.prd-install-notice .capshome-setup .card-desc {
  margin: 16px 0 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}
.prd-install-notice .capshome-setup .guide {
  width: 100%;
  max-width: 1440px;
  /* .cards 높이를 시안(992px)에 맞추면서 늘어난 28px 만큼 줄여 가이드 위치는 그대로 둡니다. */
  margin: 116px auto 0;
  padding: 0 0 140px;
}
.prd-install-notice .capshome-setup .guide .tit-wrap {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding-left: 12px;
}
.prd-install-notice .capshome-setup .guide .tit {
  margin: 0;
  color: var(--prd-black);
  font-weight: 700;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: -0.68px;
}
.prd-install-notice .capshome-setup .guide .txt {
  margin: 16px 0 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
}
.prd-install-notice .capshome-setup .check-list {
  display: flex;
  gap: 32px;
  width: 100%;
  max-width: 1200px;
  margin: 48px auto 0;
}
.prd-install-notice .capshome-setup .check {
  display: flex;
  flex: 1;
  flex-direction: column;
  align-items: center;
  padding-bottom: 40px;
  border-radius: 12px;
  background: var(--prd-gray-bg);
}
.prd-install-notice .capshome-setup .check-img {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  width: 280px;
  height: 280px;
  border-radius: 50%;
}
.prd-install-notice .capshome-setup .check-img img {
  position: absolute;
  width: 91%;
  height: auto;
  mix-blend-mode: multiply;
}
/* 일러스트는 시안 레이어(254.8px·268.8px)를 그대로 뽑은 것이라, 280px 칸 안 시안 좌표에 둡니다. */
.prd-install-notice .capshome-setup .check:nth-child(1) .check-img img {
  left: 5.67%;
  top: 3.5%;
}
.prd-install-notice .capshome-setup .check:nth-child(2) .check-img img {
  left: 3.67%;
  top: 2.5%;
  width: 96%;
}
.prd-install-notice .capshome-setup .check:nth-child(3) .check-img img {
  left: 4.67%;
  top: 4.5%;
}
.prd-install-notice .capshome-setup .check-label {
  margin: 4px 0 0;
  color: var(--prd-gray-80);
  font-weight: 500;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
  text-align: center;
}
.prd-install-notice .capshome-setup .check-txt {
  margin: 4px 0 0;
  color: var(--prd-gray-40);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
  text-align: center;
}
.prd-install-notice .capshome-setup .check-em {
  color: var(--prd-blue);
}
.prd-install-notice .capshome-setup .guide .note {
  width: 100%;
  max-width: 1044px;
  margin: 40px auto 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.16px;
  text-align: center;
  opacity: 0.82; /* 명도 대비 4.5:1 (시안 0.8) */
}
.prd-install-notice .capshome-setup .guide .note span{
  font-weight: 600;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  /* 1440 기준 비율 그대로: 카드 584 → 40.556%, 간격 32 → 2.222%,
     오른쪽 카드 내림 180 → 12.5% (margin % 는 폭 기준) */
  .prd-install-notice .capshome-setup .cards {
    gap: 2.222%;
  }
  .prd-install-notice .capshome-setup .card {
    width: 40.556%;
  }
  .prd-install-notice .capshome-setup .card-2 {
    margin-top: 12.5%;
  }
  .prd-install-notice .capshome-setup .card-img {
    width: 100%;
    height: auto;
    aspect-ratio: 584 / 665;
  }
  .prd-install-notice .capshome-setup .check-img {
    width: min(280px, 100%);
    height: auto;
    aspect-ratio: 1;
  }
}
@media (max-width: 1023px) {
  .prd-install-notice .capshome-setup {
    padding: 72px 20px 0;
  }
  /* 모바일 시안은 카드 두 장을 가로로 나란히 둡니다. */
  .prd-install-notice .capshome-setup .cards {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 12px;
    height: auto;
  }
  .prd-install-notice .capshome-setup .card,
  .prd-install-notice .capshome-setup .card-1,
  .prd-install-notice .capshome-setup .card-2,
  .prd-install-notice .capshome-setup.on .card-1,
  .prd-install-notice .capshome-setup.on .card-2 {
    position: static;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    margin-top: 0;
    transform: none;
  }
  .prd-install-notice .capshome-setup .card-img {
    width: 100%;
    height: 224px;
    border-radius: 8px;
  }
  .prd-install-notice .capshome-setup .card-txt {
    margin-top: 20px;
    padding: 0 8px;
  }
  .prd-install-notice .capshome-setup .card-note {
    margin-top: 4px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.24px;
  }
  .prd-install-notice .capshome-setup .card-tit {
    font-size: 20px;
    line-height: 1.45;
    letter-spacing: -0.2px;
  }
  .prd-install-notice .capshome-setup .card-desc {
    margin-top: 12px;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
  /* 시안 줄바꿈이 카드마다 다릅니다. 1번은 글자 단위(단어 단위면 한 줄 늘어남), 2번은 단어 단위입니다. */
  .prd-install-notice .capshome-setup .card-1 .card-desc {
    word-break: normal;
  }
  .prd-install-notice .capshome-setup .card-2 .card-desc {
    word-break: keep-all;
  }
  .prd-install-notice .capshome-setup .guide {
    width: 100%;
    margin-top: 72px;
    padding: 0 0 72px;
  }
  .prd-install-notice .capshome-setup .guide .tit-wrap {
    padding-left: 0;
    text-align: center;
  }
  .prd-install-notice .capshome-setup .guide .tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }
  .prd-install-notice .capshome-setup .guide .txt {
    margin-top: 8px;
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }
  .prd-install-notice .capshome-setup .check-list {
    flex-direction: column;
    gap: 14px;
    margin-top: 40px;
  }
  /* 아이콘을 왼쪽에 두고 라벨·문구를 오른쪽에 쌓습니다. */
  .prd-install-notice .capshome-setup .check {
    flex: none;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 16px 0 16px 8px;
    border-radius: 8px;
  }
  .prd-install-notice .capshome-setup .check-img {
    flex-shrink: 0;
    width: 112px;
    height: 112px;
    border-radius: 0;
    background: none;
  }
  .prd-install-notice .capshome-setup .check-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
  }
  .prd-install-notice .capshome-setup .check-label {
    margin: 0;
    color: var(--prd-gray-80);
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    text-align: left;
  }
  .prd-install-notice .capshome-setup .check-txt br.pc {
    display: none;
  }
  /* 모바일 시안은 일러스트가 112px 칸을 꽉 채웁니다(PC 는 91%·96%). */
  .prd-install-notice .capshome-setup .check:nth-child(1) .check-img img,
  .prd-install-notice .capshome-setup .check:nth-child(3) .check-img img {
    left: 0;
    top: 0;
    width: 100%;
  }
  .prd-install-notice .capshome-setup .check:nth-child(2) .check-img img {
    left: 0;
    top: -1px;
    width: 102%;
  }
  .prd-install-notice .capshome-setup .check-txt {
    margin: 0;
    color: var(--prd-gray-20);
    font-weight: 700;
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: -0.18px;
    text-align: left;
    opacity: 0.8;
  }
  /* 모바일은 .check-txt 가 opacity 0.8 이라 파랑이 옅어집니다. 같은 계열로 한 톤 진하게 해 명도 대비 4.5:1 을 맞춥니다. */
  .prd-install-notice .capshome-setup .check-em {
    color: #024acf;
  }
  .prd-install-notice .capshome-setup .guide .note {
    margin-top: 24px;
    color: var(--prd-gray-90);
    opacity: 1;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
    text-align: center;
  }
}
/* ── 태블릿 폭(~1023) 보정 ──
   모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
   비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
   카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
  /* 배경 560px 고정 → 폭에 비례(560/375 = 149.33vw), 900px 상한 */
  .prd-install-notice .capshome-install {
    height: clamp(560px, 149.33vw, 900px);
  }
  /* 카드 2장 나란히: 묶음 폭을 제한하고 이미지는 시안 비율(161.5 x 224)로 */
  .prd-install-notice .capshome-setup .cards {
    max-width: 550px;
  }
  .prd-install-notice .capshome-setup .card-img {
    height: auto;
    aspect-ratio: 161.5 / 224;
  }
}
/* ========== capshome-compare.css ========== */
.prd-install-notice .capshome-compare {
  width: 100%;
  /* 좌우 여백 40px 을 빼고 표가 시안 폭 1440px 이 되도록 합니다. */
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
  padding: 140px 40px 140px;
  background: var(--prd-white);
}
.prd-install-notice .capshome-compare .tit-wrap {
  max-width: 1440px;
  margin: 0 auto 80px;
  text-align: center;
}
.prd-install-notice .capshome-compare .tit {
  margin: 0;
}
/* 시안: 질문 350 · 캡스홈 500 · 일반 홈카메라 350 을 붙여 1200px 로 가운데 둡니다.
   양옆 열은 72px 아래에서 시작하고, 가운데 열 높이에 맞춰 늘이지 않습니다. */
.prd-install-notice .capshome-compare .table {
  display: grid;
  grid-template-columns: 350fr 500fr 350fr;
  align-items: start;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
.prd-install-notice .capshome-compare .col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.prd-install-notice .capshome-compare .col-ask {
  overflow: hidden;
  margin: 72px 0 0;
  background: rgba(2, 90, 252, 0.89); /* 흰 글자 명도 대비 4.5:1 (시안 0.8) */
  border-radius: 12px 0 0 12px;
}
.prd-install-notice .capshome-compare .col-home {
  position: relative;
  z-index: 2;
  overflow: hidden;
  border-radius: 12px;
  background-color: #ffffff;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.35);
  /* 시안의 안쪽 테두리(inside stroke)라 크기에 더하지 않고 내용 위에 긋습니다. */
  outline: 5px solid var(--prd-blue);
  outline-offset: -5px;
}
.prd-install-notice .capshome-compare .col-cam {
  overflow: hidden;
  margin: 72px 0 0;
  background: var(--prd-dim);
  border-radius: 0 12px 12px 0;
}
.prd-install-notice .capshome-compare .cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.prd-install-notice .capshome-compare .col-ask .cell.head,
.prd-install-notice .capshome-compare .col-cam .cell.head {
  flex-shrink: 0;
  height: 120px;
}
.prd-install-notice .capshome-compare .col-home .head {
  flex-shrink: 0;
  padding: 44px 0 32px;
}
.prd-install-notice .capshome-compare .col-ask .cell:not(.head) {
  min-height: 160px;
  padding: 32px 40px;
}
.prd-install-notice .capshome-compare .col-cam .cell:not(.head) {
  min-height: 160px;
  padding: 32px 0;
}
.prd-install-notice .capshome-compare .col-home .cell:not(.head) {
  min-height: 180px;
  padding: 30px 40px;
}
/* 시안은 아래 여백 48px 이지만 내용이 여백을 8px 침범해 칸이 180px 입니다. 같은 높이가 되도록 39px 로 둡니다. */
.prd-install-notice .capshome-compare .col-home .cell:last-child {
  padding-bottom: 39px;
}
.prd-install-notice .capshome-compare .col-home .cell:last-child .cell-icon {
  margin-bottom: 12px;
}
.prd-install-notice .capshome-compare .col-ask .cell + .cell {
  border-top: 1px solid rgba(255, 255, 255, 0.3);
}
.prd-install-notice .capshome-compare .col-cam .cell + .cell {
  border-top: 1px solid var(--prd-line);
}
.prd-install-notice .capshome-compare .col-home .cell + .cell {
  border-top: 1px solid rgba(204, 220, 255, 0.3);
}
.prd-install-notice .capshome-compare .col-ask .cell {
  align-items: flex-start;
  padding-left: 40px;
  padding-right: 40px;
}
.prd-install-notice .capshome-compare .ask-txt {
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
  word-break: keep-all;
}
.prd-install-notice .capshome-compare .head-logo {
  display: block;
  width: 110px;
  height: 67px;
}
.prd-install-notice .capshome-compare .head-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.prd-install-notice .capshome-compare .head-tit {
  color: #1d1d1d;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}
.prd-install-notice .capshome-compare .cell-icon {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-bottom: 16px;
}
/* 아이콘 파일은 시안 아이콘 프레임을 1배로 뽑은 것이라 원본 크기 그대로 30px 칸 가운데에 둡니다. */
.prd-install-notice .capshome-compare .cell-icon img {
  flex-shrink: 0;
  max-width: none;
}
.prd-install-notice .capshome-compare .cell-tit {
  margin: 0;
  color: var(--prd-black);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.4;
  letter-spacing: -0.22px;
  text-align: center;
  word-break: keep-all;
}
.prd-install-notice .capshome-compare .cell-tit span {
  color: var(--prd-blue);
}
.prd-install-notice .capshome-compare .cell-txt {
  margin: 8px 0 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
  text-align: center;
  word-break: keep-all;
}
.prd-install-notice .capshome-compare .col-cam .cell-txt {
  margin: 0;
  color: var(--prd-gray-70);
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-install-notice .capshome-compare .col-ask .cell {
    padding-left: 24px;
    padding-right: 24px;
  }
  .prd-install-notice .capshome-compare .col-home .cell:not(.head) {
    padding: 24px 20px;
  }
  .prd-install-notice .capshome-compare .ask-txt {
    font-size: 18px;
    letter-spacing: -0.18px;
  }
  .prd-install-notice .capshome-compare .head-tit,
  .prd-install-notice .capshome-compare .cell-tit {
    font-size: 20px;
    letter-spacing: -0.2px;
  }
  .prd-install-notice .capshome-compare .cell-txt {
    font-size: 16px;
    letter-spacing: -0.16px;
  }
}
@media (max-width: 1023px) {
  /* 모바일 시안은 위 여백 없이 앞 섹션(설치 가이드)의 아래 여백 72px 만 둡니다. */
  .prd-install-notice .capshome-compare {
    padding: 0 20px 72px;
  }
  .prd-install-notice .capshome-compare .tit-wrap {
    margin-bottom: 40px;
    text-align: center;
  }
  .prd-install-notice .capshome-compare .tit {
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }
  /* 모바일 표는 375 폰 기준(글자·칸 높이 px 고정)이라 폭만 늘면 텅 비어 보입니다.
     태블릿 폭(~1023)에서도 큰 폰 정도 폭으로 묶어 가운데 둡니다. */
  .prd-install-notice .capshome-compare .table {
    display: flex;
    align-items: flex-start;
    overflow: visible;
    max-width: 480px;
    margin: 0 auto;
  }
  /* 질문 열은 모바일에서 노출하지 않습니다. */
  .prd-install-notice .capshome-compare .col-ask {
    display: none;
  }
  /* 시안 335px 중 223px(66.57%). 테두리 두께와 관계없이 이 비율을 지킵니다. */
  .prd-install-notice .capshome-compare .col-home {
    flex: 0 0 66.57%;
    margin: 0;
    border-radius: 8px;
    /* PC 와 같이 안쪽 테두리로 긋습니다(크기에 더하지 않음). */
    outline-width: 3px;
    outline-offset: -3px;
    box-shadow: 4px 8px 30px 0 rgba(0, 0, 0, 0.2);
  }
  /* 일반 홈카메라 열은 캡스홈 열보다 30px 내려서 시작합니다. */
  .prd-install-notice .capshome-compare .col-cam {
    flex: 1 1 0;
    margin: 30px 0 0;
    border-radius: 0 8px 8px 0;
  }
  .prd-install-notice .capshome-compare .col-home .head {
    justify-content: center;
    height: 79px;
    padding: 0;
  }
  .prd-install-notice .capshome-compare .col-cam .cell.head {
    height: 50px;
  }
  .prd-install-notice .capshome-compare .col-home .cell:not(.head),
  .prd-install-notice .capshome-compare .col-home .cell:last-child {
    flex: 0 0 130px;
    min-height: 0;
    padding: 20px 8px;
  }
  .prd-install-notice .capshome-compare .col-cam .cell:not(.head) {
    flex: 0 0 125px;
    min-height: 0;
    padding: 0 8px;
  }
  /* 시안은 PC 아이콘(30px 칸)을 0.8배로 줄인 24px 칸입니다. 칸째 줄이고 줄어든 만큼 여백을 당깁니다. */
  .prd-install-notice .capshome-compare .cell-icon,
  .prd-install-notice .capshome-compare .col-home .cell:last-child .cell-icon {
    margin: -3px 0 3px;
    transform: scale(0.8);
  }
  .prd-install-notice .capshome-compare .head-logo {
    width: 51px;
    height: 31px;
  }
  .prd-install-notice .capshome-compare .head-tit {
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.14px;
  }
  .prd-install-notice .capshome-compare .cell-tit {
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
  }
  .prd-install-notice .capshome-compare .cell-txt {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1.4;
    letter-spacing: -0.24px;
  }
  .prd-install-notice .capshome-compare .col-cam .cell-txt {
    margin-top: 0;
  }
}

/* ==================== 필드 5 : .prd-compare (css/prd-compare.css) ==================== */
/* ========== capshome-common.css ========== */
/* 모든 캡스홈 PDP 섹션이 함께 쓰는 값·스타일입니다.
   섹션 CSS 보다 먼저 불러오세요.
   PDP 규칙상 html·body·* 같은 전역 선택자는 쓰지 않고, 섹션 클래스에만 걸어 둡니다. */
.prd-compare .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-compare .is-reveal-pending {
  opacity: 0 !important;
}
.prd-compare .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-compare .is-reveal-pending {
    opacity: 1 !important;
  }
  .prd-compare .is-revealed {
    animation: none;
  }
}
.prd-compare .capshome-options br.mo {
  display: none;
}
.prd-compare .capshome-options br.pc {
  display: inline;
}
@media (max-width: 1023px) {
  .prd-compare .capshome-options br.mo {
    display: inline;
  }
  .prd-compare .capshome-options br.pc {
    display: none;
  }
}
.prd-compare .capshome-options {
  --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-compare .capshome-options .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}
.prd-compare .capshome-options .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
.capshome-options .popup-foot {
  display: none;
}
/* ─────────────────────────────────────────────
   팝업 공통 (options·plan 이 함께 씁니다)
   ───────────────────────────────────────────── */
/* 모달이 body 바로 아래로 옮겨질 때 쓰는 컨테이너. 섹션 스타일만 지우고 변수는 유지합니다. */
.capshome-options.popup-portal {
  /* 포털은 .prd-compare 밖이라 컨테이너 토큰이 상속되지 않습니다. 여기서 다시 선언합니다. */
  --prd-black: #000000;
  --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-bg: #f5f5f5;
  --prd-white: #ffffff;
  width: auto;
  padding: 0;
  background: none;
}
.capshome-options .popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  touch-action: none;
}
.capshome-options .popup.is-active {
  display: flex;
}
.capshome-options .popup-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  touch-action: none;
}
.capshome-options .popup-box {
  position: relative;
  display: flex;
  overflow: hidden;
  flex-direction: column;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 12px;
  background: var(--prd-white);
  touch-action: pan-x pan-y;
}
.capshome-options .popup-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  height: 74px;
  padding: 0 24px;
  border-bottom: 1px solid #efefef;
}
.capshome-options .popup-tit {
  margin: 0;
  color: var(--prd-black);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}
.capshome-options .popup-close {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--prd-black);
  font-size: 24px;
  line-height: 1;
}
.capshome-options .popup-body {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
@media (max-width: 1023px) {
  /* 모바일은 상단 105px을 비우고 하단에 붙입니다. */
  .capshome-options .popup {
    align-items: flex-end;
    padding: 0;
  }
  .capshome-options .popup-box {
    width: 100%;
    height: calc(100% - 105px);
    max-height: calc(100% - 105px);
    border-radius: 12px 12px 0 0;
  }
  .capshome-options .popup-head {
    height: 56px;
    padding: 0 20px;
  }
  .capshome-options .popup-tit {
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.32px;
  }
  .capshome-options .popup-foot {
    display: block;
    flex-shrink: 0;
    padding: 16px 20px max(34px, env(safe-area-inset-bottom));
    background: var(--prd-white);
  }
  .capshome-options .popup-confirm {
    width: 100%;
    height: 48px;
    color: var(--prd-white);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    border-radius: 6px;
    background: var(--prd-black);
  }
  /* 열릴 때 딤은 서서히 나타나고, 상자는 아래에서 위로 올라옵니다.
     팝업이 display:none 에서 바뀌므로 transition 대신 keyframes 를 씁니다. */
  .capshome-options .popup.is-active .popup-dim {
    animation: capshome-popup-dim-in 0.3s ease-out;
  }
  .capshome-options .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-options .popup.is-active .popup-dim,
  .capshome-options .popup.is-active .popup-box {
    animation: none;
  }
}
/* ========== capshome-options.css ========== */
.prd-compare .capshome-options {
  width: 100%;
  padding: 140px 40px;
  background: var(--prd-dim);
}
.prd-compare .capshome-options .tit-wrap {
  max-width: 1440px;
  margin: 0 auto 80px;
  text-align: center;
}
.prd-compare .capshome-options .sub-tit {
  margin: 0;
  color: var(--prd-blue);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}
.prd-compare .capshome-options .tit {
  margin: 12px 0 0;
}
.prd-compare .capshome-options .txt {
  margin: 24px 0 0;
}
.prd-compare .capshome-options .con {
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
}
.prd-compare .capshome-options .card-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.prd-compare .capshome-options .card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 20px;
  background: var(--prd-white);
  box-shadow: 8px 20px 34px rgba(0, 0, 0, 0.05);
}
.prd-compare .capshome-options .card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 40px 40px 0;
}
.prd-compare .capshome-options .card-head {
  text-align: center;
}
.prd-compare .capshome-options .card-tit {
  margin: 0;
  color: var(--prd-blue-dark);
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.64px;
}
.prd-compare .capshome-options .card-lead {
  margin: 6px 0 0;
  color: var(--prd-gray-70);
  font-weight: 500;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
}
/* 높이를 고정하면 카드 폭이 바뀔 때(태블릿·1023 이하 1열) 납작하거나 각져 보여
   원본 비율(378x212)로 묶습니다. PC 1440 에서는 기존과 같은 212px 입니다. */
.prd-compare .capshome-options .card-img {
  overflow: hidden;
  margin-top: 32px;
  aspect-ratio: 378 / 212;
  border-radius: 12px;
  background: #ededed;
}
.prd-compare .capshome-options .card-img picture {
  display: block;
  width: 100%;
  height: 100%;
}
.prd-compare .capshome-options .card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 카드 폭이 화면 따라 바뀌어 강제 <br> 대신 자동 줄바꿈을 씁니다.
   단어 단위로 끊고(keep-all), 마지막 줄에 한 단어만 남지 않게 균형을 맞춥니다(pretty). */
.prd-compare .capshome-options .card-txt {
  margin: 32px 0 0;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
  word-break: keep-all;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
/* 설명 길이가 카드마다 달라도 추천 상황 줄이 아래에서 맞춰집니다. */
.prd-compare .capshome-options .card-rec {
  margin-top: auto;
  padding: 28px 0 32px;
}
.prd-compare .capshome-options .rec-tit {
  margin: 0;
  color: var(--prd-gray-70);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
}
.prd-compare .capshome-options .tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.prd-compare .capshome-options .tag {
  display: flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  color: var(--prd-blue);
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
  border-radius: 6px;
  background: var(--prd-blue-pale);
}
/* 1024~1239 는 카드 폭이 좁아 태그 3개가 두 줄로 넘어가므로, 글자·여백을 조금 줄여 한 줄을 지킵니다. */
@media (min-width: 1024px) and (max-width: 1239px) {
  .prd-compare .capshome-options .tag-list {
    gap: 4px;
  }
  .prd-compare .capshome-options .tag {
    padding: 0 8px;
    font-size: 14px;
    letter-spacing: -0.28px;
  }
}
.prd-compare .capshome-options .btn-detail {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  /* 시안: 위 선 1px + 위아래 여백 28px + 글줄 28px */
  height: 85px;
  color: var(--prd-gray-40);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
  border-top: 1px solid #efefef;
  transition: color 0.2s ease, background 0.2s ease;
}
.prd-compare .capshome-options .btn-detail:hover {
  color: var(--prd-blue);
}
/* + 아이콘 이미지(2배 PNG). 기본 48x48(24 칸), hover 40x40(20 칸)으로 여백만 달라
   각각 원래 크기로 가운데에 두면 + 모양(약 14.5px)의 크기·위치가 같습니다. */
.prd-compare .capshome-options .btn-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url("https://images.ctfassets.net/6hqdqj4fjyeg/6ukelHYCry3mZxr3NCXaRr/5c43014ed759ddaf6bf14db6251d75b1/capshome-apartment-villa-options-plus.webp") center / 24px 24px no-repeat;
}
.prd-compare .capshome-options .btn-detail:hover .btn-icon {
  background-image: url("https://images.ctfassets.net/6hqdqj4fjyeg/3iAGdcDRMcKOcCJlU2yTxX/599ba32433152646dd200c45eaeb0c1f/capshome-apartment-villa-options-plus-on.webp");
}
.prd-compare .capshome-options .note {
  margin: 60px 0 0;
  color: var(--prd-gray-70);
  text-align: center;
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
/* 모달이 body 바로 아래로 옮겨질 때 쓰는 컨테이너. 섹션 스타일만 지우고 변수는 유지합니다. */
.capshome-options .popup-box {
  width: 720px;
}
.capshome-options .popup-body {
  padding: 20px 24px 40px;
}
/* 2배 PNG(48x48). 24px 아이콘 칸 전체(여백 포함)라 그대로 24px 로 고정합니다. */
.capshome-options .popup-close img {
  display: block;
  width: 24px;
  height: 24px;
}
.capshome-options .popup-img {
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 377px;
  border-radius: 12px;
  background: var(--prd-gray-bg);
}
.capshome-options .popup-img img,
.capshome-options .popup-img video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 영상 정지·재생 토글. 반복 재생되는 영상을 멈출 수 있게(KWCAG 자동 변경 콘텐츠 제어) 영상 위에 항상 보이게 둡니다.
   아이콘은 CSS 로 그립니다: 기본은 정지(두 막대), .is-paused 일 때 재생(삼각형). */
.capshome-options .popup-video-toggle {
  position: absolute;
  right: 12px;
  bottom: 12px;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.5);
  cursor: pointer;
}
.capshome-options .popup-video-toggle::before,
.capshome-options .popup-video-toggle::after {
  position: absolute;
  top: 50%;
  width: 3px;
  height: 12px;
  border-radius: 1px;
  background: var(--prd-white, #ffffff);
  transform: translateY(-50%);
  content: "";
}
.capshome-options .popup-video-toggle::before {
  left: 11px;
}
.capshome-options .popup-video-toggle::after {
  right: 11px;
}
.capshome-options .popup-video-toggle.is-paused::before {
  left: 12px;
  width: 0;
  height: 0;
  border-width: 7px 0 7px 11px;
  border-style: solid;
  border-color: transparent transparent transparent var(--prd-white, #ffffff);
  border-radius: 0;
  background: none;
}
.capshome-options .popup-video-toggle.is-paused::after {
  display: none;
}
.capshome-options .popup-info {
  margin-top: 16px;
}
.capshome-options .feat-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 32px;
  margin: 0;
  padding: 0 8px;
}
/* 홀수 개일 때 마지막 항목은 시안처럼 한 줄을 다 씁니다. */
.capshome-options .feat:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.capshome-options .feat {
  display: flex;
  padding: 12px 0 0;
  gap: 12px;
  align-items: center;
}
.capshome-options .feat-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
}
.capshome-options .feat-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.capshome-options .feat-tit {
  margin: 0;
  color: #1d1d1d;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
  letter-spacing: -0.16px;
}
.capshome-options .feat-txt {
  margin-top: 4px;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.16px;
}
@media (min-width: 1024px) and (max-width: 1439px) {
  .prd-compare .capshome-options .card-list {
    gap: 20px;
  }
  .prd-compare .capshome-options .card-body {
    padding: 28px 24px 0;
  }
}
@media (max-width: 1023px) {
  .prd-compare .capshome-options {
    padding: 72px 20px;
  }
  .prd-compare .capshome-options .tit-wrap {
    margin-bottom: 40px;
  }
  .prd-compare .capshome-options .sub-tit {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.18px;
  }
  .prd-compare .capshome-options .tit {
    margin-top: 8px;
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }
  .prd-compare .capshome-options .txt {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
    word-break: keep-all;
  }
  .prd-compare .capshome-options .con {
    width: 100%;
  }
  .prd-compare .capshome-options .card-list {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  /* 1열이라 태블릿 폭(~1023)에서 카드가 너무 넓어지지 않게 묶고 가운데 둡니다. */
  .prd-compare .capshome-options .card {
    width: 100%;
    max-width: 550px;
    margin: 0 auto;
    border-radius: 8px;
    box-shadow: none;
  }
  .prd-compare .capshome-options .card-body {
    padding: 28px 20px 0;
  }
  .prd-compare .capshome-options .card-tit {
    font-weight: 600;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -0.22px;
  }
  .prd-compare .capshome-options .card-lead {
    margin-top: 6px;
    color: var(--prd-gray-40);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .prd-compare .capshome-options .card-img {
    margin-top: 20px;
    border-radius: 8px;
  }
  .prd-compare .capshome-options .card-txt {
    margin-top: 20px;
    padding: 0 4px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .prd-compare .capshome-options .card-rec {
    padding: 20px 4px;
  }
  .prd-compare .capshome-options .rec-tit {
    color: var(--prd-gray-40);
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
  /* 시안은 태그 3개가 한 줄입니다. 폭이 빠듯해 2·3번 카드는 좌우 9px 로 줄이고,
     더 좁은 화면에서는 잘리지 않게 줄바꿈을 허용합니다. */
  .prd-compare .capshome-options .tag-list {
    gap: 3px;
    margin-top: 8px;
  }
  .prd-compare .capshome-options .tag {
    flex-shrink: 0;
    height: 32px;
    padding: 0 10px;
    white-space: nowrap;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .prd-compare .capshome-options .card:nth-child(2) .tag,
  .prd-compare .capshome-options .card:nth-child(3) .tag {
    padding: 0 9px;
  }
  .prd-compare .capshome-options .btn-detail {
    height: 64px;
    color: var(--prd-black);
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .prd-compare .capshome-options .btn-icon {
    width: 12px;
    height: 12px;
  }
  .prd-compare .capshome-options .note {
    margin-top: 40px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }
  .capshome-options .popup-head {
    gap: 16px;
  }
  .capshome-options .popup-close {
    width: 24px;
    height: 24px;
    margin-right: 0;
    font-size: 20px;
  }
  .capshome-options .popup-body {
    padding: 20px;
  }
  .capshome-options .popup-img {
    height: auto;
    aspect-ratio: 768 / 431.4;
    border-radius: 8px;
  }
  .capshome-options .popup-video-toggle {
    right: 8px;
    bottom: 8px;
  }
  .capshome-options .popup-info {
    margin-top: 20px;
    padding: 0 8px;
  }
  .capshome-options .feat-list {
    grid-template-columns: 1fr;
    gap: 16px;
    margin-top: 8px;
    padding: 0;
  }
  .capshome-options .feat {
    padding: 0;
    gap: 16px;
  }
  .capshome-options .feat-icon {
    width: 24px;
    height: 24px;
  }
  .capshome-options .feat-tit {
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .capshome-options .feat-txt {
    margin-top: 2px;
    color: var(--prd-gray-70);
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
}

/* ==================== 필드 6 : .prd-options (css/prd-options.css) ==================== */
/* ========== capshome-common.css ========== */
/* 모든 캡스홈 PDP 섹션이 함께 쓰는 값·스타일입니다.
   섹션 CSS 보다 먼저 불러오세요.
   PDP 규칙상 html·body·* 같은 전역 선택자는 쓰지 않고, 섹션 클래스에만 걸어 둡니다. */
.prd-options .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-options .is-reveal-pending {
  opacity: 0 !important;
}
.prd-options .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-options .is-reveal-pending {
    opacity: 1 !important;
  }
  .prd-options .is-revealed {
    animation: none;
  }
}
.prd-options .capshome-plan br.mo {
  display: none;
}
.prd-options .capshome-plan br.pc {
  display: inline;
}
@media (max-width: 1023px) {
  .prd-options .capshome-plan br.mo {
    display: inline;
  }
  .prd-options .capshome-plan br.pc {
    display: none;
  }
}
.prd-options .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-options .capshome-plan .tit {
  color: var(--prd-black);
  font-weight: 700;
  font-size: 48px;
  line-height: 1.4;
  letter-spacing: -1.44px;
}
.prd-options .capshome-plan .txt {
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 20px;
  line-height: 1.45;
  letter-spacing: -0.2px;
}
.capshome-plan .popup-foot {
  display: none;
}
/* ─────────────────────────────────────────────
   팝업 공통 (options·plan 이 함께 씁니다)
   ───────────────────────────────────────────── */
/* 모달이 body 바로 아래로 옮겨질 때 쓰는 컨테이너. 섹션 스타일만 지우고 변수는 유지합니다. */
.capshome-plan.popup-portal {
  /* 포털은 .prd-options 밖이라 컨테이너 토큰이 상속되지 않습니다. 여기서 다시 선언합니다. */
  --prd-black: #000000;
  --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-bg: #f5f5f5;
  --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;
  max-width: 100%;
  max-height: 90vh;
  border-radius: 12px;
  background: var(--prd-white);
  touch-action: pan-x pan-y;
}
.capshome-plan .popup-head {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: space-between;
  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;
  color: var(--prd-black);
  font-size: 24px;
  line-height: 1;
}
.capshome-plan .popup-body {
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y;
}
@media (max-width: 1023px) {
  /* 모바일은 상단 105px을 비우고 하단에 붙입니다. */
  .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;
    line-height: 1.4;
    letter-spacing: -0.32px;
  }
  .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;
    color: var(--prd-white);
    font-weight: 600;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
    border-radius: 6px;
    background: var(--prd-black);
  }
  /* 열릴 때 딤은 서서히 나타나고, 상자는 아래에서 위로 올라옵니다.
     팝업이 display:none 에서 바뀌므로 transition 대신 keyframes 를 씁니다. */
  .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;
  }
}
/* ========== capshome-plan.css ========== */
.prd-options .capshome-plan {
  width: 100%;
  padding: 140px 40px;
  background: var(--prd-white);
}
.prd-options .capshome-plan .tit-wrap {
  max-width: 1440px;
  margin: 0 auto 80px;
  text-align: center;
}
.prd-options .capshome-plan .sub-tit {
  margin: 0;
  color: var(--prd-blue);
  font-weight: 600;
  font-size: 24px;
  line-height: 1.4;
  letter-spacing: -0.24px;
}
.prd-options .capshome-plan .tit {
  margin: 12px 0 0;
}
.prd-options .capshome-plan .txt {
  margin: 24px 0 0;
}
.prd-options .capshome-plan .con {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
}
.prd-options .capshome-plan .card-list {
  display: flex;
  justify-content: center;
  gap: 32px;
}
.prd-options .capshome-plan .card {
  display: flex;
  /* 좌우 안쪽 여백이 카드마다 달라도(50px·40px) 폭은 같게 나눕니다.
     border-box 라 기준을 0 으로 두면 여백 차이만큼 폭이 갈리므로 같은 50% 에서 줄입니다. */
  flex: 1 1 50%;
  flex-direction: column;
  align-items: center;
  min-width: 0;
  padding: 48px 50px;
  border-radius: 12px;
  text-align: center;
}
.prd-options .capshome-plan .card.type-sub {
  background: rgba(204, 220, 255, 0.3);
}
.prd-options .capshome-plan .card.type-buy {
  padding: 48px 40px;
  background: rgba(0, 53, 148, 0.05);
}
.prd-options .capshome-plan .card-tit {
  margin: 0;
  font-weight: 700;
  font-size: 34px;
  line-height: 1.4;
  letter-spacing: -0.68px;
}
.prd-options .capshome-plan .type-sub .card-tit { color: var(--prd-blue); }
.prd-options .capshome-plan .type-buy .card-tit { color: var(--prd-navy); }
.prd-options .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-options .capshome-plan .visual {
  position: relative;
  width: min(100%, 494px);
  height: 252px;
  margin: 40px auto 0;
}
.prd-options .capshome-plan .glow {
  position: absolute;
  left: 50%;
  top: 0;
  width: min(294px, 60%);
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  transform: translateX(-50%);
}
.prd-options .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);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  max-width: calc(100% - 24px);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.6px;
  white-space: nowrap;
  animation: _capshome_chipFloat 3.6s ease-in-out infinite;
  will-change: transform;
}
.prd-options .capshome-plan .type-sub .chip { color: var(--prd-blue); }
.prd-options .capshome-plan .type-buy .chip { color: var(--prd-navy); }
/* 카드 너비와 무관하게 글로우(가운데) 기준으로 둡니다. 좌표는 594px 카드 시안 기준입니다. */
.prd-options .capshome-plan .chip-1 { left: 50%; top: 16px; margin-left: -147px; animation-delay: 0s; }
.prd-options .capshome-plan .chip-2 { left: 50%; top: 86px; margin-left: 43px; animation-delay: -1.2s; }
.prd-options .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-options .capshome-plan .chip {
    animation: none;
  }
}
.prd-options .capshome-plan .reco {
  width: 100%;
  margin: 40px 0 auto;
  text-align: left;
}
.prd-options .capshome-plan .reco-tit {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  color: #1d1d1d;
  font-weight: 600;
  font-size: 20px;
  line-height: 1.4;
  letter-spacing: -0.6px;
}
.prd-options .capshome-plan .reco-tit::before {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url("https://images.ctfassets.net/6hqdqj4fjyeg/7euMchkIjpC6gS0SPh7fqA/864092fa5a33ff674f6a8c9719cde5d4/capshome-apartment-villa-plan-check-1.webp") center / contain no-repeat;
  content: "";
}
/* 구매형 카드는 남색 체크입니다. */
.prd-options .capshome-plan .type-buy .reco-tit::before {
  background-image: url("https://images.ctfassets.net/6hqdqj4fjyeg/6xjuM2dbS81lR4nVmYcqVc/049d3b9b14b0fb55167e34daf18b5792/capshome-apartment-villa-plan-check-2.webp");
}
.prd-options .capshome-plan .reco-list {
  margin: 8px 0 0;
  padding-left: 36px;
}
/* 시안: 불릿 칸 6px + 간격 4px 뒤에 문구 (목록 왼쪽 36px 기준 문구 x=46). 하우스와 같은 방식입니다. */
.prd-options .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-options .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-options .capshome-plan .price {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 4px;
  width: 100%;
  min-height: 184px;
  margin-top: 40px;
  padding: 16px 20px;
  border-radius: 12px;
  background: var(--prd-white);
}
.prd-options .capshome-plan .price-row,
.prd-options .capshome-plan .price-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  padding: 16px 12px;
}
.prd-options .capshome-plan .price-row .price-label {
  color: var(--prd-gray-90);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.32px;
}
.prd-options .capshome-plan .price-row .price-val {
  color: var(--prd-gray-90);
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
}
.prd-options .capshome-plan .price-row .price-val span {
  margin-left: 2px;
  font-weight: 500;
  font-size: 16px;
}
.prd-options .capshome-plan .price-total {
  border-top: 1px solid var(--prd-line);
}
.prd-options .capshome-plan .price-total .price-label {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  min-width: 0;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  /* 괄호 앞에서 두 줄이 될 때 아래 '* 약정 별도'와 왼쪽 시작점을 맞춥니다. */
  text-align: left;
}
/* 구독형·구매형 중 하나라도 괄호 앞에서 줄이 바뀌면 JS 가 둘 다 is-stacked 를 붙여 함께 두 줄로 맞춥니다. */
.prd-options .capshome-plan .price-total .price-label.is-stacked .price-label-sub {
  display: block;
}
.prd-options .capshome-plan .price-total .price-label small {
  margin-top: 0;
  color: var(--prd-gray-90);
  font-weight: 500;
  font-size: 16px;
  letter-spacing: -0.32px;
}
/* 카드가 나란히 놓이는 PC 에서는 구매형 '* 약정 별도' 한 줄(16px × 1.5 = 24px)만큼 구독형 라벨 위아래에 절반씩 여백을 두어,
   두 카드의 라벨 높이를 맞추면서 구독형 문구는 세로 가운데에 놓이게 합니다. */
@media (min-width: 1024px) {
  .prd-options .capshome-plan .type-sub .price-total .price-label::before,
  .prd-options .capshome-plan .type-sub .price-total .price-label::after {
    height: 12px;
    content: "";
  }
}
.prd-options .capshome-plan .price-total .price-val {
  font-weight: 700;
  font-size: 32px;
  line-height: 1.4;
  letter-spacing: -0.64px;
}
.prd-options .capshome-plan .price-total .price-val span {
  margin-left: 2px;
  font-size: 18px;
}
.prd-options .capshome-plan .type-sub .price-total { color: var(--prd-blue); }
.prd-options .capshome-plan .type-buy .price-total { color: var(--prd-navy); }
.prd-options .capshome-plan .btn-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 256px;
  max-width: 100%;
  height: 64px;
  margin-top: 40px;
  border-radius: 8px;
  color: var(--prd-white);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.6px;
}
.prd-options .capshome-plan .type-sub .btn-cta { background: var(--prd-blue); }
.prd-options .capshome-plan .type-buy .btn-cta { background: var(--prd-navy); }
.prd-options .capshome-plan .banner {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  overflow: hidden;
  width: 100%;
  min-height: 225px;
  height: auto;
  margin-top: 80px;
  padding: 24px 72px;
  border: 1px solid rgba(204, 220, 255, 0.4);
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 12%, #d8f1ff 100%);
}
.prd-options .capshome-plan .banner-body {
  min-width: 0;
}
.prd-options .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-options .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-options .capshome-plan .banner-tit .em {
  color: var(--prd-blue);
}
.prd-options .capshome-plan .banner-img {
  /* 선물 상자는 시안처럼 배너 아래에 걸쳐 잘린 모양이라 아래 끝에 붙입니다. 좌표는 1200px 배너 기준(811px). */
  position: absolute;
  left: 67.58%;
  bottom: 0;
  width: min(230px, 28%);
  margin: 0;
}
/* 배너 전체가 /events/benefits 링크입니다. 호스트의 a 기본 스타일(밑줄·색)을 끊고, 포커스 테두리는 배너 모서리에 맞춥니다. */
.prd-options .capshome-plan .banner-link {
  display: block;
  border-radius: 12px;
  color: inherit;
  text-decoration: none;
}
.prd-options .capshome-plan .banner-link:focus-visible {
  outline: 2px solid var(--prd-blue);
  outline-offset: 4px;
}
.prd-options .capshome-plan .banner-img img {
  display: block;
  width: 100%;
  height: auto;
}
.prd-options .capshome-plan .btn-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  max-width: 100%;
  height: 64px;
  margin: 80px auto 0;
  padding: 0 30px;
  border: 1.5px solid var(--prd-gray-40);
  border-radius: 8px;
  color: var(--prd-black);
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.6px;
}
.prd-options .capshome-plan .btn-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  background: url("https://images.ctfassets.net/6hqdqj4fjyeg/12UJRtsfshVFv4qaw8nfcW/75a9dbac6bdf5ae0f1f7d6cb9bb9ca47/capshome-apartment-villa-plan-more.webp") center / 20px 20px no-repeat;
}
.capshome-plan .popup-box {
  width: 720px;
  box-shadow: 0 4px 32px rgba(53, 58, 63, 0.1);
}
.capshome-plan .popup-head {
  gap: 16px;
}
/* 2배 PNG(48x48). 24px 아이콘 칸 전체(여백 포함)라 그대로 24px 로 고정합니다. */
.capshome-plan .popup-close img {
  display: block;
  width: 24px;
  height: 24px;
}
.capshome-plan .popup-body {
  padding: 0 0 8px;
}
.capshome-plan .compare-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.capshome-plan .compare-table caption {
  position: absolute;
  overflow: hidden;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.capshome-plan .compare-table th,
.capshome-plan .compare-table td {
  padding: 32px 24px;
  border-bottom: 1px solid #efefef;
  color: var(--prd-gray-70);
  font-weight: 400;
  font-size: 18px;
  line-height: 1.6;
  letter-spacing: -0.18px;
  text-align: center;
  vertical-align: middle;
  word-break: keep-all;
}
.capshome-plan .compare-table .cell-corner,
.capshome-plan .compare-table tbody th {
  width: 140px;
}
.capshome-plan .compare-table tbody th {
  color: #1d1d1d;
  font-weight: 700;
}
.capshome-plan .compare-table tbody tr:last-child th,
.capshome-plan .compare-table tbody tr:last-child td {
  border-bottom: 0;
}
/* 팝업 본문(.popup-body)을 스크롤해도 비교 항목 머리행은 위에 붙여 둔다. */
.capshome-plan .compare-table thead th,
.capshome-plan .compare-table thead td {
  position: sticky;
  top: 0;
  z-index: 1;
  height: 82px;
  padding-top: 0;
  padding-bottom: 0;
  border-bottom: 0;
  color: #1d1d1d;
  font-weight: 700;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.2px;
  background: var(--prd-white);
  /* border-collapse 테두리는 sticky 셀을 따라오지 않아 아래 선을 그림자로 긋습니다. */
  box-shadow: inset 0 -1px 0 #d8d8d8;
}
/* 가운데(구매형 3년 약정) 열은 옅은 파랑으로 강조합니다. 머리행은 흰 배경 위에 겹칩니다. */
.capshome-plan .compare-table tbody td:nth-child(3) {
  background: rgba(204, 220, 255, 0.15);
}
.capshome-plan .compare-table thead th:nth-child(3) {
  background: linear-gradient(rgba(204, 220, 255, 0.15), rgba(204, 220, 255, 0.15)) var(--prd-white);
}
.capshome-plan .compare-table .nowrap {
  white-space: nowrap;
}
/* 팝업은 body 로 옮겨져 섹션 공통 br.mo 규칙이 닿지 않아 표 안에서 따로 정합니다. */
.capshome-plan .compare-table br.mo {
  display: none;
}
.capshome-plan .compare-table .cell-sub,
.capshome-plan .compare-table .cell-em {
  display: block;
  font-weight: 500;
}
.capshome-plan .compare-table .cell-sub {
  color: var(--prd-gray-90);
  font-size: 14px;
  line-height: 1.45;
  letter-spacing: -0.42px;
}
.capshome-plan .compare-table .cell-em {
  margin-top: 4px;
  color: #1d1d1d;
}
.capshome-plan .compare-table .cell-service {
  text-align: left;
}
.capshome-plan .svc-group + .svc-group {
  margin-top: 16px;
}
.capshome-plan .svc-tit {
  margin: 0 0 4px;
  font-weight: 600;
  line-height: 1.44;
}
.capshome-plan .svc-line {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
  margin: 0;
}
.capshome-plan .svc-line + .svc-line {
  margin-top: 2px;
}
.capshome-plan .svc-line span {
  white-space: nowrap;
}
/* 노트북 폭(1024~1799, 1920 모니터 배율 125% 인 1536 등 포함)은 화면 높이가 낮아 카드 전체가 한 화면에 들어오도록 줄입니다. 1800 이상 PC 는 1200px 기준 그대로입니다.
   칩 묶음은 높이 150px 배치(모바일과 같은 좌표)를 씁니다. */
@media (min-width: 1024px) and (max-width: 1799px) {
  .prd-options .capshome-plan {
    padding: 80px 40px;
  }
  .prd-options .capshome-plan .tit-wrap {
    margin-bottom: 40px;
  }
  .prd-options .capshome-plan .con {
    max-width: 1000px;
  }
  .prd-options .capshome-plan .card-list {
    gap: 20px;
  }
  .prd-options .capshome-plan .card,
  .prd-options .capshome-plan .card.type-buy {
    padding: 28px 32px;
  }
  .prd-options .capshome-plan .card-tit {
    font-size: 26px;
    letter-spacing: -0.52px;
  }
  .prd-options .capshome-plan .card-lead {
    margin-top: 4px;
    font-size: 16px;
    letter-spacing: -0.16px;
  }
  .prd-options .capshome-plan .visual {
    height: 150px;
    margin-top: 16px;
  }
  .prd-options .capshome-plan .glow {
    top: 50%;
    width: min(200px, 64%);
    transform: translate(-50%, -50%);
  }
  .prd-options .capshome-plan .chip {
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }
  .prd-options .capshome-plan .chip-1 { top: 14px; margin-left: -108px; }
  .prd-options .capshome-plan .chip-2 { top: 56px; margin-left: 22px; }
  .prd-options .capshome-plan .chip-3 { top: 99px; margin-left: -81px; }
  .prd-options .capshome-plan .reco {
    margin-top: 20px;
  }
  .prd-options .capshome-plan .reco-tit {
    gap: 8px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }
  .prd-options .capshome-plan .reco-tit::before {
    width: 20px;
    height: 20px;
  }
  .prd-options .capshome-plan .reco-list {
    margin-top: 4px;
    padding-left: 28px;
  }
  .prd-options .capshome-plan .reco-list li {
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.14px;
  }
  .prd-options .capshome-plan .price {
    gap: 0;
    min-height: 0;
    margin-top: 20px;
    padding: 8px 16px;
  }
  .prd-options .capshome-plan .price-row,
  .prd-options .capshome-plan .price-total {
    gap: 8px 16px;
    padding: 10px 4px;
  }
  .prd-options .capshome-plan .price-row .price-label {
    font-size: 14px;
    letter-spacing: -0.28px;
  }
  .prd-options .capshome-plan .price-row .price-val {
    font-size: 16px;
  }
  .prd-options .capshome-plan .price-row .price-val span {
    font-size: 14px;
  }
  .prd-options .capshome-plan .price-total .price-label {
    font-size: 16px;
    letter-spacing: -0.16px;
  }
  .prd-options .capshome-plan .price-total .price-label small {
    font-size: 13px;
    letter-spacing: -0.26px;
  }
  /* 구매형 '* 약정 별도' 한 줄(13px × 1.5 = 19.5px)의 절반씩입니다. */
  .prd-options .capshome-plan .type-sub .price-total .price-label::before,
  .prd-options .capshome-plan .type-sub .price-total .price-label::after {
    height: 9.75px;
  }
  .prd-options .capshome-plan .price-total .price-val {
    font-size: 24px;
    letter-spacing: -0.48px;
  }
  .prd-options .capshome-plan .price-total .price-val span {
    font-size: 15px;
  }
  .prd-options .capshome-plan .btn-cta {
    width: 200px;
    height: 48px;
    margin-top: 20px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }
  .prd-options .capshome-plan .btn-more {
    height: 48px;
    margin-top: 40px;
    padding: 0 24px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }
  .prd-options .capshome-plan .banner {
    min-height: 160px;
    margin-top: 40px;
    padding: 20px 48px;
  }
  .prd-options .capshome-plan .banner-sub {
    font-size: 16px;
    letter-spacing: -0.16px;
  }
  .prd-options .capshome-plan .banner-tit {
    font-size: 24px;
    letter-spacing: -0.48px;
  }
  .prd-options .capshome-plan .banner-img {
    width: min(170px, 26%);
  }
}
/* PC(1800 이상)는 폭·글자 크기는 1200px 기준 그대로 두고, 1080 화면에 카드가 다 들어오도록 세로 여백만 줄입니다. */
@media (min-width: 1800px) {
  .prd-options .capshome-plan {
    padding: 100px 40px;
  }
  .prd-options .capshome-plan .tit-wrap {
    margin-bottom: 56px;
  }
  .prd-options .capshome-plan .card {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .prd-options .capshome-plan .card.type-buy {
    padding-top: 36px;
    padding-bottom: 36px;
  }
  .prd-options .capshome-plan .visual {
    height: 200px;
    margin-top: 28px;
  }
  .prd-options .capshome-plan .glow {
    width: min(240px, 60%);
  }
  .prd-options .capshome-plan .chip-1 { top: 10px; }
  .prd-options .capshome-plan .chip-2 { top: 68px; }
  .prd-options .capshome-plan .chip-3 { top: 136px; }
  .prd-options .capshome-plan .reco {
    margin-top: 28px;
  }
  .prd-options .capshome-plan .price {
    min-height: 160px;
    margin-top: 28px;
  }
  .prd-options .capshome-plan .price-row,
  .prd-options .capshome-plan .price-total {
    padding-top: 12px;
    padding-bottom: 12px;
  }
  .prd-options .capshome-plan .btn-cta {
    margin-top: 28px;
  }
}
@media (max-width: 1023px) {
  .prd-options .capshome-plan {
    padding: 72px 20px;
  }
  .prd-options .capshome-plan .tit-wrap {
    margin-bottom: 40px;
  }
  .prd-options .capshome-plan .sub-tit {
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.18px;
  }
  .prd-options .capshome-plan .tit {
    margin-top: 8px;
    font-size: 25px;
    line-height: 1.4;
    letter-spacing: -0.25px;
  }
  .prd-options .capshome-plan .txt {
    margin-top: 8px;
    font-size: 16px;
    line-height: 1.4;
    letter-spacing: -0.48px;
  }
  .prd-options .capshome-plan .con {
    padding: 0;
  }
  .prd-options .capshome-plan .card-list {
    flex-direction: column;
    gap: 14px;
  }
  .prd-options .capshome-plan .card,
  .prd-options .capshome-plan .card.type-buy {
    padding: 28px 20px;
    border-radius: 8px;
  }
  .prd-options .capshome-plan .type-sub .card-tit,
  .prd-options .capshome-plan .type-buy .card-tit {
    color: var(--prd-blue-dark);
    font-weight: 600;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -0.22px;
  }
  .prd-options .capshome-plan .card-lead {
    margin-top: 6px;
    font-weight: 500;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .prd-options .capshome-plan .visual {
    width: min(100%, 494px);
    height: 150px;
    margin-top: 20px;
  }
  /* 칩 영역(150px)보다 크므로 가운데를 기준으로 번지게 둡니다. */
  .prd-options .capshome-plan .glow {
    top: 50%;
    width: min(200px, 64%);
    height: auto;
    transform: translate(-50%, -50%);
  }
  .prd-options .capshome-plan .chip {
    height: 40px;
    padding: 0 16px;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .prd-options .capshome-plan .chip-1 { left: 50%; top: 14px; margin-left: -108px; }
  .prd-options .capshome-plan .chip-2 { left: 50%; top: 56px; margin-left: 22px; }
  .prd-options .capshome-plan .chip-3 { left: 50%; top: 99px; margin-left: -81px; }
  .prd-options .capshome-plan .reco {
    margin-top: 20px;
  }
  .prd-options .capshome-plan .reco-tit {
    gap: 4px;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.5;
    letter-spacing: -0.32px;
  }
  .prd-options .capshome-plan .reco-tit::before {
    width: 20px;
    height: 20px;
  }
  .prd-options .capshome-plan .reco-list {
    margin-top: 6px;
    padding-left: 8px;
  }
  .prd-options .capshome-plan .reco-list li {
    font-size: 12px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
  .prd-options .capshome-plan .reco-list li::before {
    top: calc(0.75em - 2px);
    width: 3px;
    height: 3px;
  }
  .prd-options .capshome-plan .price {
    gap: 0;
    min-height: 0;
    margin-top: 20px;
    padding: 20px 12px;
    border-radius: 6px;
  }
  .prd-options .capshome-plan .price-row,
  .prd-options .capshome-plan .price-total {
    gap: 4px;
  }
  .prd-options .capshome-plan .price-row {
    padding: 0 4px;
  }
  .prd-options .capshome-plan .price-row .price-label {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
  .prd-options .capshome-plan .price-row .price-val {
    font-size: 16px;
  }
  .prd-options .capshome-plan .price-row .price-val span {
    font-weight: 400;
    font-size: 14px;
  }
  .prd-options .capshome-plan .price-total {
    margin-top: 16px;
    padding: 16px 4px 0;
  }
  .prd-options .capshome-plan .price-total .price-label {
    font-weight: 600;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.28px;
  }
  .prd-options .capshome-plan .price-total .price-label small {
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    letter-spacing: -0.42px;
  }
  .prd-options .capshome-plan .price-total .price-val {
    font-size: 20px;
    line-height: 1.5;
    letter-spacing: -0.2px;
  }
  .prd-options .capshome-plan .price-total .price-val span {
    font-weight: 600;
    font-size: 14px;
  }
  .prd-options .capshome-plan .btn-cta {
    width: 207px;
    height: 48px;
    margin-top: 20px;
    font-size: 16px;
    letter-spacing: -0.32px;
  }
  .prd-options .capshome-plan .btn-more {
    width: 260px;
    height: 48px;
    margin-top: 40px;
    padding: 0 28px;
    font-size: 16px;
    letter-spacing: -0.32px;
    border-radius: 6px;
  }
  /* 모바일 시안은 오른쪽 화살표입니다(아래 화살표 아이콘을 돌려 씁니다). */
  .prd-options .capshome-plan .btn-icon {
    width: 20px;
    height: 20px;
    transform: rotate(-90deg);
  }
  .prd-options .capshome-plan .banner {
    position: relative;
    display: block;
    min-height: 0;
    height: 196px;
    margin-top: 40px;
    padding: 23px;
    border-radius: 8px;
    background: linear-gradient(180deg, #ffffff 0%, #d8f1ff 100%);
  }
  .prd-options .capshome-plan .banner-sub {
    color: var(--prd-black);
    font-weight: 500;
    font-size: 14px;
    line-height: 1.4;
    letter-spacing: -0.42px;
    opacity: 0.5;
  }
  .prd-options .capshome-plan .banner-tit {
    margin-top: 4px;
    font-size: 22px;
    line-height: 1.45;
    letter-spacing: -0.66px;
  }
  .prd-options .capshome-plan .banner-img {
    position: absolute;
    left: auto;
    right: 34px;
    bottom: 26px;
    width: 72px;
    margin: 0;
  }
  .capshome-plan .popup-body {
    padding: 0;
  }
  .capshome-plan .compare-table th,
  .capshome-plan .compare-table td {
    padding: 32px 8px;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
  }
  /* 첫 열은 시안 86px, 왼쪽 20px 여백에 왼쪽 정렬입니다. */
  .capshome-plan .compare-table .cell-corner,
  .capshome-plan .compare-table tbody th {
    width: 86px;
    padding-right: 0;
    padding-left: 20px;
    text-align: left;
  }
  .capshome-plan .compare-table tbody th {
    font-weight: 600;
  }
  .capshome-plan .compare-table thead th,
  .capshome-plan .compare-table thead td {
    height: 80px;
    padding-top: 0;
    padding-bottom: 0;
    border-top: 1px solid #efefef;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: 0;
    box-shadow: inset 0 -1px 0 #efefef;
  }
  .capshome-plan .compare-table td:last-child,
  .capshome-plan .compare-table th:last-child {
    padding-right: 20px;
  }
  /* 모바일 3열 폭에서는 한 줄 고정을 풀어 줄바꿈을 허용합니다. */
  .capshome-plan .compare-table .nowrap {
    white-space: normal;
  }
  .capshome-plan .compare-table br.mo {
    display: inline;
  }
  .capshome-plan .compare-table .cell-sub {
    font-size: 12px;
    line-height: 1.33;
    letter-spacing: -0.12px;
  }
  .capshome-plan .compare-table .cell-em {
    margin-top: 6px;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.42px;
  }
  .capshome-plan .compare-table .cell-service {
    padding-left: 8px;
  }
  .capshome-plan .svc-group + .svc-group {
    margin-top: 16px;
  }
  /* 모바일은 PC 줄 묶음을 풀고 해시태그를 한 흐름으로 이어 칸 폭에 맞춰 줄바꿈합니다. */
  .capshome-plan .svc-group {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 6px;
  }
  .capshome-plan .svc-tit {
    flex-basis: 100%;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1.45;
    letter-spacing: -0.42px;
  }
  .capshome-plan .svc-line {
    display: contents;
  }
}
/* ── 태블릿 폭(~1023) 보정 ──
   모바일 시안은 375 폰 기준이라 넓은 모바일·태블릿 폭에서 높이 고정은 납작해지고,
   비율로 커지는 묶음은 과하게 커집니다. 배경·히어로는 폭에 비례하되 900px 에서 멈추고,
   카드·이미지 묶음은 큰 폰 폭 정도로 묶어 가운데 둡니다. 375 폰에서는 이전과 같습니다. */
@media (max-width: 1023px) {
  .prd-options .capshome-plan .card-list,
  .prd-options .capshome-plan .banner-link,
  .prd-options .capshome-plan .banner {
    max-width: 594px;
    margin-left: auto;
    margin-right: auto;
  }
}