/* ======================================================================== 무배당 변액연금보험 동행 Plus (/annuity) PC - 2026 디자인 리뉴얼 시안: 변액연금보험동행PLUS_PC_디자인변경_260721.psd (1920x6725, 최종 확정본) 주의: 이 파일은 application/views/CF/Annu/Annuity_Certification_View.php 에서만 로드된다. 구 디자인의 비인증 변형(CF/Annu/Annuity_View.php)은 계속 styleAnnu.css 를 쓰므로 그 파일은 절대 수정하지 않는다. (styleguide-2026 §0-5 / 체크리스트 12) ======================================================================== */ /* ------------------------------------------------------------------------ 팔레트 — PSD 스포이드(컴포지트 픽셀 / type 레이어 FillColor) 실측값만 사용. 다른 페이지(달러종신·Total360) 변수 복사 금지 — 아래는 전부 이 PSD 재측정값이다. 히어로 배경 #d3ffe2 (main/BG '사각형 3' 전면 단색, 네 모서리 동일) 탭 언더라인/형광펜 #8ff5b1 (컴포지트 y658 스포이드 · '유지보너스' 강조 FillColor) 강조 잉크/네이비 #003652 (본문 강조 Pretendard-Bold, 상품태그 배너 바탕) 타이틀 그린 #50af70 (히어로 'AI 펀드관리서비스' — 이미지에 포함, 참조용) 본문 잉크 #2d2d2d (섹션 타이틀 ExtraBold / 본문 Light) 주석 #75787b (※ · * 14px Light) 경고 주석 #ec657b ('※ 예시된 펀드수익률…' · 유의사항 경고 항목) 히어로 하단 경고 #ff1037 ('* 실적배당형 상품으로…' 투자 유의 문구) 탭 활성/비활성 #000000 / #191919 ------------------------------------------------------------------------ */ :root { --annu-hero-bg: #d3ffe2; --annu-mint: #8ff5b1; --annu-navy: #003652; --annu-green: #50af70; --annu-ink: #2d2d2d; --annu-note: #75787b; --annu-alert: #ec657b; --annu-hero-alert: #ff1037; --annu-tab-active: #000000; --annu-tab-idle: #191919; } .content * { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important; } /* ------------------------------------------------------------------------ 1. 히어로 (.banner-area) — styleguide-2026 §1 전 페이지 공통 규격 padding 65/65, 총 높이 578px(= 65 + 콘텐츠 448 + 65), .tab-area top 659 → 달러종신·USDannuity·Total360 과 y좌표 완전 일치. 배경 이미지는 PSD main/BG 를 캔버스 폭(0~1920)으로 재크롭해 완전 불투명 1920x578 로 저장했다. cover(늘림) 금지 — 원본 픽셀 크기로 상단 중앙 정렬하고 남는 영역은 동일 색 background-color 가 채운다. ------------------------------------------------------------------------ */ .banner-area { position: relative; background-image: url(/assets/image/CF/Annu/main_bg_v2026.png?v=2026); background-repeat: no-repeat; background-position: top center; background-size: 1920px 578px; background-color: var(--annu-hero-bg); /* 2026-08-12 개정: 콘텐츠 448 → 451(새 시안 260810)에 맞춰 여백 65/65 → 64/63. 총 높이 578 · .tab-area top 659 불변. 상단 64 는 시안 실측(GNB 하단 80 → 히어로 144). */ padding-top: 64px; padding-bottom: 63px; } /* ------------------------------------------------------------------------ 히어로 좌측 통이미지 (2026-08-04 사용자 확정) ------------------------------------------------------------------------ PSD `main/main` 그룹에서 우측 상담폼(DB3)과 미사용 변형(TOP3 A)을 숨기고 txt + TOP3 B 를 한 장으로 합성해 그대로 배치한다. 개별 이미지 재조립(main_txt 241 + margin-top 27 + 뱃지 180)으로 생기던 미묘한 조판 차이를 제거하기 위함. PSD 실측(1920 캔버스, 캔버스 y == 브라우저 y): · 통이미지 알파 bbox = x408~953 / y144~595 → 545 x 451 · 1100 그리드 x410 기준 left offset = -2px · 배너 표준 불변: 통이미지 하단 = 594 = 우측 폼 하단 → margin-top = 448 - 451 = -3px (main-description 높이 448 유지) 대체 이력 — 통이미지 전환으로 제거한 규칙: .banner-section .main-text { margin: 0 }, .main-text img { display: block } .banner-section .main-object { margin-top: 27px; display:flex; gap: 8px } ------------------------------------------------------------------------ */ .banner-section .main-description .hero-merge { display: block; width: 545px; height: 451px; } /* 히어로 하단 투자 유의 문구(실적배당형 경고). PSD /main/'* 실적배당형 상품으로…' bbox (412,602)-(863,635), 14px/leading 18, FillColor #ff1037. .banner-area 는 578px 고정이어야 하므로 문서 흐름에 추가하지 않고 절대 위치로 배치한다(뱃지 하단 y594 ~ 배너 하단 y659 사이 여백). left: 1100px 그리드(=x410) 기준 x412. */ .annu-hero-note { position: absolute; left: 50%; margin-left: -548px; bottom: 21px; font-size: 14px; /* PSD leading 20 (다른 ※ 주석의 18 과 다르다) — 잉크 밴드 실측으로 재확인 */ line-height: 20px; letter-spacing: -0.02em; color: var(--annu-hero-alert); text-align: left; /* PSD 는 Pretendard-Regular(400) */ font-weight: 400; } @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; } } /* ------------------------------------------------------------------------ 2. 탭 — styleguide-2026 §2 PSD /tab : '왜 필요할까요?' Pretendard-Bold 20px #000000(활성), '상품 특장점'·'부가혜택' Pretendard-Medium 20px #191919(비활성), 활성 배경 #ffffff / 탭바 배경 #f4f4f4 / 언더라인 #8ff5b1(컴포지트 y658). ------------------------------------------------------------------------ */ .tab-area { width: 100%; background-color: #F4F4F4; } .tab-area .tab { width: 1100px; margin: 0 auto; align-items: center; } .tab-area .tab > div { height: 50px; color: var(--annu-tab-idle); } .tab-area .tab > div:hover { border-top: 3px solid var(--annu-mint); } .tab-area .tab .active { color: var(--annu-tab-active); background-color: white; border-top: 3px solid var(--annu-mint); } /* 공용 service.certification.js 스크롤스파이가 클릭 후 1초간 active 를 반복해서 떼었다 붙이는데, 페이지 클릭 핸들러가 함께 붙이는 구버전 유틸 .color-0090DA (파란색)는 active 와 무관하게 계속 유효해 파란 글자가 드러난다 → 항상 블랙 고정. */ .tab-area .tab-link.color-0090DA { color: var(--annu-tab-active) !important; } /* ------------------------------------------------------------------------ 3. 본문 섹션 레이아웃 PSD 그리드 — 1100px 중앙(x410~1510), 좌측 텍스트 컬럼 x428, 우측 그래프 컬럼 x953. → padding-left 18px + .description 폭 525px 로 그래프 시작점을 x953 에 맞춘다. ------------------------------------------------------------------------ */ /* 섹션 상하 여백 — PSD 실측. 구분선(Rectangle 578) 기준으로 01 잉크 하단 1196 → 구분선 1295 = 99, 구분선 1300 → 02 잉크 상단 1398 = 98, 02→03 = 95/99, 03→04 = 99/99, 05→06 = 99/98, 06→회사소개 = 97 … → 공용 styleCF.css 의 80px 대신 98px 로 통일한다(공용 섹션도 같은 리듬). */ .reason-area { width: 1100px; margin: 0 auto; padding: 98px 0 !important; /* 2026-08-07 광고주 QA: 좌측 텍스트 그리드 x420 통일 (styleCommon_v2026.css §A) */ padding-left: var(--pc-text-indent) !important; box-sizing: border-box; } /* 첫 섹션 상단 여백만 공통 상수로 — 둘째 섹션부터는 이 페이지의 98px 리듬을 유지한다. (공통 파일 규칙도 !important 지만 페이지 CSS 가 뒤에 로드돼 이 선언이 이긴다) */ .content > .reason-area#reason { padding-top: var(--pc-body-top) !important; } /* 텍스트 컬럼 폭을 줄어든 좌측 패딩만큼 늘려 그래프 컬럼 좌단(x953)을 보존한다 — 이미지는 이번 범위 밖(PSD x 고정 유지). 525 + 8 = 533 */ .reason-area.flex > .description { flex: 0 0 calc(525px + (18px - var(--pc-text-indent))); } .reason-area.flex > .graph { flex: 1 1 0; min-width: 0; } .reason-area .graph img { display: block; max-width: 100%; height: auto; } /* 공용 섹션(회사소개/360케어) — 이 페이지만 max-width:100% 때문에 원본보다 축소 렌더링 되고 있었다(회사소개 610→557, 360케어 568→557). 새 시안은 두 이미지 모두 원본 크기이고 x 는 4종 공통(회사소개 x964 / 360케어 x960)이다. 이 페이지는 `.description` 이 flex 0 0 543px 이라 그래프 컬럼 좌단이 x953 이다. */ .reason-area .graph img[src*="company_v2"] { max-width: none; margin-left: 11px; /* 953 + 11 → x964 */ margin-right: 0; } #healthcare.reason-area .graph img { max-width: none; margin-left: 7px; /* 953 + 7 → x960 */ margin-right: 0; } /* 콘텐츠 이미지 1:1 배치 (styleguide-2026 §0-2) — 이 페이지 고유 섹션(.annu-sec)만. 시안의 그래프는 1100 그리드(x410~1510)를 살짝 넘겨 x1520~1524 까지 흘러나오게 설계돼 있다(PSD /Cont/01/표1 = x953~1524, /Cont/02/표2 = ~1522 …). 여기에 max-width:100% 가 걸리면 그래프 컬럼 폭 557px 로 강제 축소되며 리샘플 흐림이 생긴다 — 01 571→557, 02 569→557, 03 567→557, 05 567→557 (0.975~0.982배). → max-width 를 풀어 원본 픽셀 그대로 두고 좌측 시작점(x953)만 그리드에 고정한다. 컨테이너를 넘는 폭은 최대 14px, 캔버스(1920) 안이라 가로 스크롤은 생기지 않는다. 공용 섹션(회사소개·360케어)은 .annu-sec 가 없으므로 종전 그대로다. */ .reason-area.annu-sec .graph img { max-width: none; /* 2026-08-12 새 시안(260810): 그래프 좌측 시작점이 x953 → x963 으로 10px 이동. 템플릿 매칭 오차 2.5~3.4 = 동일 그래픽, 위치만 이동. */ margin-left: 10px; } /* 05 만 시안이 1px 더 오른쪽(x964) */ .reason-area.annu-sec .graph img[src*="cont_5_v2026"] { margin-left: 11px; } /* 04 '펀드 수익률' 그래프 — 2026-08-12 사용자 지시("시안에 맞춰야 할 것 같다")로 C1(89% 축소) 결정을 되돌리고 시안 원본 크기(626x390)로 배치한다. 새 시안 실측: x963~1589 로 1100 그리드(x1510)를 79px 넘겨 흘러나온다 — 다른 섹션의 그래프도 x1520~1589 로 넘기게 설계돼 있어 이 페이지에서 이질적이지 않다. (원본 626 크기로 시안 매칭 오차 3.18 = 동일 그래픽) → width 고정과, 축소로 줄어든 높이를 메우던 margin-bottom:34px 을 함께 제거한다. */ .reason-area.annu-sec .graph.annu-graph-04 img { /* (규칙 본문 없음 — 원본 크기 그대로) */ } /* 06 '가족 내 연금 이전' 3원 다이어그램은 PSD 상 x1021~1440 (그래프 컬럼 기준 +68px)이며, 세로로도 좌측 타이틀 잉크보다 27px 위에서 시작한다(다른 섹션은 ±1px 로 같은 높이). */ .reason-area .graph.annu-graph-06 { margin-left: 68px; margin-top: -24px; } /* 타이틀 잉크 하단 → 본문 잉크 상단 = 35 PSD px (전 섹션 동일). 행스캔 실측으로 공용 20px 은 7px 부족 → 27px. */ .reason-area .text { margin-top: 27px; } /* 첫 자식이 .text 인 섹션은 위에 .title 이 없으므로 20px 이 불필요하다 */ .reason-area .description > .text:first-child { margin-top: 0; } /* ------------------------------------------------------------------------ 4. 잉크 색 / 행간 — styleguide-2026 §9 행간은 배수가 아니라 PSD leading 을 CSS px 절대값으로 고정한다. 섹션 타이틀 26px / leading 32 / tracking -20 (= -0.02em) 본문 18px / leading 24 / tracking -40 (= -0.04em) ※·* 주석 14px / leading 18 / tracking -20 ------------------------------------------------------------------------ */ /* 2026-08-07 광고주 QA(폰트 통일 / PDF p12 "변액연금만 본문 굵기가 다르다"): 이 페이지에만 걸려 있던 PSD 실측 조판(타이틀 800·32·-0.02em / 본문 300·24·-0.04em / 주석 300·18·-0.02em, 잉크 #2d2d2d)을 걷어내고 USDannuity 기준으로 되돌린다. · 굵기 : 타이틀 700(.font-bold) / 바디 500(reset 기본) · 행간 : 기본 1.3배 (33.8 / 23.4 / 18.2) · 자간 : 전역 reset -1px (본문 중 주석만 -0.02em → styleCommon §A) · 잉크 : 유틸리티 .color-090909 / .color-777777 그대로 PSD 실측값은 이 주석과 위 블록 설명에 남겨 둔다 — 시안 기준 복원용. */ .reason-area .annu-navy { color: var(--annu-navy); } /* 본문 잉크 하단 → ※ 주석 잉크 상단 = 38 PSD px (03/05/06 실측 39·38·38) */ .reason-area .annu-note { color: var(--annu-note); margin-top: 15px; } .reason-area .annu-note-alert { color: var(--annu-alert); } /* 형광펜 하이라이트 — PSD '사각형 1277' 계열(민트 블록 + 네이비 텍스트). 2026-08-07 광고주 QA(폰트 통일): 종전 ExtraBold(800)는 이 페이지만의 PSD 실측이라 기준(USDannuity)의 bold(700)로 되돌린다 — PDF p12 '변액만 굵기가 다르다' 지적 대응. */ .highlight { font-weight: bold; color: var(--annu-navy); background: linear-gradient(var(--annu-mint), var(--annu-mint)) no-repeat; /* PSD 05구역 '사각형 1277'(3133~3162)·'복사 2'(3165~3194): 바 29px, 줄 사이 3px 분리. 적층 시 바가 붙지 않도록 바 높이 축소. -2px(간격 3px)로는 여전히 좁아 보인다는 QA 지적으로 -3px(바 28px, 간격 4px) 확정 */ background-size: 100% calc(100% - 3px); background-position: 0 80%; } /* ------------------------------------------------------------------------ 5. 행잉 인덴트 — styleguide-2026 §4 (PC: padding-left 1.05em / indent -0.75em) 스페이서 방식 금지. 자동 줄바꿈이 일어나는 주석은 한글 어절 단위로 끊기도록 keep-all. ------------------------------------------------------------------------ */ .annu-hang { padding-left: 1.05em; text-indent: -0.75em; word-break: keep-all; } .annu-hang + .annu-hang { margin-top: 2px; } /* ------------------------------------------------------------------------ 6. 유의사항 — 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) ------------------------------------------------------------------------ .annu-title / .annu-body / .annu-note 는 이미 PSD tracking(-20/-40/-20)으로 지정돼 있었으나, **자식 요소**(강조 span 등)는 전역 reset 의 `letter-spacing: -1px` 를 그대로 물려받아 한 줄 안에서 자간이 섞였다. PSD /Cont 기본 tracking 은 -20 이므로 본문 섹션 전체에 -0.02em 을 깔고, -40 블록(.annu-body)은 자식까지 -0.04em 으로 맞춘다. 검증: 시안 대비 최장 줄 폭 -4.8~+0.5% → -0.4~+1.6% (19블록 대조). ------------------------------------------------------------------------ */ /* ↑ 위 자간 블록도 2026-08-07 광고주 QA(폰트 통일)로 **적용 중단**한다. 기준 USDannuity 는 전역 reset 의 -1px 를 그대로 쓴다. 본문 중 주석(14px)만 -0.02em 이며 styleCommon_v2026.css §A 가 단일 소스다. */ /* 유의사항 랩 폭 — PSD 텍스트 박스 엔진 bounds 실측 1061.36px. 줄바꿈 위치 시안 정합 */ .description-area .description-text li { max-width: 1061.36px; } /* 유의사항 자간 — PSD 엔진 Tracking 실측 (60/1000em) */ .description-area .description-text li { letter-spacing: -0.06em; } /* 시안(포토샵 한글 조판) 어절 단위 줄바꿈 재현 */ .description-area .description-text li { word-break: keep-all; } /* 협회 심의필 블록(두 번째 .description-area) 상단 여백 — 시안 실측 보정 (중첩 마크업 형제화 이후 기준 +15px). 2026-08-07 광고주 QA(PDF p13 "그레이 배경끊김"): margin 으로 주면 두 블록 사이 15px 가 흰색으로 뚫린다 → 같은 값을 padding-top 으로 옮겨 배경을 잇는다(문구 위치 불변). */ .description-area + .description-area { margin-top: 0; padding-top: 15px; }