/* ====================================================================
   COMMON.CSS
   모든 서브페이지에서 공통으로 사용하는 스타일
   (변수 / 리셋 / 헤더 / 푸터 / 버튼 / 태그·체크아이템 / 스크롤 애니메이션)
   ==================================================================== */

:root {
  --red: #e60012;
  --red-dark: #c41c14;
  --navy: #191919;
  --navy2: #1b2030;
  --ink: #191919;
  --gray: #6b6f76;
  --line: #cbcbcc;
  --line-light: #e1e1e1;
  --bg-soft: #f6f6f8;
  --pink: #fbeaf0;
  --title-h2: 40px;
  --white:#fff;
}

/* ==================== RESET ==================== */

html {
  font-synthesis: none;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  word-break: keep-all;
}

body #cta *,
body .cctv-page main#cctv-main {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif !important;
  color: var(--ink);
  line-height: 1.5;
  /* background: var(--white); */
}

img {
  display: block;
  max-width: 100%;
}

a {
  text-decoration: none;
  color: inherit;
}

ul {
  list-style: none;
}

/* ==================== LAYOUT UTIL ==================== */
.wrap {
  max-width: 1420px;
  margin: 0 auto;
}

.accent {
  color: var(--red) !important;
  font-weight: 800 !important;
}

/* 섹션 공통 여백 (서브페이지 콘텐츠 블록에도 재사용) */
section {
  padding: 80px 20px;
}

/* 섹션 대제목 (pain/solutions/stats/solved/checklist 등에서 공통 사용) */
.sec-title {
  font-size: var(--title-h2);
  font-weight: 600;
  line-height: 1.4;
}
/* ==================== HEADER ==================== */
/* header {
  background: var(--navy);
  position: fixed;
    padding: 14px 20px;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 20;
  transition: box-shadow .25s ease, background .25s ease;
}

header.scrolled {
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35);
}

.header-inner {
  max-width: 1420px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--white);
  font-weight: 800;
  font-size: 22px;
  letter-spacing: 0.5px;
}

.logo img {
  width: 200px;
}

.logo span {
  display: block;
  font-size: 15px;
  font-weight: 400;
  color: #b9bcc6;
  letter-spacing: 0;
  margin-top: -2px;
}

nav {
  display: flex;
  align-items: center;
  gap: 38px;
}

nav a {
  color: #e7e7ea;
  font-size: 14.5px;
  font-weight: 500;
} */

/* 기본 1뎁스 */
/* nav > ul {
  display: flex; /* 가로 정렬 */
  /*gap: 4px;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: stretch;
}

nav > ul > li {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 150px;
}

nav > ul > li > a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 16px 14px;
  font-size: 16px;
  font-weight: 600;
  color: #e7e7ea;
  border-radius: 4px;
  transition: background .2s ease, color .2s ease;
}

nav > ul > li > a:hover,
nav > ul > li:hover > a {
  background: #361215;
  color: var(--white);
} */



/* =========================
   MEGA MENU OPEN
========================= */

/*
  nav에 마우스가 올라가면
  전체 메가메뉴 표시
*/
/* .gnb:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
} */


/* GNB를 메가메뉴 위치 기준으로 */
/* .gnb {
  position: relative;
  height: 100%;
} */

/* 메가메뉴 */
/* .mega-menu {
 position: absolute;
  top: 100%;
  left: 0;
  width: 100%;

  background: #1a202e; */

  /* 배경만 좌우 화면 끝까지 확장 */
  /* box-shadow: 0 0 0 100vmax #1a202e;
  clip-path: inset(0 -100vmax);

  opacity: 0;
  visibility: hidden;
  pointer-events: none;
} */



/* 실제 서브메뉴 내용 */
/* .mega-menu-inner {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));

  width: 100%;

  margin: 0;
  padding: 25px 0 35px;

  box-sizing: border-box;
} */

/* 각각의 서브메뉴 */
/* .mega-menu-inner > ul {
  margin: 0;
  padding: 0;
  padding-left: 10px;

  list-style: none;
  border-right: 1px solid #373b44;
;
}

.mega-menu-inner > ul > li {
  margin: 0;

}

.mega-menu-inner > ul > li + li {
  margin-top: 20px;
  
}

.mega-menu-inner > ul > li > a {
  display: block;

  color: #bac5d9;

  font-size: 14px;
  font-weight: 500;
  line-height: 1.4;
  text-decoration: none;

  transition: color 0.2s ease;
}

.mega-menu-inner > ul > li > a:hover {
  color: #ff959e;
} */

/* 열기 */
/* .gnb:hover .mega-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
} */
/* 헤더 오른쪽 */
/* .header-right {
  display: flex;
  align-items: center;
  gap: 24px;
}

.phone-badge {
  color: var(--white);
  font-weight: 700;
  font-size: 20px;
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.burger {
  display: none;
  width: 22px;
  height: 16px;
  position: relative;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.burger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: var(--white);
  transition: transform .25s ease, opacity .25s ease;
}

.burger span:nth-child(1) { top: 0; }
.burger span:nth-child(2) { top: 7px; }
.burger span:nth-child(3) { top: 14px; }

.header-right .cta-mini {
  background: var(--red);
  width: 34px;
  height: 34px;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
} */

/* 모바일 메뉴 */
/* .mobile-nav {
  position: fixed;
  inset: 0;
  background: rgba(10, 12, 20, 0.6);
  display: none;
  z-index: 30;
}

.mobile-nav.open {
  display: block;
}

.mobile-nav-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 78%;
  max-width: 320px;
  background: var(--navy2);
  padding: 24px 26px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-shadow: 0 0 48px 0 rgba(0, 45, 125, 0.1);
}

.mobile-nav-close {
  align-self: flex-end;
  background: none;
  border: none;
  color: var(--white);
  font-size: 26px;
  line-height: 1;
  margin-bottom: 18px;
  cursor: pointer;
}

.mobile-nav-panel a {
  color: #e7e7ea;
  font-size: 16px;
  font-weight: 600;
  padding: 14px 4px;
}

.mobile-nav-panel .btn-red {
  margin-top: 20px;
}
.mobile-gnb {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mobile-gnb > li {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
} */

/* 1depth */
/* .mobile-gnb-title {
  display: flex;
  align-items: center;
  justify-content: space-between;

  width: 100%;
  padding: 20px 4px;

  border: 0;
  background: transparent;

  color: var(--white);
  font-size: 16px;
  font-weight: 700;
  text-align: left;

  cursor: pointer;
} */

/* 2depth 기본 닫힘 */
/* .mobile-depth2 {
  display: none;

  margin: 0;
  padding: 0 0 20px 15px;

  list-style: none;
} */

/* on 붙으면 열림 */
/* .mobile-gnb > li.on > .mobile-depth2 {
  display: block;
}

.mobile-depth2 li {
  margin-top: 12px;
}

.mobile-depth2 a {
  color: #aab4c8;
  font-size: 14px;
  text-decoration: none;
} */

/* 화살표 */
/* .mobile-gnb-arrow {
  transition: transform 0.2s;
}

.mobile-gnb > li.on .mobile-gnb-arrow {
  transform: rotate(180deg);
} */

/* ==================== 맨 위로 버튼 ==================== */
/* #toTop {
  position: fixed;
  right: 22px;
  bottom: 24px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--navy2);
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.15);
  font-size: 18px;
  cursor: pointer;
  z-index: 25;
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: opacity .25s ease, transform .25s ease, visibility .25s;
}

#toTop.show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

#toTop:hover {
  background: var(--red);
} */

/* ==================== 버튼 컴포넌트 ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 15px 26px;
  border-radius: 50px;
  font-weight: 700;
  font-size: 24px;
  border: none;
  cursor: pointer;
}

.btn-red {
  background: var(--red);
  color: var(--white);
  font-family: inherit;
}

.btn-phone {
  background: var(--bg-soft);
  color: var(--red);
  font-family: inherit;
}

.btn-yellow {
  background: #f4d43a;
  color: #1a1a1f;
}

/* ==================== 공통 애니메이션 / 인터랙션 컴포넌트 ==================== */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}

.reveal-group .reveal:nth-child(1) { transition-delay: .05s; }
.reveal-group .reveal:nth-child(2) { transition-delay: .15s; }
.reveal-group .reveal:nth-child(3) { transition-delay: .25s; }
.reveal-group .reveal:nth-child(4) { transition-delay: .35s; }
.reveal-group .reveal:nth-child(5) { transition-delay: .45s; }

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* 수치 막대바 애니메이션 (통계형 카드 어디서든 재사용) */
.bar-row .bar {
  width: 0;
  transition: width 3.1s cubic-bezier(.2, .8, .2, 1);
}

/* 태그 필(pill) 컴포넌트 */
.tag {
  font-size: 14px;
  padding: 8px 12px;
  border-radius: 50px;
  border: 1px solid var(--line);
  color: #3b3c42;
  font-weight: 400;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}

.tag:hover {
  background: var(--red);
  color: var(--white);
  border-color: var(--red);
  font-weight: 700;
  transform: translateY(-2px);
}

/* 체크리스트 아이템 컴포넌트 */
.check-item {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 14px 22px;
  font-size: 16px;
  font-weight: 600;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, color .2s ease, transform .15s ease;
}

.check-item:hover {
  transform: translateY(-2px);
}

.check-item.on {
  border-color: var(--red);
  color: var(--red-dark);
}

.check-item .box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 3px;
  border: 2px solid #9ea1ac;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: #2a2b31;
  font-weight: 900;
  background: var(--white);
  transition: background .8s ease, border-color .8s ease, color .8s ease;
}

.check-item.on .box {
  background: var(--red);
  border-color: var(--red);
  color: var(--white);
}
/* ==================== SECTION 5: solved ==================== */

.solved-flex {
  display: flex;
  /* align-items: center; */
  align-items: end;
  /* gap: 70px; */
  gap: 20px;
  justify-content: space-between;
}


.solved-text h2 {
  margin-bottom: 40px;
}

.solved-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 24px;
  font-weight: 600;
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);
}

.solved-list .ic {
  color: var(--red);
  font-size: 18px;
}

.solved-img {
  position: relative;
}

.solved-img img {
  border-radius: 8px;
}

/* ==================== SECTION 7: CTA banner ==================== */
body #cta.cta-banner {
  padding: 0;
  display: flex;
  width: 100%;
  color: #fff;
}

/* -------- 왼쪽 절반: 검정 배경 -------- */
body #cta .cta-left {
  flex: 0 0 50%;           /* 정확히 화면의 절반 */
  max-width: 50%;
  background: #191919;
  display: flex;
  justify-content: flex-end;   /* 콘텐츠를 절반 영역의 오른쪽(중앙 분할선 쪽)으로 정렬 */
}

body #cta .cta-left-inner {
  width: 100%;
  max-width: 720px;         /* 콘텐츠 실제 폭 - 너무 넓게 안 늘어나게 제한 */
  padding: 60px 120px 40px 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

body #cta .cta-small {
  color: #c7cad3;
  font-size: 16px;
  margin-bottom: 10px;
}

body #cta .cta-title {
  font-size: 35px;
  font-weight: 700;
  line-height: 1.45;
  margin-bottom: 28px;
  color: #fff;
}

body #cta .cta-btns {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
}

body #cta .cta-btn {
  padding: 12px 22px;
  border-radius: 50px;
  font-size: 20px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
}
body #cta .cta-btn-red {
  background: var(--red, #d0021b);
  color: #fff;
}
body #cta .cta-btn-yellow {
  background: #f5d13a;
  color: #222;
}

body #cta .cta-form {
  border-top: 1px solid var(--line);
  padding-top: 24px;
}

body #cta .cta-form-row {
  display: flex;
  gap: 12px;
}

body #cta .cta-field {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-bottom: 16px;
}

body #cta .cta-field label {
  font-size: 16px;
  color: #c7cad3;
  margin-bottom: 6px;
}

body #cta .cta-field input,
body #cta .cta-field textarea {
  background: #fff;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
  padding: 10px;
  font-size: 16px;
  font-family: inherit;
  width: 100%;
}
body #cta .cta-field input::placeholder,
body #cta .cta-field textarea::placeholder {
  color: #9a9daa;
}
body #cta .cta-field textarea {
  resize: none;
  height: 100px;
}

body #cta .cta-agree {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
  color: #c7cad3;
  margin-bottom: 20px;
  cursor: pointer;
}
body #cta .cta-agree input {
  accent-color: var(--red, #d0021b);
  width: 22px;
  height: 22px;
}

body #cta .cta-submit {
  width: 100%;
  background: var(--red, #d0021b);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 10px;
  font-size: 24px;
  font-weight: 700;
  cursor: pointer;
}
body #cta .cta-submit:hover { 
  opacity: .9; 
}

/* -------- 오른쪽 절반: 배경 사진 -------- */
body #cta .cta-right {
  flex: 0 0 50%;
  max-width: 50%;
  position: relative;
  background: url('/images/front/v2026/main/cta_background.png') center / cover no-repeat;
}
body #cta .cta-right-inner {
  height: 100%;
  max-width: 720px;         
  /* 콘텐츠 실제 폭 - 너무 넓게 안 늘어나게 제한 */
  /* padding: 70px 20px 70px 60px; */
  display: flex;
  flex-direction: column;
  justify-content: flex-end  ;
  align-items: flex-end;
}
body #cta .cta-person {
  width: 100%;
   /* 콘텐츠 실제 폭 - 너무 넓게 안 늘어나게 제한 */
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
}


/* ==================== FOOTER ==================== */
footer {
  background: var(--navy);
  color: #9a9daa;
  padding: 44px 20px 30px;
  font-size: 12.5px;
}

.foot-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 26px;
}

.foot-logo {
  color: var(--white);
  font-weight: 800;
  font-size: 20px;
  margin-bottom: 4px;
}

.foot-logo small {
  display: block;
  font-size: 10px;
  color: #7b7e8c;
  font-weight: 400;
}

.family-badge {
  border: 1px solid var(--white);
  color: var(--white);
  font-size: 16px;
  padding: 6px 25px;
  border-radius: 20px;
  cursor: pointer;
  position: relative;
}
.family-badge .open-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(255,255,255,0.01);
  color:var(--white);
  border:none;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition:transform .25s ease, background .2s ease;

}


.family-list{
  border: 1px solid var(--white);
  position:absolute;
  bottom:calc(100% + 10px);
  right:0;
  list-style:none;
  min-width:155px;
  border:1px solid var(--white);
  border-radius:8px;
  padding:6px 0;
  box-shadow:0 14px 30px rgba(0,0,0,0.4);
  background-color: var(--navy);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, visibility .2s;
  z-index:20;
}

.family-badge.open .family-list{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.family-list li a{
  display:block;
  padding:9px 16px;
  font-size:12.5px;
  font-weight:500;
  color:var(--white);
  white-space:nowrap;
  text-align:left;
}
.family-list li a:hover {
  background:rgba(255,255,255,0.06);
  color:var(--red);
}
.foot-info {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 18px;
  max-width: 520px;
  font-size: 14px;
  line-height: 1.9;
}

.foot-info span:nth-child(odd) {
  color: #6b6f7c;
}

.foot-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #2a2d3a;
  padding-top: 20px;
  margin-top: 24px;
}

.foot-links {
  display: flex;
  gap: 6px;
  font-size: 14px;
  color: #7b7e8c;
}

.foot-badges {
  display: flex;
  gap: 16px;
  align-items: center;
  opacity: 0.8;
  font-size: 11px;
}

/* ==================== TABLET (공통 요소) ==================== */
@media (max-width: 1240px) {
  section { padding: 70px 20px; }
  .burger {
    display: block;
  }
  nav { display: none; }
  .sec-title { font-size: 32px; }
  /* .reveal.in-view { width: 100%; } */
  .foot-top { flex-direction: column; gap: 20px; align-items: flex-start; }
  .foot-bottom { flex-direction: column; gap: 12px; align-items: flex-start; }
  .btn {font-size: 16px;}

    /* .solved-flex { flex-direction: column; gap: 40px; } */
  .solved-text {  width: 100%; max-width: 100%; }
  .solved-img img { margin: 0 auto; }
  .cta-wrap {
    max-width: 100%;
    padding: 0 20px;
  }
  .cta-banner {
    flex-direction: column;
  }
  
  .cta-left {
    flex: 1;
    width: 100%;
    max-width: 100%;
  
  }
  .cta-left-inner{
    max-width: none;
    padding: 50px 20px;
  }
  .cta-right {
    flex: 1;
    width: 100%;
    max-width: 100%;
    }
    .cta-right-inner{
    width: 100%;
    max-width: 100%;
    }
  .cta-title { font-size: 28px; }
  .cta-person {
    width: 500px;
    right: 30px;
  }
}

/* ==================== MOBILE (공통 요소) ==================== */
@media (max-width: 767px) {
  .wrap { padding: 0 18px; }
  .logo { font-size: 18px; gap: 8px; }
  .logo small { font-size: 9px; }

  .phone-badge { font-size: 0; gap: 0; }
  .phone-badge::before { content: "📞"; font-size: 18px; }

  .burger { width: 20px; }

  .btn { padding: 14px 20px; font-size: 14px; width: 100%; }

  section { padding: 50px 0; }
 .sec-title { font-size: 22px; }
  .tag { font-size: 11.5px; padding: 7px 10px; }
  .check-item { font-size: 13.5px; padding: 14px 16px; }

  /* solved */

    .solved-flex { flex-direction: column; gap: 28px; }
    .solved-text  {width: 100%;}
  .solved-text h2 { margin-bottom: 24px; }
  .solved-list li { font-size: 14.5px; padding: 13px 16px; }
  footer { padding: 36px 0 24px; font-size: 11.5px; }
  .foot-logo { font-size: 18px; }
  .foot-info { grid-template-columns: auto 1fr; font-size: 11px; gap: 5px 12px; }
  .foot-badges { flex-wrap: wrap; gap: 12px; }
  
    /* cta banner */
  .cta-wrap {
    flex-direction: column;
    padding: 0;
  }
  .cta-left {
    flex: none;
  }
    .cta-left-inner{
    max-width: none;
  }
  .cta-small { font-size: 12.5px; }
  .cta-title { font-size: 25px; line-height: 1.5; margin-bottom: 22px; }
  .cta-btns { flex-direction: column; align-items: stretch; gap: 10px; }
  .cta-btn { text-align: center; }
  .cta-form-row { flex-direction: column; gap: 0; }

   .cta-right {
    height: 260px;
    background-position: 70% center; /* 좁아질 때 배경에서 보여줄 영역 조정 */
  }
  .cta-person {
    right: 10px;
    height: 100%;
  }
}