/* 12 CCTV (Figma: 12 cctv — Property 1=pc 1:3027 · tablet 1:2983 · mobile 1:2940) */

.cctv-page { width: 900px; margin: 0 auto; padding-bottom: 150px; }

/* 화면별 줄바꿈: cctv-br-p(PC) · cctv-br-t(태블릿) · cctv-br-m(모바일) 조합 */
br[class*="cctv-br-"] { display: none; }
@media (min-width: 1024px) { br.cctv-br-p { display: inline; } }
@media (min-width: 768px) and (max-width: 1023px) { br.cctv-br-t { display: inline; } }
@media (max-width: 767px) { br.cctv-br-m { display: inline; } }

.cctv-title { font-size: 30px; font-weight: 600; line-height: normal; color: #000; }
.cctv-title--center { text-align: center; }

/* ── 1. 제품 정보 ── */
.cctv-intro { display: flex; flex-direction: column; align-items: center; gap: 50px; }
.cctv-intro-row { display: flex; align-items: center; gap: 50px; width: 800px; }
.cctv-pic { flex: none; width: 350px; height: 350px; border-radius: 20px; overflow: hidden; }
.cctv-pic img { width: 100%; height: 100%; object-fit: contain; }
.cctv-spec { margin: 0; display: flex; flex-direction: column; gap: 20px; width: 400px; font-size: 15px; line-height: 20px; }
.cctv-spec-row { display: grid; grid-template-columns: 110px 300px; column-gap: 10px; align-items: start; }
.cctv-spec dt { font-weight: 600; color: #000; letter-spacing: -0.12px; }
.cctv-spec-row:first-child dt { letter-spacing: 0.196px; }
.cctv-spec dd { margin: 0; font-weight: 500; color: #707070; letter-spacing: -0.12px; }

/* ── 2. 특징 카드 ── */
.cctv-feat { display: flex; flex-direction: column; gap: 50px; margin-top: 150px; }
.cctv-feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: 24px; height: 564px; }
.cctv-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  padding: 35px 30px;
  border-radius: 20px;
  overflow: hidden;
}
.cctv-card-bg { position: absolute; inset: 0; z-index: -1; }
.cctv-card-bg img { width: 100%; height: 100%; object-fit: cover; }
.cctv-card-title { font-size: 20px; font-weight: 600; line-height: normal; color: #000; }
.cctv-card-desc { font-size: 15px; font-weight: 500; line-height: 1.3; color: #707070; }

/* ── 3. 비교표 ── */
.cctv-cmp { display: flex; flex-direction: column; gap: 50px; margin-top: 150px; }
.cctv-cmp-img img { width: 100%; height: auto; }

/* ───────── 태블릿 (디자인 800) ───────── */
@media (max-width: 1023px) {
  .cctv-page { width: min(650px, 100% - 40px); padding-bottom: 100px; }
  .cctv-title { font-size: 25px; }
  .cctv-intro { gap: 36.111px; }
  .cctv-intro-row { gap: 36.111px; width: 592px; max-width: 100%; }
  .cctv-pic { width: 252.778px; height: 252.778px; border-radius: 14.444px; }
  .cctv-spec { gap: 14.444px; width: 303.333px; font-size: 13px; }
  .cctv-spec-row { grid-template-columns: 79.444px 216.667px; column-gap: 7.222px; }
  .cctv-feat { gap: 30px; margin-top: 100px; }
  .cctv-feat-grid { gap: 15px; height: 407.333px; }
  .cctv-card { gap: 7.222px; padding: 25.278px 21.667px; }
  .cctv-card-title { font-size: 15px; }
  .cctv-card-desc { font-size: 12px; }
  .cctv-cmp { gap: 30px; margin-top: 100px; }
}

/* ───────── 모바일 (디자인 375) ───────── */
@media (max-width: 767px) {
  .cctv-page { width: calc(100% - 54px); padding-top: 52.5px; padding-bottom: 50px; }
  .cctv-title { font-size: 20px; }
  .cctv-intro-row { flex-direction: column; align-items: flex-start; width: 250px; }
  .cctv-spec { width: 251px; }
  .cctv-feat { margin-top: 50px; }
  .cctv-feat-grid { gap: 10px 11px; height: 332px; }
  .cctv-card { border-radius: 14.444px; }
  .cctv-cmp { margin-top: 50px; }
}