/* 스마트스마일 지면 스타일.
   섹션 순서는 콜라보 · POINT · 추천대상 · CXL · PRP 다.
   POINT 는 좌우 교차배치가 아니라 텍스트(위, 전체폭) + 이미지(아래, 전체폭)의
   세로 스택 구조다 — 교차배치로 되돌리지 마라. */
:root {
  --ss3-navy: #0a1e30;
  --ss3-slate: #616161;
  --ss3-body: #333333;
  --ss3-accent: #134879;
  --ss3-num: #2f6496;
  --ss3-tint: #f4f8fc;
  --ss3-white: #ffffff;
  --ss3-line: #dbe5ee;
}

.ss3-inner { width: 1232px; max-width: 100%; margin: 0 auto; box-sizing: border-box; }

.ss3-sec { position: relative; width: 100%; padding: 140px 0; box-sizing: border-box; }
.ss3-sec--white { background: var(--ss3-white); }
.ss3-sec--tint { background: var(--ss3-tint); }

.ss3-h2 {
  margin: 0 0 14px;
  font-weight: 700;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -0.323px;
  color: var(--ss3-navy);
  word-break: keep-all;
}
.ss3-p {
  margin: 0 0 70px;
  max-width: 1232px;
  font-weight: 400;
  font-size: 17px;
  line-height: 30px;
  color: var(--ss3-slate);
  word-break: keep-all;
}

/* ── 콜라보 6특징(Frame 38) — 3열×2행, 카드 403px, gap 12px ─────── */
.ss3-collab__grid {
  display: grid;
  grid-template-columns: repeat(3, 403px);
  grid-template-rows: 220px 190px;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.ss3-collab__item {
  padding: 30px 0 0 42px;
  box-sizing: border-box;
}
.ss3-collab__img {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--ss3-tint);
  padding: 18px;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
  margin: 0 0 20px;
}
.ss3-collab__title {
  display: block;
  width: fit-content;
  max-width: 323px;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--ss3-navy);
}
.ss3-collab__sub {
  display: block;
  width: fit-content;
  max-width: 323px;
  margin: 4px 0 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--ss3-body);
}

/* ── POINT 01~04(Frame 39) — 텍스트(전체폭) 위 + 이미지(전체폭) 아래, 세로 스택 ── */
.ss3-point__list { display: flex; flex-direction: column; gap: 60px; margin: 0; padding: 0; list-style: none; }
.ss3-point__item { display: flex; flex-direction: column; }
.ss3-point__eyebrow {
  display: block;
  margin: 0 0 28px;
  font-weight: 600;
  font-size: 13.9px;
  line-height: 23.7px;
  letter-spacing: 0.279px;
  color: var(--ss3-accent);
}
.ss3-point__title {
  margin: 0 0 30px;
  font-weight: 700;
  font-size: 32px;
  line-height: 48px;
  letter-spacing: -0.323px;
  color: var(--ss3-navy);
  word-break: keep-all;
}
.ss3-point__desc {
  margin: 0;
  max-width: 1232px;
  font-weight: 400;
  font-size: 17px;
  line-height: 30px;
  color: var(--ss3-slate);
  word-break: keep-all;
}
.ss3-point__img {
  width: 1232px;
  max-width: 100%;
  margin-top: 40px;
  border-radius: 8px;
  object-fit: cover;
  display: block;
}

/* ── 추천 대상 6개(Frame 41) — 3열×2행, 카드 401px ─────────────── */
.ss3-target__grid {
  display: grid;
  grid-template-columns: repeat(3, 401px);
  gap: 14px 12px;
  list-style: none;
  margin: 58px 0 0;
  padding: 0;
  justify-content: center;
}
.ss3-target__item {
  padding: 32px 20px;
  border-radius: 8px;
  background: var(--ss3-tint);
  box-sizing: border-box;
}
.ss3-target__no {
  display: block;
  margin: 0 0 8px;
  font-weight: 700;
  font-size: 12px;
  line-height: 16px;
  color: var(--ss3-num);
}
.ss3-target__title {
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 28px;
  color: var(--ss3-navy);
  word-break: keep-all;
}

/* ── CXL(Frame 42) / PRP(Frame 43) 공용 ─────────────────────── */
.ss3-benefit__photo {
  width: 1232px;
  max-width: 100%;
  height: 432px;
  object-fit: cover;
  border-radius: 8px;
  display: block;
  margin: 36px 0 36px;
}
.ss3-benefit__grid {
  display: grid;
  grid-template-columns: repeat(3, 403px);
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
  justify-content: center;
}
.ss3-benefit__grid--4 { grid-template-columns: repeat(4, 299px); }
.ss3-benefit__item {
  padding: 30px 0 0 42px;
  box-sizing: border-box;
}
.ss3-benefit__img {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: var(--ss3-tint);
  padding: 18px;
  box-sizing: border-box;
  object-fit: contain;
  display: block;
  margin: 0 0 20px;
}
.ss3-benefit__title {
  display: block;
  width: fit-content;
  max-width: 323px;
  margin: 0;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  color: var(--ss3-navy);
}
.ss3-benefit__desc {
  display: block;
  margin: 4px 0 0;
  max-width: 219px;
  font-weight: 400;
  font-size: 16px;
  line-height: 26px;
  color: var(--ss3-body);
  word-break: keep-all;
}

@media (max-width: 1024px) {
  .ss3-inner { padding: 0 20px; box-sizing: border-box; }
  .ss3-sec { padding: 64px 0; }
  .ss3-collab__grid, .ss3-target__grid, .ss3-benefit__grid, .ss3-benefit__grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .ss3-h2 { font-size: 26px; line-height: 38px; }
  .ss3-collab__grid, .ss3-target__grid, .ss3-benefit__grid, .ss3-benefit__grid--4 {
    grid-template-columns: 1fr;
  }
}

/* ── 인트로 섹션 좌표 오버라이드 — 앞 파일의 고정값을 시안값으로 덮는다.
   로드 순서상 이 파일이 나중이라 우선한다. */
.ss2-page.fs9 .fs9-intro { height: auto; padding-bottom: 140px; }
.ss2-page.fs9 .fs9-intro > .fs9__inner { padding-top: 140px; }
.ss2-page.fs9 .fs9-intro .fs9-h2.ce2-typ-skip { margin-bottom: 14px !important; }
.ss2-page.fs9 .fs9-intro__box { margin-top: 60px !important; }
.ss2-page.fs9 .fs9-gen { margin-top: 40px !important; }

/* 모바일 배치 — 데스크톱 고정 좌표를 해제한다 */
@media (max-width: 767px) {
  /* 배너는 화면 폭을 꽉 채운다 */
  .ss2-page.fs9 .fs9-banner {
    margin-left: -16px;
    margin-right: -16px;
    width: calc(100% + 32px);
    height: 62vh;
    min-height: 430px;
  }

  /* 섹션 좌우 여백을 한 벌로 */
  .ss2-page.fs9 .fs9__inner,
  .ss2-page .ss3-inner { padding-left: 20px; padding-right: 20px; box-sizing: border-box; }
  .ss2-page .ss2-faq__inner { padding-left: 36px; padding-right: 36px; box-sizing: border-box; }

  /* 섹션 위아래 여백 압축 */
  .ss2-page.fs9 .fs9-intro > .fs9__inner { padding-top: 48px; }
  .ss2-page.fs9 .fs9-intro { padding-bottom: 64px; }
  .ss2-page.fs9 .fs9-intro__box { margin-top: 28px !important; }
  .ss2-page.fs9 .fs9-gen { margin-top: 24px !important; }
  .ss2-page .ss3-sec { padding: 56px 0; }

  /* 제목 크기·행간을 한 벌로 */
  .ss2-page.fs9 .fs9-h2,
  .ss2-page.fs9 .fs9-h2.ce2-typ-skip,
  .ss2-page .ss3-h2,
  .ss2-page .ss2-faq__h2,
  .ss2-page .ss2-faq__h2.ce2-typ-skip,
  .ss2-page .ce-close .ce-close__h2.ce-close__h2 {
    font-size: 26px !important;
    line-height: 36px !important;
    letter-spacing: -0.5px !important;
    width: auto !important;
    max-width: 100% !important;
    word-break: keep-all;
  }
  .ss2-page.fs9 .fs9-intro .fs9-h2 { padding-top: 0 !important; }

  /* 푸터 하단 빈 띠 제거 */
  .ss2-page ~ footer .foot_wrap,
  body .foot_wrap { padding-bottom: 0 !important; }
}

/* ── 데스크톱 이상: FAQ 제목을 다른 섹션 제목과 한 벌로 ── */
@media (min-width: 768px) {
  .ss2-page .ss2-faq__h2,
  .ss2-page .ss2-faq__h2.ce2-typ-skip {
    font-size: 30px !important;
    line-height: 42px !important;
    letter-spacing: -0.323px !important;
  }
}

/* ── 넓은 화면: 리드 박스 높이 고정 해제 + FAQ 좌측선 맞춤 ── */
@media (min-width: 1280px) {
  /* 높이를 고정하면 문장 마지막 줄이 박스 밖으로 나간다 */
  .ss2-page.fs9 .fs9-intro__box { height: auto; min-height: 139px; }

  /* 다른 섹션 컨테이너와 같은 폭·같은 좌측 기준선 */
  .ss2-page .ss2-faq__inner {
    width: 1232px;
    max-width: 100%;
    padding-left: 0;
    padding-right: 0;
  }
}

/* 리드문 자리 — 시안이 잡아 둔 줄 수만큼 높이를 확보해 아래 블록이 밀리지 않게 한다 */
.ss3-p--l2, .ss3-point__desc--l2 { min-height: 60px; }
.ss3-p--l3, .ss3-point__desc--l3 { min-height: 90px; }
.ss3-point__desc--l5 { min-height: 150px; }
@media (max-width: 1024px) {
  .ss3-p--l2, .ss3-p--l3,
  .ss3-point__desc--l2, .ss3-point__desc--l3, .ss3-point__desc--l5 { min-height: 0; }
}

/* ── 1920 시안 94:21869 정합(데스크톱) ─────────────────────────── */
@media (min-width: 1025px) {
  /* 배너 덮개 — 위아래는 비우고 가운데를 가장 짙게(5단) */
  .ss2-page.fs9 .fs9-banner__grad {
    background: linear-gradient(180deg, rgba(4, 14, 26, 0) 0%, rgba(4, 14, 26, .6) 24%, rgba(4, 14, 26, .8) 50%, rgba(4, 14, 26, .6) 76%, rgba(4, 14, 26, 0) 100%);
  }

  /* 인트로 — 리드 문단은 상자 없이 제목 아래 평문, 카드 줄까지 60 */
  .ss2-page.fs9 .fs9-intro__box {
    margin-top: 0 !important;
    padding: 0;
    background: none;
    border-radius: 0;
    height: auto;
    min-height: 0;
  }
  .ss2-page.fs9 .fs9-intro__box p {
    width: auto;
    font-size: 17px !important;
    line-height: 30px !important;
    color: #606060 !important;
  }
  .ss2-page.fs9 .fs9-gen { margin-top: 60px !important; }

  /* POINT 01~04 — 위아래 190, 라벨·제목·설명 간격 4·6, 이미지까지 40 */
  .ss2-page .ss3-sec.ss3-sec--point { padding: 190px 0; }
  .ss2-page .ss3-point__eyebrow { margin: 0 0 4px; }
  .ss2-page .ss3-point__title,
  .ss2-page .ss3-point__title.ce2-typ-skip {
    margin: 0 0 6px !important;
    font-size: 32px !important;
    line-height: 48px !important;
    letter-spacing: -0.323px !important;
    font-weight: 700 !important;
  }
  .ss2-page .ss3-point__item--r .ss3-point__eyebrow,
  .ss2-page .ss3-point__item--r .ss3-point__title,
  .ss2-page .ss3-point__item--r .ss3-point__desc { text-align: right; }
  .ss2-page .ss3-point__img { border-radius: 0; height: 250px; object-fit: cover; }
  .ss2-page .ss3-point__img[data-fig="97:22318"] { height: 500px; }
  .ss2-page .ss3-point__img--band {
    width: 1232px;
    height: 350px;
    object-fit: cover;
    object-position: 50% 31.3%;
  }

  /* CXL·PRP — 사진 테두리, 카드는 면색 + 왼쪽 4px 선 */
  .ss2-page .ss3-benefit__photo {
    margin: 0 0 36px;
    border-radius: 0;
    border: 1px solid #d2d2d2;
    box-sizing: border-box;
  }
  .ss2-page [data-fig="97:22424"] .ss3-p { margin-bottom: 60px; }
  .ss2-page [data-fig="97:22487"] .ss3-p { margin-bottom: 90px; }
  .ss2-page [data-fig="97:22487"] { padding-bottom: 288px; }
  .ss2-page .ss3-benefit__item {
    padding: 30px 38px;
    border-left: 4px solid #1f5d97;
    background: var(--ss3-tint);
    box-sizing: border-box;
  }
  .ss2-page [data-fig="97:22487"] .ss3-benefit__item { background: var(--ss3-white); }
  .ss2-page .ss3-benefit__img {
    width: 80px;
    height: 80px;
    padding: 0;
    border-radius: 0;
    background: none;
    object-fit: cover;
  }
}