/* ========================================================================
   종합보장설계 (/financial) PC - 2026 디자인 리뉴얼
   시안: MetLife_종합보장설계_PC_디자인변경_260727.psd (1920x7174)
         = MetLife_종합보장설계_PC_디자인변경_fin.png 과 픽셀 단위 동일(MD5 대조 완료)

   주의: 이 파일은 application/views/CF/Financial/Financial_Certification_View.php
        에서만 로드된다. 구 디자인의 비인증 변형(CF/Financial/Financial_View.php)은
        계속 styleFinancial.css 를 쓰므로 그 파일은 절대 수정하지 않는다.
        (styleguide-2026 §0-5 / 체크리스트 12)

   ※ 이 페이지는 달러종신·Total360·변액연금과 달리 히어로 TOP3 뱃지와 탭 구조가
     없는 컨설팅 톤 레이아웃이다(시안에 tab 그룹 자체가 없음). 배너 박스 규격
     (65/65 · 578px · .tab-area top 659)만 공통 표준을 따르고, 히어로 내부 배치와
     본문 섹션 구조는 시안 우선으로 구현했다. — task-7 리포트 §체크리스트 참조
   ======================================================================== */

/* ------------------------------------------------------------------------
   팔레트 — 종합보장설계 PSD 스포이드(컴포지트 픽셀 / type 레이어 FillColor) 실측값.
   다른 페이지 변수 복사 아님(재측정 로그: analysis/fin/pc_colors.txt).

     히어로 배경    #0f4360 (가장자리) ~ #093e5a (중앙) 네이비 그라데이션 → 이미지
     딥네이비       #003652  섹션 태그 pill / 통계 숫자 / 카드 타이틀 / 강조 타이틀
     다크 섹션 배경  #003551  '지금 어떤 고민이 있으신가요?' 풀블리드 밴드
     강조 잉크      #3185a9  '158년 역사를 가진 글로벌 리딩 컴퍼니' 등 본문 강조
     보조 강조      #226587  02 타임라인 소제목 / 07 서비스명
     민트(형광펜)   #8ff5b1  07 '1대1 맞춤 솔루션' 하이라이트 / 06 카드 강조어
     본문 잉크      #2d2d2d
     주석          #75787b (16px Regular) / #707070 (07 * 주석 Light)
     경고 / 유의사항 #ec657b
   ------------------------------------------------------------------------ */
:root {
  --fin-hero-bg: #0f4360;
  --fin-navy: #003652;
  --fin-dark-bg: #003551;
  --fin-accent: #3185a9;
  --fin-accent2: #226587;
  --fin-mint: #8ff5b1;
  --fin-ink: #2d2d2d;
  --fin-note: #75787b;
  --fin-note2: #707070;
  /* 소제목 밑줄 — PSD '모양 1111' 실측(#c3bdb5 @ 53%). 네이비가 아니다. */
  --fin-line: rgba(195, 189, 181, 0.53);
  --fin-alert: #ec657b;
}

.content * {
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
}

/* 2026-08-12: 본문 좌측 그리드 상수를 이 페이지에서만 종전값으로 고정한다.
   새 시안(260810) 4종은 본문 좌측선을 x410 으로 통일했지만 종합보장설계는
   시안 개정 대상이 아니고 레이아웃 자체가 다르므로 현행(x420)을 유지한다
   (사용자 확정 2026-08-12). styleCommon_v2026.css 의 :root 보다 뒤에 로드된다. */
:root {
  --pc-text-indent: 10px;
}

/* ------------------------------------------------------------------------
   1. 히어로 (.banner-area) — styleguide-2026 §1 전 페이지 공통 규격
      padding 65/65, 총 높이 578px, .tab-area top 659
      → 달러종신·USDannuity·Total360·변액연금과 배너 y좌표 완전 일치.

      배경은 PSD 'bg' 그룹을 캔버스 폭(0~1920)으로 재크롭한 1920x572(시안 밴드
      y82~653 = 네이비 본체) 이미지다. 표준 높이 578 과 6px 차이는 background-size
      로 흡수하고(밴드 그라데이션이 가로 방향이라 세로 1% 늘림은 육안 식별 불가 —
      상단 행 평균 밝기 58.9 / 하단 행 58.8), 좌우 남는 영역은 동일 색
      background-color 가 채운다. cover(뷰포트 비율 늘림)는 쓰지 않는다.

      ※ 2026-08-04 재추출 (사용자 QA #2 "위아래 진한 블랙 라인")
        이전 크롭은 y80~655 였는데 PSD 'bg' 그룹은 y81~653 만 alpha 255 다.
        즉 맨 위/아래 한 행씩이 alpha 0 인 채로 JPG(알파 없음)에 저장돼
        RGB(0,0,0) 검은 행이 되었고, 그게 배너 상·하단 블랙 라인으로 보였다.
        → alpha 255 구간 안쪽(y82~653)만 자르고, 저장 후에도 가장자리 행이
          네이비 범위인지 스크립트로 재검증한다.
   ------------------------------------------------------------------------ */
.banner-area {
  position: relative;
  /* 히어로 밴드 통이미지(.hero-band)가 배경 왼쪽을 덮으므로 뷰포트 < 1920 에서
     좌측으로 삐져나가는 부분을 잘라낸다. 상담신청 팝업(.POPUP-LAYER 내부)은
     position:fixed 라 overflow 클리핑 대상이 아니다(확인 완료). */
  overflow: hidden;
  background-image: url(/assets/image/CF/Financial/main_bg_v2026.jpg?v=20260804);
  background-repeat: no-repeat;
  background-position: top center;
  background-size: 1920px 578px;
  background-color: var(--fin-hero-bg);
  /* 2026-08-12 개정: 상담폼이 448 → 451(새 시안 260810 실측)로 커지면서 다른 4페이지의
     배너 여백을 65/65 → 64/63 으로 맞췄다. 이 페이지는 히어로가 통밴드(.hero-band)라
     .main-description 을 451 로 함께 올려야 총 높이 578 과 .tab-area top 659 가 유지된다.
     밴드 이미지의 top 오프셋도 -65 → -64 로 함께 이동한다(아래 .hero-band 참조). */
  padding-top: 64px;
  padding-bottom: 63px;
}

/* ------------------------------------------------------------------------
   히어로 밴드 통이미지 = **배경 포함** (2026-08-04 사용자 지시)
   ------------------------------------------------------------------------
   이 페이지의 좌측은 TOP3 뱃지가 아니라 '타이틀 + 구분선 포함 아이콘 3종 밴드' 구조다.
   아이콘 3종을 나누는 세로 구분선은 배경 위에 얹히는 레이어 효과(밝기 ±2 수준의
   multiply 밴드)라, 요소만 분리 추출하면(=이전 hero_merge_v2026.png) **소실된다**.
   실제로 시안은 x572 / x747 에서 밝기 스텝이 관측되는데 분리 추출본에는 없었다
   (측정 로그: analysis/r6, 열 프로파일 diff).

   → 시안 풀캔버스(= PSD 와 픽셀 동일한 …_fin.png)에서 히어로 밴드를
     **배경째로** 잘라 배너 배경 위에 정확히 겹쳐 깐다. 폼 영역은 제외한다.

   좌표 규칙 — 배경과 1:1 로 겹치는 것이 핵심이다:
     · 배경  = main_bg_v2026.jpg (시안 밴드 y82~653, 1920x572)
               → background-size 1920px 578px / position top center
                 즉 가로 1:1, 세로 578/572 배, 원점은 (뷰포트중앙-960, 배너상단)
     · 통이미지 = 같은 시안의 **같은 행 범위**(y82~653)를 x0~1050 만 자른 것 (1050x572)
               → width 1050px / height 578px 로 **같은 배율**을 재현하고
                 left:50% margin-left:-960px / top:-65px 으로 **같은 원점**에 둔다
                 (기준 박스는 position:relative 인 .banner-section = 배너 상단 +65px,
                  가로 중앙은 뷰포트 중앙과 일치하므로 배경 원점과 정확히 겹친다)
               → 두 이미지가 같은 소스 행·같은 배율·같은 원점이므로 x1050 이음매는
                 원본 픽셀이 그대로 이어진다(추출 시 x1049 열 채널차 0 확인).
     · 우측 끝 x1050 < 폼 좌측 x1054 → 상담폼과 겹치지 않는다. 폼은 공용 컴포넌트
       그대로이며 DOM 순서상 이 이미지보다 뒤라 항상 위에 그려진다.
     · 통이미지가 absolute 라 .main-description 이 높이를 잃으므로 448px 를 명시해
       배너 표준(banner-area 578 / banner-section 146~594 / tab-area top 659)을 고정한다.
     · main_bg 만은 풀 컴포지트가 아니라 PSD 'bg' 그룹 렌더에서 뽑는다. 컴포지트에는
       시안 상담폼이 구워져 있어 실제 DOM 폼과 이중으로 겹치기 때문이다.

   ※ 2026-08-04 재추출 (사용자 QA #1 "주변에 여백이 있어 빈 공간이 보임")
     이전 크롭은 컴포지트 y80~654 라 맨 위 흰 행(255) + 안티에일리어스 회색 행(207),
     맨 아래 흰 행(255)이 그대로 들어가 있었다 → 배너 상·하단에 흰 선으로 보였다.
     → 네이비 본체 y82~653 만 타이트 크롭. 크롭 델타는 **배치 좌표가 아니라 배율로**
       흡수한다: 두 자산 모두 예전과 동일한 박스(1920x578 / 1050x578)를 꽉 채우므로
       CSS 좌표(top -65 / margin-left -960)는 그대로 두는 것이 맞다.
       (좌표를 크롭 델타만큼 밀면 위 2px·아래 3px 가 background-color 단색으로 남아
        가로 그라데이션과 어긋나 오히려 새 경계선이 생긴다.)
       매핑 변화: 시안 y C → 이전 (C-80)*578/575, 지금 (C-82)*578/572.
       타이틀 상단(y156) -1.6px, 아이콘 하단(y609) +0.8px — 최대 2px 미만.
       (실측: 렌더 흰잉크 y범위가 시안 밴드와 75~487 로 완전 일치)

   대체 이력 — 배경 포함 통이미지 전환으로 제거한 규칙/자산:
     .banner-section .main-description { padding-bottom: 23px }
     .banner-section .main-description .hero-merge { width:509px; height:425px; margin-left:-8px }
     자산 hero_merge_v2026.png (구분선 소실본 — 삭제하지 않고 남겨둠)
   ------------------------------------------------------------------------ */
.banner-section .main-description {
  /* 2026-08-12: 448 → 451 (배너 여백 64/63 과 합쳐 총 578 유지) */
  height: 451px;
}

.banner-section .main-description .hero-band {
  display: block;
  position: absolute;
  top: -64px;   /* 2026-08-12: banner-area padding-top 65 → 64 에 맞춰 함께 이동 */
  left: 50%;
  margin-left: -960px;
  width: 1050px;
  height: 578px;
  max-width: none;
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
  .banner-section .quick-request-form > form > input[type=text],
  .banner-section .quick-request-form > form > select {
    margin: 5px 0;
    height: 50px;
    line-height: 50px;
  }
}

/* 시안에 탭이 없다 — 빈 .tab-area 는 스크롤 스크립트 참조용으로만 남긴다.
   (구버전 .color-0090DA 오버라이드는 탭 링크가 없으므로 해당 없음) */
.tab-area {
  width: 100%;
  height: 0;
  background: none;
}

/* ------------------------------------------------------------------------
   2. 본문 공통 — 1100px 중앙 그리드(x410~1510)
      섹션 상하 여백은 PSD 잉크 y좌표 차이에서 그대로 역산했다(§3 각 섹션 주석).
   ------------------------------------------------------------------------ */
.content > .reason-area.fin-sec {
  width: 1100px;
  margin: 0 auto;
  padding: 0 !important;
  border-bottom: none;
  box-sizing: border-box;
}

/* 풀블리드 섹션(04 빌딩 밴드 / 06 다크 / 08 고객사례)은 1100 그리드를 벗어난다 */
.content > .reason-area.fin-sec-full {
  width: 100%;
}

.fin-inner {
  width: 1100px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* 섹션 태그 — PSD 'Rectangle 658' 288x60 / 라운딩 실측 17px(좌상·우하만),
   텍스트 30px Pretendard-Bold #ffffff, tracking -20 */
.fin-pill-wide {
  display: inline-block;
  padding: 0 22px;
  height: 60px;
  line-height: 60px;
  border-radius: 17px 0 17px 0;
  background-color: var(--fin-navy);
  color: #ffffff;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 섹션 탭 태그(전문성/신뢰/노하우) — PSD 'Rectangle 555' 178x51 / 상단만 라운딩 8px,
   텍스트 25px Pretendard-Bold #ffffff */
.fin-pill-tab {
  display: block;
  width: 178px;
  height: 51px;
  margin: 0 auto;
  line-height: 51px;
  text-align: center;
  border-radius: 8px 8px 0 0;
  background-color: var(--fin-navy);
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* 섹션 타이틀 35px Pretendard-ExtraBold / leading 45 / tracking -20 */
.fin-title {
  font-size: 35px;
  line-height: 45px;
  letter-spacing: -0.02em;
  font-weight: 800;
  color: var(--fin-navy);
}

/* 본문 26px Pretendard-Regular / leading 36 / tracking -20 */
.fin-body {
  font-size: 26px;
  line-height: 36px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fin-ink);
}

/* 가운데 정렬 한 줄 강조 문장(02/03/04 상단) 26px Bold / leading 32 */
.fin-lead {
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--fin-ink);
  text-align: center;
}

/* 2026-08-07 광고주 QA(PDF p14/p15 "Bold 적용 누락"): 전역 reset 이 span 에도
   font-weight:500 을 다시 걸어, .fin-lead(700) 안의 강조 스팬만 500 으로 떨어졌다
   ("158년 역사를 가진 글로벌 리딩 컴퍼니" / "업계 최고 수준의 재무 안정성" /
   "자산운용 전담 조직 MIM*"). 굵기를 이 클래스에 직접 지정한다. */
.fin-accent {
  color: var(--fin-accent);
  font-weight: bold;
}

.fin-navy {
  color: var(--fin-navy);
}

/* 형광펜 — PSD '사각형 1277'(548,4661)-(776,4698) 민트 블록 + 네이비 텍스트.
   민트 블록 실측 크기는 잉크 기준 225x34 (x550~775 / y4662~4696).
   background-size:100% 100% 로 두면 35px 폰트의 인라인 박스(약 41px)를 꽉 채워
   시안보다 위로 6px 더 올라온다 → 높이를 34px 로 고정하고 하단에 붙인다. */
.fin-highlight {
  font-weight: 800;
  color: var(--fin-navy);
  background: linear-gradient(var(--fin-mint), var(--fin-mint)) no-repeat;
  /* 2026-08-07 사용자 지시: 34px 는 바 윗변이 글자 상단을 가로질러 겹쳐 보였다 → 39px */
  background-size: 100% 39px;
  background-position: 0 bottom;
}

.fin-sec img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ------------------------------------------------------------------------
   3. 행잉 인덴트 — styleguide-2026 §4 (PC: padding-left 1.05em / indent -0.75em)
      자동 줄바꿈 주석은 한글 어절 단위로 끊기도록 keep-all.
   ------------------------------------------------------------------------ */
.fin-hang {
  padding-left: 1.05em;
  text-indent: -0.75em;
  word-break: keep-all;
}

.fin-hang + .fin-hang {
  margin-top: 2px;
}

/* ------------------------------------------------------------------------
   4-01. 전문성·신뢰·노하우 (PSD 753~1312)
      배너 하단 655 → 태그 상단 753 = 98
      좌 사진 x410~1038(628) / 우 텍스트 x1077~1472 → 간격 39
      사진 상단 767 = 태그 상단 +13
   ------------------------------------------------------------------------ */
/* 2026-08-07 광고주 QA(본문 시작 위치 통일): 탭 하단 → 첫 본문 = --pc-body-top
   (styleCommon_v2026.css §A, USDannuity 기준). 이 페이지는 탭 영역이 없어 배너 하단이
   기준선이 되지만, 상수는 같은 값을 쓴다. */
.content > .reason-area.fin-sec-01 {
  padding-top: var(--pc-body-top) !important;
}

.fin-sec-01 .fin-flex {
  display: flex;
  align-items: flex-start;
}

.fin-sec-01 .fin-photo {
  flex: 0 0 628px;
  margin-top: 13px;
}

.fin-sec-01 .fin-col {
  margin-left: 39px;
}

/* 태그 박스 하단 813 → 타이틀 잉크 845 */
.fin-sec-01 .fin-title {
  margin-top: 23px;
}

/* 타이틀 잉크 하단 922 → 본문 잉크 상단 992 */
.fin-sec-01 .fin-body {
  margin-top: 57px;
}

/* ------------------------------------------------------------------------
   4-02. 전문성 (PSD 1385~2035)  01 사진 하단 1269 → 태그 상단 1385 = 116
      그래픽 블록 x687~1494 (807x481) — 시안이 그리드 중앙이 아니라 우측으로
      치우쳐 있어(타임라인 라벨이 좌측 바깥에 놓임) 좌측 오프셋을 그대로 쓴다.
   ------------------------------------------------------------------------ */
.content > .reason-area.fin-sec-02 {
  padding-top: 116px !important;
}

/* 태그 박스 하단 1438 → 문장 잉크 1467 */
.fin-sec-02 .fin-lead,
.fin-sec-03 .fin-lead,
.fin-sec-04 .fin-lead {
  margin-top: 26px;
}

/* 문장 잉크 하단 1491 → 그래픽 상단 1554 */
.fin-sec-02 .fin-graph {
  margin-top: 60px;
  margin-left: 277px;
}

/* ------------------------------------------------------------------------
   4-03. 신뢰 (PSD 2128~2451)  02 하단 2035 → 태그 상단 2128 = 93
      카드 3종 이미지 x605~1338 (733x190)
   ------------------------------------------------------------------------ */
.content > .reason-area.fin-sec-03 {
  padding-top: 93px !important;
}

/* 문장 잉크 하단 2234 → 카드 상단(그림자 포함) 2261 */
.fin-sec-03 .fin-graph {
  margin-top: 24px;
  margin-left: 195px;
}

/* ------------------------------------------------------------------------
   4-04. 노하우 (PSD 2561~3245)  03 하단 2451 → 태그 상단 2561 = 110
      빌딩 파노라마 밴드 2810~3245(435) 풀블리드,
      흰 카드 x456~1463 / y2733~3033 (1007x300) 가 밴드 위로 77px 겹친다.
   ------------------------------------------------------------------------ */
.content > .reason-area.fin-sec-04 {
  padding-top: 110px !important;
}

.fin-sec-04 .fin-band {
  position: relative;
  width: 100%;
  height: 435px;
  margin-top: 139px;   /* 문장 잉크 하단 2667 → 밴드 상단 2810 (PSD 실측 재확인) */
  background-image: url(/assets/image/CF/Financial/cont_04_bg_v2026.jpg?v=2026);
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
}

.fin-mim-card {
  position: absolute;
  left: 50%;
  top: -77px;
  margin-left: -503px;
  width: 1007px;
  height: 300px;
  box-sizing: border-box;
  padding: 0 0 0 112px;
  background-color: #ffffff;
  border-radius: 28px;
}

/* *MIM(...) 26px Pretendard-SemiBold #3185a9 */
.fin-mim-card .fin-mim-title {
  margin-top: -15px;
  font-size: 26px;
  line-height: 30px;
  letter-spacing: -0.02em;
  font-weight: 600;
  color: var(--fin-accent);
}

/* 본문 22px Pretendard-Medium / leading 32 */
.fin-mim-card .fin-mim-body {
  margin-top: 8px;
  font-size: 22px;
  line-height: 32px;
  letter-spacing: -0.02em;
  font-weight: 500;
  color: var(--fin-ink);
}

/* 통계 2분할 — PSD '그룹 2' 세로선 3개 x578 / x967 / x1356 (y2887~2953) */
.fin-mim-stats {
  display: flex;
  margin-top: 34px;
  margin-left: -112px;
  padding-left: 122px;
  height: 66px;
}

.fin-mim-stats > div {
  flex: 0 0 389px;
  box-sizing: border-box;
  border-left: 4px solid #dfe7ea;
  text-align: center;
}

.fin-mim-stats > div:last-child {
  border-right: 4px solid #dfe7ea;
}

.fin-mim-stats .fin-stat-num {
  font-size: 40px;
  line-height: 41px;
  letter-spacing: -0.065em;
  font-weight: 700;
  color: var(--fin-navy);
}

.fin-mim-stats .fin-stat-label {
  margin-top: 5px;
  font-size: 16px;
  line-height: 20px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fin-ink);
}

/* 통계 숫자 잉크 2888 → 출처 잉크 2983 = 95 (PSD 실측). 21px 은 6px 부족 */
.fin-mim-card .fin-source {
  margin-top: 27px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fin-note);
}

/* ------------------------------------------------------------------------
   4-05. 어떤 상황에서도 흔들림 없이 (PSD 3367~3893)
      04 밴드 하단 3245 → 소제목 잉크 3367 = 122
      좌 텍스트 x429~761 / 우 그래픽 x826~1510 (684x493, 상단 3400)
   ------------------------------------------------------------------------ */
.content > .reason-area.fin-sec-05 {
  padding-top: 114px !important;
}

.fin-sec-05 .fin-flex {
  display: flex;
  align-items: flex-start;
}

.fin-sec-05 .fin-col {
  flex: 0 0 416px;
  /* 2026-08-07 광고주 QA: 좌측 텍스트 그리드 x420 통일 (styleCommon_v2026.css §A).
     종전 PSD 실측 19px 를 공통 상수로 교체 — 한 곳만 고치면 전 페이지가 함께 움직인다. */
  padding-left: var(--pc-text-indent);
  box-sizing: border-box;
}

.fin-sec-05 .fin-graph {
  flex: 0 0 684px;
  margin-top: 39px;
}

/* 소제목 25px Bold #003652 + 하단 밑줄('모양 1111' 427~759).
   밑줄 실측: 두께 2px, 색 rgba(195,189,181,.53) (PSD 레이어 컴포지트 픽셀).
   레이어 bbox 는 4px 이지만 위/아래 1px 은 완전 투명이며, 네이비가 아니다. */
.fin-subtitle {
  font-size: 25px;
  line-height: 32px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--fin-navy);
}

.fin-sec-05 .fin-subline {
  width: 332px;
  height: 2px;
  margin-top: 9px;
  background-color: var(--fin-line);
}

.fin-sec-05 .fin-title {
  margin-top: 21px;
}

.fin-sec-05 .fin-body {
  margin-top: 58px;
}

/* ------------------------------------------------------------------------
   4-06. 지금 어떤 고민이 있으신가요? (PSD 3991~4491 + 꼬리 4521)
      05 하단 3893 → 밴드 상단 3991 = 98. 풀블리드 다크 #003551.
      좌 텍스트 x428 / 우 카드 2x2 x876~1510 (311x117, 간격 12/8)
   ------------------------------------------------------------------------ */
.content > .reason-area.fin-sec-06 {
  margin-top: 98px;
}

.fin-sec-06 {
  position: relative;
  padding: 0 !important;
  background-color: var(--fin-dark-bg);
}

.fin-sec-06 .fin-inner {
  position: relative;
  display: flex;
  align-items: flex-start;
  height: 500px;
  padding-top: 112px;
  box-sizing: border-box;
}

.fin-sec-06 .fin-col {
  flex: 0 0 466px;
  /* 2026-08-07 광고주 QA: 좌측 텍스트 그리드 x420 통일 (styleCommon_v2026.css §A).
     종전 PSD 실측 18px 를 공통 상수로 교체 — 한 곳만 고치면 전 페이지가 함께 움직인다. */
  padding-left: var(--pc-text-indent);
  box-sizing: border-box;
}

.fin-sec-06 .fin-title {
  margin-top: 11px;
  color: #ffffff;
}

.fin-sec-06 .fin-body {
  margin-top: 39px;
  color: #ffffff;
  font-weight: 500;
}

.fin-sec-06 .fin-cards {
  position: relative;
  flex: 0 0 634px;
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 12px;
}

.fin-sec-06 .fin-cards > div {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  width: 311px;
  height: 117px;
  /* PSD 는 카드 안에서 문구가 세로 중앙 정렬(2줄 카드 y4157 / 3줄 카드 y4145).
     좌우 여백은 텍스트 좌측 26 / 우측 17 실측값.
     2026-08-07 사용자 지시로 테두리를 1px → 3px 로 키웠다.

     같은 날 광고주 QA(PDF p16 "시안과 다르게 적용됨"): 마크업의 <br> 는 시안과 같은데
     한 줄이 카드 안쪽 폭(266px)을 넘겨 다시 접혔다 — "종부세, …방법은"(268.2px),
     "팬데믹과 … 준비 등"(272.4px). PSD tracking(-20)을 그대로 쓰면 Pretendard 렌더가
     시안보다 1~2% 넓어 생기는 문제다.
     → 자간을 건드리지 않고(시안 실측 유지) 여백으로 푼다(사용자 지시):
       우측 패딩 제거 + 좌측 26 → 22. 안쪽 폭 311 - 22 - 0 - 6(3px 테두리 양쪽) = 283px 로
       가장 긴 줄(272.4px)이 10px 여유를 두고 들어간다. */
  padding: 0 0 0 22px;
  border: 3px solid #f2f2f2;
  font-size: 18px;
  line-height: 24px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: #ffffff;
  word-break: keep-all;
}

.fin-sec-06 .fin-cards > div > p {
  margin: 0;
  width: 100%;
}

.fin-sec-06 .fin-cards em {
  font-style: normal;
  font-weight: 500;
  color: var(--fin-mint);
}

.fin-sec-06 .fin-quote-open,
.fin-sec-06 .fin-quote-close {
  position: absolute;
  width: 67px;
  height: 49px;
}

/* PSD 여는 따옴표 (887,4091) / 닫는 따옴표 (1431,4338) — 카드 격자 기준 오프셋 */
.fin-sec-06 .fin-quote-open {
  left: 13px;
  top: -26px;
}

.fin-sec-06 .fin-quote-close {
  right: 11px;
  bottom: -29px;
}

/* 밴드 하단 중앙 꼬리 (사각형 1104 복사)
   2026-08-12 광고주 QA(slide5, "Vertex 위치가 약간 어긋나 있습니다"):
   사용자 지정값으로 bottom -24px → -26px (꼬리를 2px 더 내려 밴드에 붙임). */
.fin-sec-06 .fin-tail {
  position: absolute;
  left: 50%;
  margin-left: -30px;
  bottom: -26px;
  width: 59px;
  height: 26px;
}

/* ------------------------------------------------------------------------
   4-07. 노블리치센터 종합컨설팅 (PSD 4617~5377)
      06 꼬리 하단 4521 → 타이틀 잉크 4617 = 96
      좌 텍스트 x425~981 / 우 방사형 다이어그램 x989~1509 (520x535, 상단 4742)
   ------------------------------------------------------------------------ */
.content > .reason-area.fin-sec-07 {
  /* 06 밴드 하단 4491 → 타이틀 잉크 4617 = 126 (PSD 실측 재확인) */
  padding-top: 120px !important;
}

.fin-sec-07 .fin-flex {
  display: flex;
  align-items: flex-start;
}

.fin-sec-07 .fin-col {
  flex: 1 1 0;
  min-width: 0;
  /* 2026-08-07 광고주 QA: 좌측 텍스트 그리드 x420 통일 (styleCommon_v2026.css §A).
     종전 PSD 실측 15px 를 공통 상수로 교체 — 한 곳만 고치면 전 페이지가 함께 움직인다. */
  padding-left: var(--pc-text-indent);
  box-sizing: border-box;
}

.fin-sec-07 .fin-graph {
  flex: 0 0 520px;
  margin-top: 137px;
}

.fin-sec-07 .fin-title {
  color: var(--fin-ink);
}

/* 본문 26px Regular #000000 (PSD FillColor) / leading 36.
   타이틀 잉크 top 4617 → 본문 잉크 top 4743 = 126 (PSD 실측). 41px 은 5px 과다. */
.fin-sec-07 .fin-body {
  margin-top: 36px;
  color: #000000;
}

/* * 주석 16px Pretendard-Light #707070 / leading 22 */
.fin-sec-07 .fin-note {
  margin-top: 53px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 300;
  color: var(--fin-note2);
}

/* PSD 는 두 * 주석이 한 텍스트 레이어(427,5296)-(893,5377)의 4행이며
   행간 22 가 끊김 없이 이어진다(5296/5318/5340/5362) → 블록 간 여백 0.
   (공용 .fin-hang + .fin-hang 의 2px 을 이 섹션에서만 되돌린다) */
.fin-sec-07 .fin-note + .fin-note {
  margin-top: 0;
}

/* ------------------------------------------------------------------------
   4-08. Customer voice (PSD 5506~6270)
      07 하단 5377 → 밴드 상단 5506 = 129. 풀블리드 사진 배경.
      카드 3종 x431~1489 (344x344, 간격 12), 상단 5776
   ------------------------------------------------------------------------ */
.content > .reason-area.fin-sec-08 {
  /* 07 주석 마지막 줄의 라인박스 하단(잉크 하단 +5) 기준이라 PSD 129 - 5 = 124 */
  margin-top: 123px;
  /* 밴드 상단 5506 → 'Customer voice' 잉크 5617 = 111. 밴드 높이 5506~6270 = 764. */
  padding: 104px 0 103px !important;
}

/* 밴드 상단 중앙 노치 (사각형 1104 복사 2) — 930~989 / 5507~5533, 밴드 상단 +1 */
.fin-sec-08 .fin-tail-top {
  position: absolute;
  left: 50%;
  margin-left: -30px;
  top: 0;
  width: 59px;
  height: 26px;
}

.fin-sec-08 {
  position: relative;
  background-color: #e4e4e4;
  overflow: hidden;   /* ::before 의 블러가 섹션 밖으로 번지지 않게 */
  text-align: center;
}

/* ------------------------------------------------------------------------
   08 고객사례 배경 — 2겹 (2026-08-07 광고주 QA PDF p17 + 사용자 지시)
   ------------------------------------------------------------------------
   문제 1: 종전 `background-size: 100% auto` 는 사진 높이가 **뷰포트 폭**에 따라 정해져
           (원본 1920x761) 섹션 높이 766px 를 못 채웠다 — 1920 에서도 바닥 몇 px,
           1280 에서는 250px 넘게 배경색(#e4e4e4)이 드러났다.
   문제 2: 원본 JPG 맨 아래 2행이 흰색(평균 254)이라 사진 아랫변이 흰 줄로 보였다.
           → 이미지를 타이트 크롭(1920x763 → 1920x761)해 제거. 히어로에서 겪은 것과 같은 유형.

   해법: 사진은 가로 1920px 고정(창 크기와 무관하게 항상 같은 크기·위치)으로 두고,
         1920 보다 넓은 화면에서 좌우가 뚝 잘려 배경색과 만나는 경계는 **같은 이미지를
         흐리게 깐 받침**으로 이어 준다. 별도 이미지 파일 없이 CSS filter 로 처리하므로
         세기는 아래 blur() 값 하나만 고치면 된다.
   ------------------------------------------------------------------------ */
.fin-sec-08::before,
.fin-sec-08::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  background-image: url(/assets/image/CF/Financial/cont_08_bg_v2026.jpg?v=20260807);
  background-repeat: no-repeat;
}

/* 받침 — 전체 폭을 채우고 살짝만 흐리게. 좌우로 넉넉히 빼 두어야 블러 가장자리가
   투명해지며 생기는 밝은 테두리가 화면 안으로 들어오지 않는다. */
.fin-sec-08::before {
  left: -60px;
  right: -60px;
  background-size: cover;
  background-position: center;
  filter: blur(30px);   /* ← 받침 흐림 세기는 이 값 하나로 조절 */
  z-index: 0;
}

/* 본체 — 원본 1920px 고정, 세로는 섹션을 꽉 채운다(766/761 = 0.7% 늘임, 식별 불가) */
.fin-sec-08::after {
  left: 50%;
  width: 1920px;
  margin-left: -960px;
  background-size: 1920px 100%;
  background-position: center top;
  z-index: 1;
}

/* 배경 두 겹보다 위에 콘텐츠 */
.fin-sec-08 > * {
  position: relative;
  z-index: 2;
}

/* 'Customer voice' 34px Pretendard-Bold #003652 + 하단 라인(758~1160, 두께 2px) */
.fin-sec-08 .fin-eyebrow {
  font-size: 34px;
  line-height: 40px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--fin-navy);
}

.fin-sec-08 .fin-subline {
  width: 402px;
  height: 2px;
  margin: 8px auto 0;
  background-color: var(--fin-line);
}

.fin-sec-08 .fin-title {
  margin-top: 22px;
}

/* 타이틀 잉크 5687 → 카드 상단 5776 = 89 (PSD 실측) */
.fin-sec-08 .fin-cards {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 54px;
}

.fin-sec-08 .fin-voice {
  box-sizing: border-box;
  width: 344px;
  height: 344px;
  padding: 37px 0 0 23px;
  background-color: #ffffff;
  text-align: left;
}

.fin-sec-08 .fin-voice-title {
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.02em;
  font-weight: 700;
  color: var(--fin-navy);
}

/* PSD leading 32. 타이틀 잉크 5820 → 소제목 잉크 5854 = 34 */
.fin-sec-08 .fin-voice-sub {
  margin-top: 0;
  padding-left: 13px;
  font-size: 20px;
  line-height: 32px;
  letter-spacing: -0.07em;
  font-weight: 500;
  color: var(--fin-ink);
}

/* 소제목 잉크 5854 → 본문 잉크 5905 = 51 (PSD 실측) */
.fin-sec-08 .fin-voice-desc {
  margin-top: 21px;
  padding-left: 13px;
  font-size: 16px;
  line-height: 24px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fin-note);
}

.fin-sec-08 .fin-note {
  margin-top: 22px;
  padding-left: 22px;
  font-size: 16px;
  line-height: 22px;
  letter-spacing: -0.02em;
  font-weight: 400;
  color: var(--fin-note);
  text-align: left;
}

/* ------------------------------------------------------------------------
   5. 유의사항 — styleguide-2026 §3 (경고색 .color-ec657b, li 행간 23px)
   ------------------------------------------------------------------------ */
.description-area .description-text li {
  /* 2026-08-06 유의사항 정밀 정합: PSD 실측 행 피치 18px (5개 PC PSD 공통).
     종전 23px 는 구버전 USDannuity 답습값 — 시안 제1순위로 교정 */
  line-height: 18px;
}

/* 2026-08-04 사용자 지시(B1): 유의사항 본문색 전 페이지 통일 #707070.
   공용 styleCF.css 의 .description-area{color:#777777}를 페이지 스코프에서만
   덮어쓴다(공용 CSS 원본 미수정). 타이틀(#090909)·경고(#ec657b)는 각자 더 구체적인
   선택자를 가지므로 영향 없음. */
.description-area {
  color: #707070;
}

/* 하단 플로팅 바는 assets/style/CF/Desktop/styleCommon_v2026.css 의
   .bottom-input-area-v2026 스코프(공용 규격)로 처리한다. */

/* ------------------------------------------------------------------------
   자간 (letter-spacing) — PSD tracking 실측 보강 (2026-08-05)
   ------------------------------------------------------------------------
   이 페이지는 요소별로 이미 PSD tracking(-0.02em / -0.065em / -0.07em)을
   지정해 두었으나, 규칙이 붙지 않은 자식 요소(강조 span 등)는 전역 reset 의
   `letter-spacing: -1px` 를 그대로 받아 한 줄 안에서 자간이 섞였다.
   PSD /Cont 기본 tracking 이 -20 이므로 본문 섹션 전체에 기본값을 깐다.
   기존 -0.065em / -0.07em 규칙은 특이도(0,2,0)가 더 높아 그대로 이긴다.
   검증: 14블록 대조에서 최장 줄 폭 시안 대비 -0.3~+0.7% 유지(회귀 없음).
   ------------------------------------------------------------------------ */
.reason-area,
.reason-area * {
  letter-spacing: -0.02em;
}

/* 유의사항 랩 폭 — 실제 유의사항 레이어 엔진 bounds 774.36px
   (종전 518.36 은 숨김 개인정보 레이어 오독) */
.description-area .description-text li {
  max-width: 774.36px;
}

/* 유의사항 자간 — PSD 엔진 Tracking 실측 (70/1000em) */
.description-area .description-text li {
  letter-spacing: -0.07em;
}

/* 시안(포토샵 한글 조판) 어절 단위 줄바꿈 재현 */
.description-area .description-text li {
  word-break: keep-all;
}

/* 준법감시인확인필(연속 두 번째 .description-area) 상단 여백 — 시안 실측 보정 -22px 위로 */
.description-area + .description-area {
  margin-top: -22px;
}