/* ======================================================================== 360종합보장보험 (/Total360) - 2026 디자인 리뉴얼 PSD 스포이드 값 기반 CSS 변수 (MetLife_360종합보장보험_PC_디자인변경_260727.psd) ======================================================================== */ :root { --tl360-hero-bg: #e7f9ff; --tl360-navy: #003652; --tl360-mint: #8ff5b1; --tl360-coral: #ec657b; --tl360-teal: #3185a9; --tl360-ink: #2d2d2d; /* 본문/타이틀 기본 잉크 (PSD Pretendard-Light 18px) */ --tl360-note: #75787b; /* * 주석 */ --tl360-tab-active: #000000; --tl360-tab-idle: #191919; } .content * { font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important; } /* 표준 소급(styleguide-2026 §1): PC .banner-area 는 전 페이지 공통 규격이다. padding 65/65 + 콘텐츠 448 = 총 578px, .tab-area top 670 — 달러종신/USDannuity 와 동일해야 페이지를 전환해도 배너 높이와 오브젝트 위치가 흔들리지 않는다. PSD(1920x6966) 실측도 같은 값이다: 히어로 배경 y78~659, 카피 y143, 뱃지 하단 y591 → 143-78 = 65(상단 패딩), 591-143 = 448(콘텐츠). 배경 이미지는 캔버스 폭으로 재크롭 후 완전 불투명 영역만 남긴 1920x578 을 원본 크기로 깐다 (cover 로 늘리면 시안과 어긋나고 상·하단 반투명 행이 흰 선으로 보인다). */ .banner-area { background-image: url(/assets/image/CF/360/main_bg_v2026.png?v=2); background-repeat: no-repeat; background-position: top center; background-size: 1920px 578px; background-color: var(--tl360-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` 그룹(txt + TOP3)을 한 장으로 합성해 그대로 배치한다. 개별 이미지 재조립(main_txt 233 + margin-top 33 + 뱃지 182)으로 생기던 미묘한 조판 차이를 제거하기 위함. PSD 실측(1920 캔버스, 캔버스 y == 브라우저 y): · PSD 알파 bbox = x410~955 / y144~590 → 545 x 446 ※ 2026-08-04 2차 — 4페이지 히어로 세로/가로 정렬 보정(사용자 지시, PSD보다 눈 우선) 달러종신·변액연금의 히어로가 서로 완벽히 일치하므로 그 둘이 기준이다. 기준값: 타이틀 상단 잉크 y143 · 뱃지 밴드 하단 잉크 y594(=폼 하단) · 좌측 잉크 x408 이 페이지 PSD 는 타이틀~뱃지 간격이 33px(기준 38px)이라 상단·하단을 동시에 맞출 수 없었다(전에는 상단만 맞추고 뱃지가 5px 위였음). → 통이미지 **내부의 투명 갭만** 33 → 38 로 넓혀 총 높이를 545x451 로 통일했다. 잉크 블록(타이틀 233px / 뱃지 밴드 180px)은 손대지 않았으므로 통이미지 원칙 유지. 도구: tools/r6_align.py, 기록: analysis/r6/align.json → 이제 달러종신·변액연금·Total360·USDannuity 네 페이지의 배치값이 완전히 동일하다. 2026-08-12 광고주 QA 반영 — margin-left:-2px / margin-top:-3px 제거: 새 시안(260810)은 통이미지 좌측선이 x400 = 탭 활성 언더라인 좌측선 = 1100 그리드 좌측선이고, 우측 상담폼도 451px(통이미지와 같은 박스 y144~595)로 바뀌었다. 구 시안 기준으로 넣었던 두 보정값(-2/-3)은 근거가 사라져 제거한다. 상담폼 451 복원은 QuickInput_Certificate_View_v2.php 참조. 대체 이력 — 통이미지 전환으로 제거한 규칙: .banner-section .main-text { margin: 0 } .banner-section .main-object { margin-top: 33px; display:flex; gap: 8px } 대체 이력 — 정렬 보정으로 제거한 규칙: .banner-section .main-description { padding-bottom: 5px } (높이 446 보정용) ------------------------------------------------------------------------ */ .banner-section .main-description .hero-merge { display: block; width: 545px; height: 451px; } .tab-area { width: 100%; background-color: #F4F4F4; } .tab-area .tab { width: 1100px; margin: 0 auto; align-items: center; } .tab-area .tab > div { height: 50px; } .tab-area .tab > div:hover { border-top: 3px solid var(--tl360-mint); } /* 표준 소급(styleguide-2026 §2): 활성 #000 / 비활성 #191919. PSD /tab/ 실측도 동일 — '상품 특장점' Pretendard-Bold 20px #000000, 나머지 Pretendard-Medium 20px #191919. */ .tab-area .tab > div { color: var(--tl360-tab-idle); } .tab-area .tab .active { color: var(--tl360-tab-active); background-color: white; border-top: 3px solid var(--tl360-mint); } /* 공용 service.certification.js 의 스크롤스파이가 탭 클릭 후 active 를 반복해서 떼는 동안 구버전 유틸 클래스 .color-0090DA(파란색)가 드러나는 것을 막는다(PC/MO 공통 표준). */ .tab-area .tab-link.color-0090DA { color: var(--tl360-tab-active) !important; } .reason-area { width: 1100px; margin: 0 auto; padding: 72px 0; } /* 2026-08-07 광고주 QA(좌측 그리드 x420 통일): 이 페이지는 고유 섹션(.tl360-sec)의 본문이 absolute/relative + left:var(--pc-text-indent) 로 이미 x420 에 놓인다. 공용 섹션 (추천상품/회사소개/360케어)만 본문이 정적 배치라 컨테이너 x410 에서 시작하므로, 컨테이너가 아니라 **본문 컬럼에만** 같은 들여쓰기를 준다 — 컨테이너에 주면 우측 그래프 컬럼까지 밀려 이미지 x 가 변한다(이미지는 이번 범위 밖). */ .reason-area:not(.tl360-sec) > .description { padding-left: var(--pc-text-indent); } /* 2026-08-07 광고주 QA(본문 시작 위치 통일): 첫 섹션의 본문은 absolute(top=--pc-body-top)라 섹션 padding-top 은 우측 그래프 컬럼만 움직인다. 시안에서 그래프는 본문보다 3px 아래에서 시작하므로(본문 77 / 그래프 80) 그 관계를 유지한 채 같은 값만큼 함께 내린다. */ .content > .reason-area#reason { padding-top: calc(var(--pc-body-top) + 3px) !important; } .reason-area .title > * { margin-top: 20px; font-family: 'NotoSansKR_Bold', sans-serif; } .reason-area .text { margin-top: 20px; font-family: 'NotoSansKR_Light', sans-serif; } .reason-area .image-section { margin-top: 10px; } /* ------------------------------------------------------------------------ 본문 이미지 배치 (2026-08-05 시안 재감사) ------------------------------------------------------------------------ 재감사 전 문제: · 이미지들이 PSD 를 확대(최대 1.2배)하거나, 좌측에 흰 여백을 덧대 폭을 1080/1148px 로 부풀린 상태였다. cont_2 는 원 다이어그램과 우측 카드 3종을 PIL 로 좌우 합성해 폭 1148px(컨테이너 1100 초과) 이 되면서 좌측 본문 텍스트와 겹쳤고, cont_2_3 은 크롭이 섹션 구분선(PSD y2575)까지 삼켜 시안에 없는 밑줄이 이미지에 찍혀 있었다. 해결: · 전 이미지를 풀해상도 컴포지트에서 **배경색 기준 타이트 크롭 + 1:1 배율**로 재추출(tools/t360_extract.py, analysis/t360_extract.json)하고, PSD x좌표(1920 캔버스 == 브라우저 x)에 맞춰 margin 으로 밀어 넣는다. · flex 분배가 이미지 폭에 따라 흔들리지 않도록 두 컬럼을 min-width:0 으로 고정한다 → 본문 in-flow 섹션은 550/550(그래프 좌측 = x960), 본문 absolute 섹션은 그래프가 1100(좌측 = x410). ------------------------------------------------------------------------ */ .tl360-sec.flex > .description, .tl360-sec.flex > .graph { min-width: 0; /* 이 페이지 고유 섹션에만 — 공용 컴포넌트(회사소개/360케어)의 '이미지가 넓으면 본문 컬럼이 줄어드는' 기존 분배는 그대로 둔다 */ } .tl360-sec .graph img { display: block; } /* PSD 실측 bbox → margin-left = x1 - 그래프 좌측, margin-top = 타이틀 잉크 기준 시안 간격 보정 (측정: tools/t360_vscan.py — 시안·렌더의 '타이틀 잉크 top → 이미지 잉크 top' 차이) 2026-08-12 새 시안(260810) 재실측으로 x 갱신 (템플릿 매칭 오차 0.0~3.4 = 동일 그래픽): g0 1039→1039 / g1 1071→1077 / g2 955→955 / g3 993→999 / g4 1010→1016 / g5 909→945 */ /* 2026-08-13 사용자 지시: 첫 섹션 킥커 "선택 특약 총 97종!" 은 굵기 600. 타이틀 블록(.title.font26.font-bold)이 700 이라 이 줄만 되돌린다. 색(#003652)은 2026-08-12 광고주 QA(slide4) 반영분 그대로. */ .reason-area .title .tl360-kicker { font-weight: 600; } .tl360-g0 { margin-left: 629px; margin-top: 2px; } /* 카드 3종 1039 452x636 */ .tl360-g1 { margin-left: 667px; margin-top: 50px; } /* 레이더 차트 1077 371x305 */ .tl360-g2 { margin-left: 545px; margin-top: 9px; } /* 인물 일러스트 955 556x368 */ .tl360-g3 { margin-left: 39px; margin-top: 3px; } /* 진료비 차트 999 448x269 */ .tl360-g4 { margin-left: 56px; margin-top: 1px; } /* 사망원인 차트 1016 447x348 */ .tl360-g5 { margin-left: -15px; margin-top: 22px; } /* 간편가입 그래픽 945 585x375 */ /* 공용 섹션(회사소개/360케어) — 새 시안 4종 공통 회사소개 x964 / 360케어 x960. 두 컬럼은 flex 로 나뉘고 이미지는 그래프 컬럼 좌단에 붙으므로, 컬럼 좌단에서 시안 x 까지의 차이를 이미지 margin-left 로 준다(음수 margin-right 방식은 컬럼 분배에 간섭해 절반만 반영됐다 — 2026-08-12 실측으로 교체). */ /* 공용 섹션(회사소개/360케어) — 새 시안 4종 공통 회사소개 x964 / 360케어 x960. 이 두 섹션의 `.graph` 는 이미지 폭 그대로인 콘텐츠 박스가 컨테이너 우단(x1510)에 붙는 구조라(회사소개 x900+610 / 360케어 x942+568), 마진으로 밀면 컬럼 폭이 함께 변해 이동량이 상쇄된다. → 레이아웃에 간섭하지 않는 relative 오프셋으로 옮긴다. (시안도 회사소개 우단이 x1574 로 그리드를 넘긴다 — 넘치는 쪽은 시안 설계 그대로) */ .reason-area:not(.tl360-sec) .graph img[src*="company_v2"] { position: relative; left: 64px; /* 900 → x964 */ } #healthcare.reason-area .graph img { position: relative; left: 18px; /* 942 → x960 */ } /* sec0 좌측 원 다이어그램 — 시안에서는 우측 카드가 아니라 본문 아래·주석 위에 놓인다 (PSD 427,1132 587x160). 시안 잉크 기준: 본문 끝줄 1056 → 다이어그램 1133 → 주석 1328. */ .reason-area .description .tl360-dia { display: block; /* 2026-08-12: 새 시안은 이 다이어그램만 본문선보다 2px 왼쪽(x408)에서 시작한다 */ margin: 56px 0 0 -2px; } .reason-area .description .tl360-note-dia { margin-top: 34px; } /* 좌측 주석 블록 — 시안 잉크 기준 간격 (본문 마지막 줄 → 주석 첫 줄) */ .tl360-sec .description .tl360-note-s1 { margin-top: 31px; /* PSD 1864 → 1920 */ } .tl360-sec .description .tl360-note-s2 { margin-top: 35px; /* PSD 2407 → 2463 */ } /* (제거) .tl360-note-g3 — 2026-08-13 광고주 QA(260813 slide6)로 이 주석을 cont_3_v2026.png 안에 구워 넣었다. 라이브 텍스트였을 때만 필요하던 규칙. */ .reason-area .graph .tl360-note-g5 { margin: 11px 0 0 252px; /* PSD 1216,4141 — 그래픽 하단에서 14px(잉크 기준) */ white-space: nowrap; } /* ------------------------------------------------------------------------ §9 행간 — PSD leading 을 CSS px 절대값으로 고정 (배수 금지) ------------------------------------------------------------------------ PSD 실측(레이어 스케일 0.6455 환산 후): · 타이틀 Pretendard-ExtraBold 26px / leading 32 (원시값 40.28 / 49.58, `Cont/추가` 의 미스케일 레이어가 26.0 / 32.0 으로 같은 값을 확인해 줌) · 본문 Pretendard-Light 18px / leading 24 구현 기본값은 1.3배(33.8 / 23.4)라 줄이 쌓일수록 시안과 최대 13px 까지 벌어졌다. `.tl360-sec` 는 이 페이지 고유 섹션에만 붙인 클래스다 — 공용 컴포넌트 (회사소개 / 360케어) 는 시안 leading 이 22 로 달라 건드리지 않는다. ------------------------------------------------------------------------ */ /* ↑ 위 실측 블록은 2026-08-07 광고주 QA(폰트 통일)로 **적용 중단**한다. 기준 USDannuity 는 행간 오버라이드가 없는 기본 1.3배(26px→33.8 / 18px→23.4)다. PSD 실측값(32 / 24)은 위 주석에 남겨 둔다 — 시안 기준으로 되돌릴 때 복원용. */ /* 타이틀 → 본문 간격: 시안은 마지막 타이틀 줄 top 에서 48~49px (= leading 32 + 16). 구현 기본값 20px 은 매번 3~4px 씩 아래로 밀린다. */ .tl360-sec .description .text { margin-top: 16px; } /* 한 섹션 안에서 두 번째 타이틀 블록(65세 이후에는 보장금액이 2배) 앞 간격. 시안 PSD: 본문 마지막 줄 2252 → 타이틀 2309 = 57 (= leading 24 + 33) */ .tl360-sec .description .tl360-title-gap { margin-top: 33px; } /* 간편가입 섹션 — 시안은 두 ※ 블록을 문단으로 떼어 놓는다 (PSD 잉크 top: 본문 끝 4073 → ※1 4120 → ※2 4208). styleguide §4 의 '연속 주석 2px' 는 한 블록 안 항목 규칙이므로, 문단이 다른 이 쌍에는 PSD 실측을 우선한다(§0-4). */ .tl360-easy-bg .description .font26 { margin-top: 14px; /* PSD 3714(상품명) → 3754(타이틀) = 40 */ } .tl360-easy-bg .description .text { margin-top: 30px; /* PSD 3818(타이틀 끝줄) → 3880(본문) = 62 */ } .tl360-easy-bg .description > .tl360-hang { margin-top: 29px; /* PSD 4073((일부 특약 제외)) → 4120(※1) = 47 */ } .tl360-easy-bg .description > .tl360-hang + .tl360-hang { margin-top: 16px; /* PSD 4174(※1 끝줄) → 4208(※2) = 34 */ } /* (일부 특약 제외) 는 * / ※ 주석이 아니므로 행잉 인덴트를 걸지 않는다 (시안은 본문 좌측선 정렬) */ .tl360-easy-sub { line-height: 18px; } .highlight { font-weight: bold; color: var(--tl360-navy); background: linear-gradient(var(--tl360-mint), var(--tl360-mint)) no-repeat; /* PSD '사각형 1277'(3138~3167)·'복사 3'(3170~3200): 바 높이 29~30px, 줄 사이 3px 분리. 인라인 박스(31px) 꽉 채움이면 적층 시 1px 만 남음 → 바 높이 축소로 재현. -2px(간격 3px)로는 여전히 좁아 보인다는 QA 지적으로 -3px(바 28px, 간격 4px) 확정 */ background-size: 100% calc(100% - 3px); background-position: 0 80%; } .tl360-easy-bg { background-color: var(--tl360-hero-bg); } /* 2026-08-07 사용자 지적: 간편가입 섹션의 본문만 좌측 그리드를 무시하고 x410 에서 시작했다 ("(무)간편가입 360종합보장보험(무해약환급금형)" 줄이 왼쪽으로 튀어나와 보임). 이 섹션의 .description 은 다른 tl360-sec 과 달리 정적 배치라 인라인 left 가 없었다. → 같은 방식(relative + left)으로 본문선 x420 에 맞춘다. relative 라 흐름 상 위치는 그대로여서 우측 그래프 컬럼·이미지 x 는 움직이지 않는다. */ .tl360-easy-bg .reason-area > .description { position: relative; left: var(--pc-text-indent); } /* 2026-08-07 광고주 QA(PDF p10 "Bold 적용 누락"): 전역 reset(resetMetlife.css)이 span 에도 font-weight:500 을 다시 걸어, 강조 스팬이 부모 타이틀(700)보다 오히려 얇게 나왔다 ("간편가입" 26px w500 vs 부모 w700). 본문(부모 500)의 "간편심사보험"·"비갱신형" 도 시안에서는 굵은 강조다 → 이 클래스에 굵기를 직접 지정한다. */ .tl360-teal { color: var(--tl360-teal); font-weight: bold; } /* ------------------------------------------------------------------------ 2026 표준 소급 (styleguide-2026) ------------------------------------------------------------------------ */ /* §9 잉크 색 — PSD 텍스트 레이어 실측: 본문/타이틀 #2d2d2d(Pretendard-Light 18 / ExtraBold), * 주석 #75787b. 구현은 구버전 유틸리티(.color-777777 / .color-090909)를 그대로 쓰고 있어 글자 크기·여백 정의는 살리고 color 만 이 페이지 안에서 덮어쓴다. */ /* ↑ 2026-08-07 광고주 QA(폰트 통일): 타이틀/바디 잉크 오버라이드(#2d2d2d)를 걷어내 마크업의 유틸리티(.color-090909 타이틀 / .color-777777 바디)가 그대로 살아나게 한다 = USDannuity 기준. 주석(14px #75787b)은 이제 styleCommon_v2026.css §A 가 단일 소스로 정의하므로 여기서 중복 선언하지 않는다(값은 --tl360-note 와 동일). */ /* §4 행잉 인덴트 (PC 표준 1.05em / -0.75em). 기존 인라인 text-indent:-8px/padding-left:8px 및 수동 들여쓰기를 대체한다 — 폰트·문구가 바뀌어도 둘째 줄이 첫 줄 본문 시작점과 정렬된다. */ .tl360-hang { padding-left: 1.05em; text-indent: -0.75em; } .tl360-hang + .tl360-hang { margin-top: 2px; } /* §3 유의사항 — 경고색은 .color-ec657b 유틸리티(공용 CSS에 순수 추가된 클래스)로 통일하고 li 행간은 USDannuity 와 같은 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; } /* ------------------------------------------------------------------------ 자간 (letter-spacing) — PSD tracking 실측 교정 (2026-08-05) ------------------------------------------------------------------------ 전역 reset 이 div·span·li 마다 `letter-spacing: -1px` 를 다시 걸어 폰트 크기와 무관하게 자간이 고정돼 있었다 → 시안 대비 줄 폭 -1.7~-10.3%. PSD type 레이어 StyleRun Tracking 실측 (analysis/t360_pc_layers.json): · /Cont 기본 -20 → -0.02em · 본문 18px (전 섹션) -40 → -0.04em · 간편가입 코랄 주석 14px -55 → -0.055em reset 이 자식마다 다시 선언하므로 `* ` 까지 함께 지정한다. 검증: 시안 대비 최장 줄 폭 -1.0~-10.3% → -2.0~+1.6% (22블록 대조, 01 섹션 본문 +4.7% 은 자간이 아니라 그 블록의 시안 폰트 크기 차이). ------------------------------------------------------------------------ */ /* ↑ 위 자간 블록도 2026-08-07 광고주 QA(폰트 통일)로 **적용 중단**한다. 기준 USDannuity 는 전역 reset 의 -1px 를 그대로 쓴다 → 여기서 걸던 -0.02em / -0.04em / -0.055em 를 제거하면 reset 값이 살아나 기준과 일치한다. 본문 중 주석(14px)만 -0.02em 이며 styleCommon_v2026.css §A 가 단일 소스다. */ /* 유의사항 랩 폭 — PSD 텍스트 박스 엔진 bounds 실측 1065.08px. 줄바꿈 위치 시안 정합 */ .description-area .description-text li { max-width: 1065.08px; } /* 유의사항 자간 — PSD 엔진 Tracking 실측 (60/1000em) */ .description-area .description-text li { letter-spacing: -0.06em; } /* 시안(포토샵 한글 조판) 어절 단위 줄바꿈 재현 */ .description-area .description-text li { word-break: keep-all; } /* 2026-08-07 광고주 QA(PDF p11): 뒤 목록을 여는 안내 문구("암 관련 특약의 …")는 그 목록의 첫
  • 로 넣었다 — ※ 를 마커 열에 걸고 본문은 본문열에 두는 기존 규칙 (styleCommon_v2026.css 의 li.desc-mark:before, QA 2026-08-06 확정)을 그대로 재사용하므로 이 파일에는 추가 규칙이 필요 없다. */ /* 준법감시인확인필(연속 두 번째 .description-area) 상단 여백 — 시안 실측 보정 -16px 위로 */ .description-area + .description-area { margin-top: -16px; }