/* ======================================================================== 2026 디자인 리뉴얼 — PC 공용 컴포넌트 규격 로더: CF/MINI/Dollar_Certification_View.php, CF/MINI/360_Certification_View.php (페이지 전용 style*_v2026.css 보다 먼저 — 페이지 규칙이 항상 뒤에서 이김) MO 의 assets/style/CF/Mobile/styleCommon_v2026.css 와 같은 역할/스코프 원칙. ======================================================================== */ /* ======================================================================== §A. 2026 PC 본문 조판 표준 (2026-08-07 광고주 QA 확정) — 단일 소스 ======================================================================== 광고주 지시: 리뉴얼 4종(달러종신·360종합·변액연금·종합보장)의 본문 좌측 그리드와 타이틀/바디 서체를 **USDannuity(오로지연금, 라이브) 기준으로 통일**한다. 본문 중 주석(유의사항)만 예외로 **Total360 기준**을 쓴다(USDannuity 는 텍스트량이 많아 자간이 좁은 게 맞지만, 그 값을 타 페이지에 옮기는 것은 원치 않는다는 지시). USDannuity 실측 = 오버라이드가 없는 **기본 조판**이다: · 행간 = 브라우저 기본 1.3배 (26px→33.8 / 18px→23.4 / 14px→18.2) · 자간 = 전역 reset(resetMetlife.css)의 -1px · 색 = 구버전 유틸리티 클래스 그대로 (.color-090909 / .color-777777) → 4종에 얹혀 있던 PSD 실측 튜닝(행간 32/24/18, 자간 -0.02~-0.055em, 잉크 #2d2d2d)을 걷어내면 자동으로 기준과 일치한다. 그래서 이 파일에는 **기본값과 다른 항목만** 선언한다 — 즉 주석(14px) 규격과 좌측 그리드 상수. 기준표 (1920 뷰포트) | 역할 | size | weight | line-height | letter-spacing | color | | 타이틀 | 26px | 700 | 33.8px | -1px | #090909 | | 타이틀/본문 강조 | - | 700 | - | -1px | #003652 | | 바디 | 18px | 500 | 23.4px | -1px | #777777 | | 본문 주석 | 14px | 500 | 18.2px | -0.02em | #75787B | | 본문 텍스트 좌측선 | x420 (컨테이너 1100 중앙정렬 x410 + 10) | ※ USDannuity(styleUSDAnnu.css)는 라이브 승인분이라 이 파일을 로드하지 않는다. 값이 곧 그 페이지의 현재 렌더이므로 결과는 동일하다. ※ 유의사항 영역(.description-area = 하단 '가입 시 알아두실 사항')은 이번 지시 범위 밖(광고주가 '푸터 유의사항 아닌 본문 중' 이라고 명시) → 페이지 규칙 유지. ------------------------------------------------------------------------ */ :root { /* 본문 텍스트 좌측선 = .reason-area 좌단 x410 + 이 값. 좌측 그리드를 옮기려면 여기 한 곳만 고치면 4개 페이지가 함께 움직인다. 2026-08-12 개정 10px → 0: 구 시안(260724~0731)은 본문 좌측선이 페이지마다 426~432 로 흩어져 있어 x420 이 타협값이었다. 새 시안(260810)은 4종 모두 409~413 으로 통일됐다 — 즉 디자이너가 본문 그리드를 컨테이너 좌측선(x410)에 맞춰 다시 잡았다. (실측: 구 426/427/430/431 최빈 → 신 410/411 최빈, 4종 일치) ※ 종합보장설계(financial)는 시안 개정 대상이 아니므로(사용자 확정) styleFinancial_v2026.css 에서 10px 로 되돌려 고정한다. */ --pc-text-indent: 0px; /* 탭 하단(y712) → 첫 본문 텍스트 잉크(y832) = 120px. USDannuity 는 이 값을 섹션 padding-top 80 + .description margin-top 40 으로 쪼개 갖고 있었다(하드코딩). 4종은 그 합계를 이 상수 하나로 관리한다 — 페이지를 오가도 본문이 같은 높이에서 시작하게 하는 것이 목적. */ --pc-body-top: 120px; } /* 첫 본문 섹션 상단 여백. 공용 styleCF.css 가 `.reason-area{padding:80px 0 !important}` 로 걸어 두어 !important 가 필요하다. 둘째 섹션부터는 페이지별 세로 리듬을 유지한다. 선택자에 `:first-of-type` 을 쓰면 안 된다 — `.content` 의 첫 div 는 `.banner-area` 라서 어떤 `.reason-area` 에도 매칭되지 않는다. 첫 본문 섹션은 세 페이지 모두 첫 탭('상품 특장점')의 앵커인 `#reason` 이므로 그것을 기준으로 잡는다. (종합보장은 탭이 없어 `.fin-sec-01` 로 페이지 CSS 에서 따로 건다) */ .content > .reason-area#reason { padding-top: var(--pc-body-top) !important; } .content > .reason-area#reason > .description { margin-top: 0; } /* 본문 중 주석(14px) — Total360 기준. 기본 조판과 다른 것은 자간(-1px → -0.02em)과 잉크(#777777 → #75787B) 두 가지뿐이다. 전역 reset 이 자식 요소마다 letter-spacing 을 다시 걸므로 자식까지 함께 지정한다. */ .reason-area .font14, .reason-area .font14 * { letter-spacing: -0.02em; } .reason-area .font14.color-777777 { color: #75787B; } /* ------------------------------------------------------------------------ 하단 플로팅 바 (QuickInputBottom_Certificate_View_v2026 = .bottom-input-area-v2026) PSD 실측 (달러종신 PC 260727 / 360종합 PC 260727 — 두 시안의 '하단ALL/플로팅DB' 그룹은 y 오프셋만 다르고 x좌표·색·크기가 완전히 동일해 공용 규격으로 확정): 바 : border-top 2px #d5d5d5 / 배경 #f2f2f2 97px / border-bottom 2px #d5d5d5 = 101px 콘텐츠 행 : 바 상단 기준 y26~73 (높이 48) → padding 24 / 25 문구 : x411~802 (폭 392), 잉크 y36~60 run0 '30초면 OK!' Pretendard-Bold 27px #2d8683 run1 나머지 Pretendard-Bold 27px #191919 / tracking -40(=-0.04em) 생년월일 : 박스 x824~1083 (260x48), 플레이스홀더 잉크 x838 (박스 좌측 +14) 성별 : 라디오 24x24 (x1096 / x1175), 라벨 잉크 x1130~1158 / x1208~1237 off = 8px #eeeeee 점 / on = 13px #008bd3 점 + 라벨 #008cd3 버튼 : 110x48, x1257 / x1377 (사이 11px) 컨테이너 .position 은 1100px 중앙(=x410~1510)이며 콘텐츠는 좌측 정렬로 x411 에서 시작한다. ------------------------------------------------------------------------ */ .bottom-input-area-v2026 { border-top-color: #d5d5d5; border-bottom-color: #d5d5d5; } /* 공용 styleCF.css 는 padding 20px 0 + 자식 margin 5px 라 바 높이가 104px 였다. PSD 는 97(+테두리 4) = 101px → padding 24/25, 자식 세로 마진 0. */ .bottom-input-area-v2026 .position { padding: 24px 0 25px; } .bottom-input-area-v2026 .position > div { margin: 0; } /* 문구 — 공용 styleCF.css 기본값(16px/#090909/max-width 380px)을 덮어쓴다. */ .bottom-input-area-v2026 .quick-input-bottom-phrase { max-width: none; white-space: nowrap; font-size: 27px; line-height: 32px; letter-spacing: -0.04em; font-weight: bold; color: #191919; } /* '30초면 OK!' 앞머리 강조 (컴포넌트가 인라인 font-weight:inherit 로 굵기를 상속시킨다) */ .bottom-input-area-v2026 .quick-input-bottom-phrase .phrase-accent { color: #2d8683; } /* 문구 우측 끝(x803) → 생년월일 박스 좌측(x824) = 21px. margin-bottom 2px 는 align-items:center 기준선을 1px 올려 문구 잉크 상단을 PSD(바 상단 기준 y36)와 정확히 맞추기 위한 것. */ .bottom-input-area-v2026 .position > .name-layer { margin-right: 21px; margin-bottom: 2px; } .bottom-input-area-v2026 .birth-layer > input { width: 260px; height: 48px; padding: 5px 13px; border: 1px solid #dcdcdc; border-radius: 6px; font-size: 16px; box-sizing: border-box; } .bottom-input-area-v2026 .birth-layer > input::placeholder { color: #707070; } /* 생년월일 박스 우측(x1084) → 첫 라디오(x1096) = 12px */ .bottom-input-area-v2026 .position > .gender-layer { margin-left: 12px; } /* '여성' 라벨 끝(x1237) → 첫 버튼(x1257) */ .bottom-input-area-v2026 .position > .buttons-layer { margin-left: 17px; } .bottom-input-area-v2026 .gender-layer { display: flex; flex-wrap: nowrap; align-items: center; font-size: 18px; font-weight: normal; letter-spacing: normal; color: #090909; } /* reset(전역 div 규칙)이 자식 div/label 마다 font-weight:500 / letter-spacing:-1px 을 다시 걸기 때문에 상속만으로는 라벨 서체가 잡히지 않는다 → 내부 요소에 직접 지정. */ .bottom-input-area-v2026 .gender-layer > div, .bottom-input-area-v2026 .gender-layer label { white-space: nowrap; font-size: 18px; font-weight: normal; letter-spacing: normal; color: #090909; } .bottom-input-area-v2026 .gender-layer label { display: flex; align-items: center; cursor: pointer; } /* '남성' 라벨 끝(x1158) → 두 번째 라디오(x1175) = 15px (라벨 박스의 우측 베어링 2px 포함) */ .bottom-input-area-v2026 .bottom-gender-male { margin-right: 15px; } /* 공용 styleCF.css 의 16x16 네이티브 라디오 → PSD 의 24px 커스텀 라디오 */ .bottom-input-area-v2026 .gender-layer input[type="radio"] { -webkit-appearance: none; appearance: none; box-sizing: border-box; width: 24px; height: 24px; margin: 0 9px 0 0; border: 1px solid #cfcfcf; border-radius: 50%; background: radial-gradient(circle at center, #eeeeee 0 4px, #ffffff 4px); } .bottom-input-area-v2026 .gender-layer input[type="radio"]:checked { background: radial-gradient(circle at center, #008bd3 0 6.5px, #ffffff 6.5px); } /* PSD 는 선택된 쪽 라벨도 #008cd3 로 바뀐다. input 이 label 안에 있는 구조라 :has() 로 처리하며, :has() 미지원 브라우저는 이 규칙만 무시하고 나머지는 그대로 동작한다. */ .bottom-input-area-v2026 .gender-layer label:has(input[type="radio"]:checked) { color: #008cd3; } /* 버튼 사이 11px */ .bottom-input-area-v2026 .buttons-layer > a:first-child { margin-right: 11px; } /* ------------------------------------------------------------------------ GNB / 푸터 Pretendard (2026-08-04, D1 확정: 2026 리뉴얼 기본 폰트 = Pretendard) ------------------------------------------------------------------------ 레이아웃 뷰와 공용 resetMetlife.css 는 수정 금지(styleguide §0-5)이므로, 리뉴얼 페이지가 로드하는 이 CSS 안에서만 GNB/푸터에 스코프해 덮어쓴다. → 이 파일을 로드하지 않는 범위 밖 페이지(Event 등)의 GNB 는 그대로 NotoSansKR. .menu_area = 로고 header.header + 메뉴 .nav_area 를 함께 감싸는 GNB 컨테이너 .content.copy = 푸터(로고/개인정보처리방침/사업자정보). 본문 `.content *` 규칙에 이미 걸려 있지만, 페이지 CSS 에 `.content *` 가 없는 경우에도 푸터가 빠지지 않도록 여기서 명시한다. ------------------------------------------------------------------------ */ .menu_area, .menu_area *, .content.copy, .content.copy * { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important; } /* ※ 마커형 약관 항목 — 시안: ※ 가 마커 열(x410, '-' 자리), 본문은 본문선(x421). 구조는 별도 li (QA 확정 2026-08-06). 공용 li:before '-' 는 표시하지 않는다 */ /* ※ 를 공용 '-' 대신 ::before 로 마커 열(x410)에 — 본문은 본문열(x421) 유지 (인라인 ※+공백이면 본문이 밀려 아랫줄과 어긋남). QA 2026-08-06 */ .description-area > .description-text li.desc-mark:before { content: "\203B"; position: absolute; margin-left: -11px; } /* ------------------------------------------------------------------------ §B. 섹션 구분선 규격 (2026-08-07 사용자 지시) — 값 단일 소스 ------------------------------------------------------------------------ 시안의 구분선은 본문 컨테이너(1100)보다 넓다. PSD 실측: 달러종신 / 변액 / USDannuity 폭 1260 (#d9d9d6) 360종합 폭 1300 (#d5d5d5) 기준 페이지(USDannuity)를 따라 **1260 중앙정렬**로 통일한다. (시안은 1260 짜리 선이 캔버스 중심에서 10.5px 왼쪽에 놓여 있는데, 360 만 정확히 중앙이라 배치 실수로 보고 중앙정렬을 채택했다. 다른 값으로 가려면 아래 한 줄만 고친다.) 실제 그리는 규칙은 Desktop/styleCF.css 에 있다(공용 파일). 여기서는 값만 준다. ------------------------------------------------------------------------ */ :root { --pc-divider-width: 1260px; --pc-divider-color: #DBDBDB; --pc-divider-border: transparent; /* 기존 border 는 자리만 유지하고 색을 지운다 */ } /* 추천상품 하단 구분선 제거 (2026-08-07 사용자 지시 — 시안에 없음) */ .recommend-area { border-bottom: none; } /* ------------------------------------------------------------------------ §C. 페이지 본문 스크롤바 (2026-08-07 사용자 지시) ------------------------------------------------------------------------ Windows 는 브라우저 세로 스크롤바가 ~15px 를 차지해 뷰포트가 좁아진다. 그만큼 1100/1260 중앙 그리드가 왼쪽으로 밀려 Mac 과 화면이 미세하게 달라진다. → 네이티브 스크롤바를 감추고(자리 0), assets/script/CF/popupScrollbar_v2026.js 가 자리를 차지하지 않는 오버레이 썸을 그린다. 스크롤 중이거나 우측 가장자리에 커서를 대면 나타나고, 드래그로 위치 이동도 된다. 범위 : 이 파일을 로드하는 2026 리뉴얼 5페이지 한정. */ html { scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* 구 Edge / IE */ } html::-webkit-scrollbar { width: 0; height: 0; } /* ------------------------------------------------------------------------ §D. 하단 공용 영역 좌측 그리드 정렬 (2026-08-07 사용자 지시) ------------------------------------------------------------------------ 추천상품 / 소셜미디어 채널 / 가입 시 알아두실 사항은 공용 컴포넌트라 안쪽 컨테이너가 `width:1100px; margin:0 auto` (= x410) 로만 잡혀 있어, 본문 좌측 그리드(x420)보다 10px 왼쪽으로 튀어나와 보였다. → 컨테이너 폭·우측 끝(x1510)은 그대로 두고(border-box) 좌측만 --pc-text-indent 만큼 들여 본문선에 맞춘다. 값은 §A 의 상수를 그대로 쓰므로 그리드를 옮기면 함께 따라온다. ------------------------------------------------------------------------ */ .recommend-area .title, .recommend-area .items, .social-area .title, .description-area > .description-title { box-sizing: border-box; padding-left: var(--pc-text-indent); } /* 소셜 아이콘 행 (2026-08-07 사용자 지시) 종전: content-box 1110 + padding-left 10 에 자식이 `float:left; margin:0 5px` — 첫 아이콘이 좌측 마진 때문에 그리드에서 5px 밀려 있었고 간격도 5+5=10px 였다. 변경: 컨테이너를 flex + gap 으로 바꾸고 자식 좌우 마진을 제거한다. → 첫 아이콘이 컨테이너 콘텐츠 시작점(= 본문 그리드 x420)에 정확히 붙는다. 간격은 시안 기준 15px (2026-08-07 사용자 확정). */ .social-area .items { box-sizing: border-box; width: 1100px; padding-left: var(--pc-text-indent); display: flex; gap: 15px; } .social-area .items > div { float: none; margin: 0; } /* ------------------------------------------------------------------------ GNB 드롭다운 NEW 뱃지 세로 정렬 (2026-08-13 광고주 QA, 260813 slide2) ------------------------------------------------------------------------ "NEW 가 살짝 아래로 떨어진 것 같습니다". 공용 styleCF.css 의 `.nav-sub-menu a > img { margin: 3px }` 가 인라인 이미지에 위쪽 3px 여백을 주고, 기본 baseline 정렬이라 글자 밑선 아래로 더 내려간다. → 리뉴얼 PC 스코프에서만 텍스트 중앙에 맞춘다(공용 CSS·범위 밖 페이지 무수정). ------------------------------------------------------------------------ */ .nav-sub-menu a > img { /* 2026-08-13 사용자 지시: 중앙 정렬에서 3px 더 위로 */ margin: -3px 0 0 3px; vertical-align: middle; }