/* ========================================================================
달러종신보험 (/USDWholeLife) - 2026 디자인 리뉴얼
PSD 스포이드 값 기반 CSS 변수 (MetLife_달러종신_PC_260727.psd)
======================================================================== */
/* PSD 스포이드(픽셀/텍스트레이어 FillColor) 실측값만 사용 — 임의 팔레트 금지.
측정 출처: MetLife_달러종신_PC_260727.psd 컴포지트 및 type 레이어 StyleRun. */
:root {
--dollar-navy: #003652; /* 강조 텍스트 / 네이비 배너 배경 */
--dollar-mint: #8ff5b1; /* 탭 언더라인 / 형광펜 */
--dollar-mint-bg: #e8fff0; /* 간편가입 섹션 배경 */
--dollar-cream-bg: #f5f2ed; /* 히어로 배경 */
--dollar-teal: #42bdb9; /* 히어로 타이틀 "달러 vs 원화," */
--dollar-ink: #2d2d2d; /* 본문/타이틀 기본 잉크 */
--dollar-note: #75787b; /* ※/* 주석 */
--dollar-tab-active: #000000; /* 활성 탭 텍스트 */
--dollar-tab-idle: #191919; /* 비활성 탭 텍스트 */
--dollar-purple: #723a7a; /* 간편가입/간편심사보험 강조 */
--dollar-float-accent: #2d8683;/* 하단 플로팅 "30초면 OK!" */
--dollar-float-ink: #191919; /* 하단 플로팅 본문 */
}
.content * {
font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif !important;
}
/* 라운드2 피드백4: main_bg_v2026.png 상단에 투명(빈) 픽셀 한 줄이 있어 크림 배경 위에
흰 선처럼 보였음 → PSD main/BG 그룹을 캔버스(0~1920) 기준으로 재크롭하고 완전
불투명한 영역(1920x578)만 남겨 재저장. cover로 늘리면 다시 미세한 어긋남이 생기므로
원본 픽셀 크기 그대로 상단 중앙 정렬하고, 남는 아래 여백은 동일한 크림 배경색이 채움. */
.banner-area {
background-image: url(/assets/image/CF/Dollar/main_bg_v2026.png?v=2);
background-repeat: no-repeat;
background-position: top center;
background-size: 1920px 578px;
background-color: var(--dollar-cream-bg);
/* 라운드5 지시1: PC .banner-area 규격 표준(전 페이지 공통) — 총 높이 578px.
2026-08-12 개정: 새 시안(260810) 실측으로 콘텐츠가 448 → 451 이 되면서
여백을 65/65 → 64/63 으로 조정했다. 총 높이 578 과 .tab-area top 659 는 불변.
상단 64 는 시안 실측 그대로다(시안 GNB 하단 80 → 히어로 상단 144).
콘텐츠(main-description = quick-request-new = 451px) + 64 + 63 = 578. */
padding-top: 64px;
padding-bottom: 63px;
}
/* ------------------------------------------------------------------------
히어로 좌측 통이미지 (2026-08-04 사용자 확정)
------------------------------------------------------------------------
상품태그 + 메인 타이틀 + TOP3 뱃지를 개별 이미지로 나눠 마크업으로 재조립하면
(main-text 239px + margin-top 26px + 뱃지 183px) 시안과 미묘한 조판 차이가 남는다.
→ PSD `main/main` 그룹에서 우측 상담폼(DB3)만 숨기고 좌측 콘텐츠 전체를 한 장으로
합성해(알파 타이트 크롭) 그대로 배치한다.
PSD 실측(260810 시안, 1920 캔버스, 캔버스 y == 브라우저 y):
· 통이미지 알파 bbox = x400~944 / y144~595 → 545 x 451
· 통이미지 좌측선 400 == 탭 활성 언더라인 좌측선 400 → 1100 그리드 좌측선과 일치
· 통이미지 박스(y144~595) == 우측 상담폼 박스(y144~595) — 둘 다 451px
2026-08-12 광고주 QA 반영 — margin-left:-2px / margin-top:-3px 제거:
구 시안(260803)은 통이미지가 x408 에서 시작해 그리드보다 2px 왼쪽이었고,
상담폼이 448px 뿐이라 하단(594)을 맞추려면 상단을 3px 올려야 했다.
새 시안은 통이미지 x400(=탭 좌측선) / 상담폼 451px 이라 두 보정값의 근거가
모두 사라졌다. 상담폼 쪽 451 복원은 QuickInput_Certificate_View_v2.php 참조.
→ 이제 통이미지와 폼이 상단·하단 모두 같은 선에 놓인다(광고주 지적 2건 해소).
대체 이력 — 아래 규칙은 이 통이미지 전환으로 불필요해져 제거했다:
.banner-section .main-text { margin: 0 }
.banner-section .main-object { margin-top: 26px; display:flex; gap: 8px }
(뱃지 간격 8px 표준 styleguide-2026 §1-1 은 통이미지 안에 PSD 실측 그대로 포함됨)
------------------------------------------------------------------------ */
.banner-section .main-description .hero-merge {
display: block;
width: 545px;
height: 451px;
}
@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 {
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(--dollar-mint);
}
/* 라운드2 피드백1: 탭 색상 PSD 재검수.
/tab/'왜 필요할까요?' = Pretendard-Bold 20px FillColor #000000 (블랙)
/tab/'상품 특장점','부가혜택' = Pretendard-Medium 20px FillColor #191919
활성 배경 #ffffff, 탭바 배경 #f4f4f4, 언더라인 #8ff5b1 (컴포지트 스포이드로 재확인) */
.tab-area .tab > div {
color: var(--dollar-tab-idle);
}
.tab-area .tab .active {
color: var(--dollar-tab-active);
background-color: white;
border-top: 3px solid var(--dollar-mint);
}
/* 스크롤스파이가 active를 잠시 떼는 구간에도 구버전 유틸 클래스(.color-0090DA)의
파란색이 드러나지 않도록 이 페이지 안에서는 항상 블랙으로 고정 (MO와 동일 규칙). */
.tab-area .tab-link.color-0090DA {
color: var(--dollar-tab-active) !important;
}
/* ------------------------------------------------------------------------
본문 좌우 컬럼 그리드 (2026-08-05 재설계)
------------------------------------------------------------------------
재설계 전 문제:
· `.reason-area{width:1100px; padding-left:20px}` 가 content-box 라 총 폭이
1120 이 되어 컨테이너가 x400 에서 시작 → 좌측 본문 잉크 x420 (시안 x427).
· `.description`/`.graph` 가 둘 다 `flex:1 1 auto` 라 컬럼 경계가 **이미지의
실제 폭에 따라 달라져** 섹션마다 다른 방향으로 어긋났다
(그래프 좌단 시안 대비 sec0 +24 / sec1 +17 / sec2 +33 / sec3 -14 / sec4 +13 / sec5 -21).
재설계 방식 — Total360 재감사에서 쓴 "이미지 1:1 + x좌표 고정"을 그대로 적용:
· 컨테이너를 border-box 1100px 로 바꿔 x410~1510 에 고정하고 padding-left 17px
→ 좌측 본문 잉크 x427 (PSD type 레이어 bbox 426~428, 컴포지트 잉크 실측 427).
· 좌측 컬럼을 `flex:0 0 510px` 로 못박아 그래프 컬럼 좌단을 x937 로 고정하고,
각 이미지는 PSD 실측 x 와의 차이만큼 margin-left 로 민다(전 섹션 0px 일치).
PSD 실측 (analysis/dollar_pc_layers.json + 컴포지트 픽셀 대조 meandiff 0.00):
cont_1 x946 y847 550x398 /Cont/01/그래프01_1
cont_2 x953 y1296 550x213 /Cont/01/그래프01_2
cont_3 x937 y1892 544x352 /Cont/1종기본형/0622_신규그래프1
cont_3_1 x950 y2303 584x269 /Cont/1종기본형/0622_신규그래프2
cont_4 x957 y2813 534x244 /Cont/Group 1/그래프
cont_7 x953 y3326 588x364 /Cont/추가/Group 1
(공용) company_v2 x955 y3889 / cont_6 x951 y4468 — 컴포지트 템플릿 매칭 실측
좌측 본문은 전부 하드코딩
이라 컬럼 폭 550→510 축소로 줄바꿈이 바뀌지 않는다
(최장 줄 433px). 세로 좌표·섹션 높이·문서 높이는 재설계 전후 완전 동일.
------------------------------------------------------------------------ */
/* 2026-08-07 광고주 QA: 좌측 텍스트 그리드를 USDannuity 기준(x420)으로 통일.
기준값은 Desktop/styleCommon_v2026.css 의 --pc-text-indent 한 곳에서 관리한다.
이미지는 이번 범위 밖(PSD x 고정 유지) → 텍스트 컬럼 폭을 줄어든 패딩만큼 늘려
그래프 컬럼 좌단 x937 을 그대로 보존한다(510 + 7 = 517). */
.reason-area {
width: 1100px;
margin: 0 auto;
box-sizing: border-box;
padding-left: var(--pc-text-indent) !important;
}
.reason-area.dollar-sec.flex > .description {
flex: 0 0 calc(510px + (17px - var(--pc-text-indent)));
min-width: 0;
}
.reason-area.dollar-sec.flex > .graph {
flex: 1 1 0;
min-width: 0;
}
/* 시안의 그래프는 1100 그리드(~x1510)를 살짝 넘겨 흘러나오게 설계돼 있다
(cont_3_1 → x1534, cont_7 → x1541). max-width:100% 를 두면 컬럼 폭 573px 로
강제 축소되며 리샘플 흐림이 생기므로 원본 픽셀 그대로 둔다(캔버스 1920 안). */
.reason-area.dollar-sec .graph img {
display: block;
max-width: none;
}
/* 그래프 컬럼 좌단 x937 기준 오프셋 = 시안 x - 937.
2026-08-12 새 시안(260810) 재실측 — 구현 렌더를 시안에서 템플릿 매칭해 산출
(매칭 오차 0.0~4.5 = 동일 그래픽, 위치만 이동). 종전값 → 새 값:
cont_1 946→946 / cont_2 953→953 / cont_3 937→949 / cont_3_1 950→962
cont_4 957→969 / cont_7 953→961 */
.reason-area.dollar-sec .graph img[src*="cont_1_v2026"] { margin-left: 9px; } /* → x946 */
.reason-area.dollar-sec .graph img[src*="cont_2_v2026"] { margin-left: 16px; } /* → x953 */
.reason-area.dollar-sec .graph img[src*="cont_3_v2026"] { margin-left: 12px; } /* → x949 */
.reason-area.dollar-sec .graph img[src*="cont_3_1_v2026"] { margin-left: 25px; } /* → x962 */
.reason-area.dollar-sec .graph img[src*="cont_4_v2026"] { margin-left: 32px; } /* → x969 */
.reason-area.dollar-sec .graph img[src*="cont_7_v2026"] { margin-left: 24px; } /* → x961 */
/* 04 섹션 그래프 컬럼의 텍스트는 이미지와 x 가 다르다
(PSD 헤딩 '생활자금 선지급 신청시' x953, 하단 ※ 주석 x966). */
.reason-area.dollar-sec .graph > .dollar-graph-heading { margin-left: 16px; } /* → x953 */
.reason-area.dollar-sec .graph > .dollar-note { margin-left: 29px; } /* → x966 */
/* 공용 섹션(회사소개/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(.dollar-sec) .graph img[src*="company_v2"] {
position: relative;
left: 64px; /* 900 → x964 */
}
#healthcare.reason-area .graph img {
position: relative;
left: 18px; /* 942 → x960 */
}
.reason-area .text {
margin-top: 20px;
}
.reason-area .image-section {
margin-top: 10px;
}
.highlight {
font-weight: bold;
color: var(--dollar-navy);
background: linear-gradient(var(--dollar-mint), var(--dollar-mint)) no-repeat;
/* PSD '사각형 1277' 계열 바 높이 29~30px. 2줄 적층 시 바 사이 분리(시안 2~3px)가
보여야 함 — line-height 가 아니라 바 높이로 해결. -2px(간격 3px)로는 여전히
좁아 보인다는 QA 지적으로 -3px(바 28px, 간격 4px) 확정 */
background-size: 100% calc(100% - 3px);
background-position: 0 80%;
}
/* 라운드2 피드백3: 네이비 배너가 창 폭에 따라 축소되어(width:100%) 시안 대비 크기가 달라짐.
PSD 'Cont/추가배너_원화백만종'은 캔버스 폭 1920 x 높이 202의 고정 크기 → 반응형 축소를
제거하고 원본 픽셀 크기로 중앙 고정. 창이 1920보다 좁을 때는 좌우가 균등하게 잘리며,
잘리는 영역은 배너와 동일한 네이비 배경이라 이음새가 보이지 않는다. */
.dollar-banner-navy {
background-color: var(--dollar-navy);
overflow: hidden;
text-align: center;
font-size: 0;
}
.dollar-banner-navy img {
display: block;
width: 1920px;
height: 202px;
max-width: none;
position: relative;
left: 50%;
margin-left: -960px;
}
.dollar-section-mint {
background-color: var(--dollar-mint-bg);
}
/* ------------------------------------------------------------------------
사용자 피드백 라운드 1 (PC)
------------------------------------------------------------------------ */
/* 피드백1: "왜 필요할까요" 첫째/둘째 섹션 사이 간격이 시안 대비 과도하게 넓음.
원인: 공유 styleCF.css의 .reason-area{padding:80px 0 !important}가 두 행 모두에
적용되어 80(첫 행 bottom)+80(둘째 행 top)=160px 간격이 생김(시안은 ~80px 전후).
#reason은 ID라 공유 클래스보다 특이도가 높아 !important끼리도 이 규칙이 이김. */
#reason.reason-area {
padding-bottom: 0 !important;
}
/* 둘째 행(달러/원화 비교) 상단 패딩을 시안 비율에 맞게 축소 */
.dollar-tight-top {
padding-top: 65px !important;
}
/* 피드백2: 둘째 섹션 좌측 텍스트와 우측 그래프의 정렬 시작점이 어긋남.
원인: .reason-area .text{margin-top:20px}는 상단에 별도 .title이 있는 첫째 섹션을
전제로 한 규칙인데, 둘째 섹션은 .text가 .description의 첫 번째(유일한) 자식이라
불필요하게 20px 아래로 밀림. 그래프(.graph > img)는 이 마진의 영향을 받지 않아
두 컬럼의 상단 기준선이 어긋나 보임. */
.reason-area .description > .text:first-child {
margin-top: 0;
}
/* 피드백4: 배경색이 있는 섹션(.dollar-section-mint)에서 공유 .reason-area의
border-bottom 구분선이 그대로 노출되어 배경색 안쪽에 불필요한 선이 보임. */
.dollar-section-mint .reason-area {
border-bottom: none;
}
/* 피드백5: 퍼플 강조 텍스트("간편가입", "간편심사보험")에 볼드가 빠짐.
라운드2 색상 재검수: PSD의 실제 FillColor는 #723a7a(Pretendard-ExtraBold)로,
라운드1에서 쓰던 #572a86은 구버전 인라인 스타일 값이었음 → PSD 값으로 교정. */
.dollar-purple-bold {
color: var(--dollar-purple);
font-weight: bold;
}
/* ------------------------------------------------------------------------
사용자 피드백 라운드 2 (PC)
------------------------------------------------------------------------ */
/* 라운드2 색상 전수 재검수 (PSD type 레이어 FillColor 실측):
- 섹션 타이틀/상품명 소제목 : #2d2d2d (Pretendard-ExtraBold / SemiBold)
- 본문 : #2d2d2d (Pretendard-Light 18px)
- 본문 강조 : #003652 (Pretendard-Bold) ← 기존 유지
- ※/* 주석 : #75787b (Pretendard-Light 14px)
- 간편가입 ※ 주석 : #db0a5b (컴포지트 스포이드) ← 기존 유지
기존 구현은 본문/주석 모두 #777777, 타이틀은 #090909였음 → 전부 교정. */
/* 주의: 기존 유틸리티 클래스(.color-090909 / .color-777777)는 글자 크기·여백까지 함께
정의하므로 제거하지 않고 그대로 두고, 아래 규칙은 color만 덮어쓴다. */
/* 2026-08-07 광고주 QA(폰트 통일): 타이틀/바디 잉크를 USDannuity 기준으로 되돌린다.
.dollar-ink(#2d2d2d) / .dollar-body(#2d2d2d) 규칙을 걷어내면 마크업에 이미 붙어 있는
유틸리티(.color-090909 타이틀 / .color-777777 바디)가 그대로 살아나 기준과 일치한다.
주석(.dollar-note #75787b)은 Total360 기준과 같은 값이라 유지. */
.reason-area .dollar-note {
color: var(--dollar-note);
}
/* 라운드2 피드백6/8: ※ · * 로 시작하는 주석의 둘째 줄 이후가 뱃지(※/*) 아래로
파고들어 첫 줄 본문과 어긋남 → 행잉 인덴트(padding-left + 음수 text-indent).
기존 스페이서 방식은 폰트/문구가 바뀌면 어긋나므로 제거. */
.dollar-hang {
padding-left: 1.05em;
text-indent: -0.75em;
}
.dollar-hang + .dollar-hang {
margin-top: 2px;
}
/* 라운드2 피드백7: "생활자금 선지급 신청시" 타이틀이 시안에는 그래프 이미지 밖(위)에
별도 텍스트로 존재하는데 구현에서 누락됨.
PSD /Cont/Group 1/생활자금 선지급 신청시 : Pretendard-Bold 19px, #003652,
bbox y 2770~2788, 그래프 상단 y 2813 → 아래 여백 25px. */
.dollar-graph-heading {
font-size: 19px;
font-weight: bold;
color: var(--dollar-navy);
margin-bottom: 25px;
}
/* 라운드2 피드백2 / 라운드6: 하단 플로팅 바.
PSD 실측 결과 달러종신·360종합 두 시안의 '하단ALL/플로팅DB' 그룹이 완전히 동일해
바 전체 규격(높이·여백·문구·입력폼·라디오·버튼)을 공용
assets/style/CF/Desktop/styleCommon_v2026.css 의 .bottom-input-area-v2026 스코프로 이관했다.
(--dollar-float-accent / --dollar-float-ink 변수는 참조용으로 남겨둠) */
/* description-area 유의사항 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;
}
/* ------------------------------------------------------------------------
2026-08-05 재감사: 행간 절대값 고정 (styleguide-2026 §9)
------------------------------------------------------------------------
이 페이지는 여태 브라우저 기본 배수(1.3)를 쓰고 있어 시안과 줄이 쌓일수록
어긋났다 — 타이틀 33.8(시안 32), 본문 23.4(시안 24), 주석 18.2(시안 18).
PSD type 레이어 StyleRun 실측:
섹션 타이틀 26px / leading 32
본문 18px / leading 24
※ · * 주석 14px / leading 18 (간편가입 코랄 주석 #db0a5b 도 동일)
공용 컴포넌트(회사소개·360케어)는 시안 leading 이 22 로 달라 건드리면 안 되므로
이 페이지 고유 섹션에만 붙인 .dollar-sec 스코프로 한정한다.
------------------------------------------------------------------------ */
/* ↑ 위 실측 블록은 2026-08-07 광고주 QA(폰트 통일)로 **적용 중단**한다.
기준이 된 USDannuity 는 행간 오버라이드가 없는 기본 1.3배(33.8 / 23.4 / 18.2)이므로,
여기서 걸던 32 / 24 / 27 / 18 을 모두 제거해야 기준과 일치한다.
PSD 실측값은 위 주석에 그대로 남겨 둔다 — 시안 기준으로 되돌릴 일이 생기면 복원용. */
/* PSD 는 한 섹션의 ※ 주석들이 한 텍스트 레이어의 연속 행(leading 18)이라
블록 사이에 추가 여백이 없다 — 공용 .dollar-hang + .dollar-hang 의 2px 을 되돌린다. */
.reason-area.dollar-sec .dollar-hang + .dollar-hang {
margin-top: 0;
}
/* 블록 간 여백 — PSD 잉크 좌표 역산 (styleguide-2026 §9).
타이틀 마지막 줄 잉크 → 본문 첫 줄 잉크 = 60~61 (01/03/04 실측 61/61/60)
본문 마지막 줄 잉크 → ※ 주석 첫 줄 잉크 = 37~40 (03/04/05 실측 40/39/37)
공용 유틸 .marginTop20/.marginTop10 은 그대로 두고 이 페이지 섹션에서만 덮어쓴다. */
.reason-area.dollar-sec .text,
.reason-area.dollar-sec .dollar-body.marginTop20 {
margin-top: 26px;
}
.reason-area.dollar-sec .description > .text:first-child {
margin-top: 0;
}
.reason-area.dollar-sec .dollar-note.marginTop10 {
margin-top: 16px;
}
/* 형광펜 블록 높이 — PSD '사각형 1277' 계열은 26px 타이틀에 대해 높이 27px
(01 y879~906, 03 y2366~2393, 04 y2771~2798 전부 27). background-size:100% 100%
로 두면 26px 폰트의 인라인 박스(31px)를 꽉 채워 위아래로 2px 씩 더 커진다. */
.reason-area.dollar-sec .highlight {
background-size: 100% 27px;
background-position: 0 center;
}
/* ------------------------------------------------------------------------
자간 (letter-spacing) — PSD tracking 실측 교정 (2026-08-05)
------------------------------------------------------------------------
전역 reset(assets/style/Common/resetMetlife.css)이 div·span·li 등 거의 모든
요소마다 `letter-spacing: -1px` 를 다시 걸고 있어 폰트 크기와 무관하게 자간이
고정돼 있었다. 14px 주석에서는 -1px = -0.071em 으로 시안(-0.02em)보다 3배 이상
좁아 줄 폭이 시안 대비 최대 -10% 까지 짧아졌다(형광펜 블록 폭이 시안보다 좁게
나온 원인).
PSD type 레이어 StyleRun 의 Tracking 실측 (analysis/dollar_pc_layers.json):
· /Cont 전 구간 기본 tracking -20 → -0.02em
· /Cont/01 본문 18px (01·02 섹션) tracking -40 → -0.04em
· ※·* 주석 14px tracking -20 → -0.02em
· 유의사항(하단ALL/유의사항) -60, 탭 -70, 푸터·플로팅바 -70/-40 → 이번 범위 밖
(탭·푸터는 D1 동결, 플로팅바는 styleCommon_v2026 이 자체 규칙 보유)
reset 이 자식 요소마다 다시 선언하므로 `.reason-area *` 처럼 자식까지 함께
지정해야 한다(요소 선택자보다 특이도가 높아야 이김).
검증: 시안 대비 렌더 최장 줄 폭 -2.6~-10.3% → -2.1~+1.8% (19블록 대조).
------------------------------------------------------------------------ */
/* ↑ 위 자간 블록도 2026-08-07 광고주 QA(폰트 통일)로 **적용 중단**한다.
기준 USDannuity 는 전역 reset 의 -1px 를 그대로 쓴다 → 여기서 걸던 -0.02em/-0.04em 를
제거하면 reset 값이 살아나 기준과 일치한다.
본문 중 주석(14px)만 Total360 기준 -0.02em 이며, 그 규칙은
Desktop/styleCommon_v2026.css §A 에 단일 소스로 있다. */
/* 유의사항 랩 폭 — PSD 텍스트 박스 엔진 bounds 실측 1028.7px. 줄바꿈 위치 시안 정합 */
.description-area .description-text li {
max-width: 1028.7px;
}
/* 유의사항 자간 — PSD 엔진 Tracking 실측 (60/1000em) */
.description-area .description-text li {
letter-spacing: -0.06em;
}
/* 시안(포토샵 한글 조판) 어절 단위 줄바꿈 재현 */
.description-area .description-text li {
word-break: keep-all;
}
/* 준법감시인확인필(연속 두 번째 .description-area) 상단 여백 — 시안 실측 보정 +7px 아래로.
2026-08-07 광고주 QA(PDF p7 "그레이 배경끊김"): 이 여백을 margin 으로 주면 두 블록 사이
7px 가 흰색으로 뚫린다(.description-area 는 자기 배경 #F2F2F2 를 가진 블록이라 마진 구간에는
배경이 칠해지지 않는다). → 같은 값을 padding-top 으로 옮겨 문구 위치는 그대로 두고
배경만 이어지게 한다. */
.description-area + .description-area {
margin-top: 0;
padding-top: 7px;
}