@charset "utf-8";
/* ============================================================================
   landing_program — 시술 랜딩 공통 스타일
   스코프: 모든 규칙은 .landing_program 하위로만 작성한다 (전역/기존 CSS 미오염).

   설계 기준
     - 디자인 원본: Figma 390px 모바일 프레임 (Medical-O CRO · vpro 만 400)
     - 노출: 설계폭(390/400)을 뷰포트폭에 비례 스케일해 320~440 전 구간 지원
       (2026-07-18 확정 — --lp-u 비례단위. 2026-07-16 의 "440 중앙배치·zoom 없음"
        을 갱신: 실기기 360~440 정합이 깨져 비례 스케일로 전환. 상한 440).
     - 폰트: Noto Sans KR (개발전 가이드 6589:460) + Neue Haas Unica Pro
       ※ Figma 프레임 본문은 레거시 Sandoll Gothic Neo 로 조판돼 있어 글자
         너비가 다르다. 줄바꿈은 자연 흐름에 맡기지 말고 Figma 의 명시적
         개행 위치에 <br> 로 고정할 것.
     - 타이포/간격/컬러는 가이드 명목값이 아니라 프레임 실측값을 따른다
       (자간이 -1% ~ -3% 로 요소마다 다름. 가이드의 "공통 -2%" 는 사실과 다름)
   ========================================================================= */

/* ---------- fonts ----------
   ⚠ 패밀리명·경로를 사이트(renew/fonts.css, 전역 font.css)와 "같게" 맞춘다.
      - 패밀리명 동일 + URL 동일 → 조립 시 중복 다운로드 없음(같은 리소스).
      - 상대경로 ../fonts/ 는 두 위치 모두에서 옳게 풀린다:
          팩:   landing_program/assets/css/  → landing_program/assets/fonts/
          운영: web/assets/css/              → /assets/fonts/
        (그래서 2단계에서 이 파일은 web/assets/css/landing_program.css 로 간다.
         하위 폴더에 넣으면 ../fonts/ 가 깨지니 주의.)
      - renew/전역은 Noto 300/400/500/700 만 정의한다. 이 랜딩은 실측상 600
        (SDGothicNeoa-fSm = "하나./둘./셋.")이 필요해 600 을 여기서 보탠다. */
@font-face {
    font-family: "Noto Sans KR";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NotoSansKR-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "Noto Sans KR";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NotoSansKR-Medium.woff2") format("woff2");
}

@font-face {
    font-family: "Noto Sans KR";
    font-weight: 600;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NotoSansKR-SemiBold.woff2") format("woff2");
}

@font-face {
    font-family: "NeueHaasUnicaPro";
    font-weight: 300;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NeueHaasUnicaPro-Light.woff2") format("woff2");
}

@font-face {
    font-family: "NeueHaasUnicaPro";
    font-weight: 400;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NeueHaasUnicaPro-Regular.woff2") format("woff2");
}

@font-face {
    font-family: "NeueHaasUnicaPro";
    font-weight: 500;
    font-style: normal;
    font-display: swap;
    src: url("../fonts/NeueHaasUnicaPro-Medium.woff2") format("woff2");
}

/* ---------- tokens ---------- */
.landing_program {
    /* 컬러 — 가이드 4종 + 프레임 실측 추가분 */
    --lp-ink: #323232;
    /* 워딩 컬러 */
    --lp-point: #ff0000;
    /* 포인트 컬러 */
    --lp-line: #dedede;
    /* 비활성버튼 / 서브워딩 / 라인 */
    --lp-line-2: #cccccc;
    /* 비활성버튼 / 서브워딩 / 라인 (진한쪽) */
    --lp-btn-bg: #f5f5f5;
    /* 버튼 / 카테고리 배경 */
    --lp-sub: #777777;
    /* 실측: 본문 서브 카피 */
    --lp-sub-2: #818181;
    /* 실측: 캡션 */
    --lp-ink-2: #3c3c3c;
    /* 실측: 캡션 강조 */
    --lp-foot: #7c7c7c;
    /* 실측: 각주 */
    --lp-card-bg: #f9f9f9;
    /* 실측: 카드 배경 (가이드의 #f5f5f5 가 아님) */

    /* 레이아웃 */
    --lp-design-w: 390px;
    /* 디자인 기준폭 */
    --lp-max-w: 440px;
    /* 노출 상한 (설계를 이 폭까지 비례 확대) */

    /* 비례 반응형(2026-07-18) — 설계폭(390 / vpro 400)을 뷰포트폭에 통짜로
       비례 스케일하는 길이 단위. transform/zoom 이 아니라 실제 length 라
       페이드·fixed·팝업·CTA 계약(§WIDGET[popup])을 그대로 지킨다.
         --lp-dw : 설계폭 divisor(unitless). render.ejs 가 페이지별로 심는다
                   (기본 390, vpro/vprogram 만 400). --lp-design-w 는 px 라
                   calc 나눗셈에서 unitless 가 안 돼 별도 변수로 둔다.
         --lp-u  : = min(100vw, 440px) / dw. 설계폭 뷰포트에서 정확히 1px 로
                   풀려 기존 렌더와 바이트 동일(Δ0). 그 밖 폭에선 전체가 같은
                   비율로 축소/확대된다. 아래 모든 고정 px 와 위젯 인라인 px 는
                   calc(N * var(--lp-u)) 로 이 단위를 곱한다(1px hairline 은 제외). */
    --lp-dw: 390;
    --lp-u: calc(min(100vw, var(--lp-max-w)) / var(--lp-dw));
    --lp-pad: calc(20 * var(--lp-u));
    /* 블록(이미지/카드) 좌우 여백 */
    --lp-pad-text: calc(35 * var(--lp-u));
    /* 섹션 텍스트 좌우 여백 */

    /* 라운드 — MO 기준 (개발전 가이드) */
    --lp-r-lg: calc(50 * var(--lp-u));
    --lp-r-md: calc(30 * var(--lp-u));
    --lp-r-sm: calc(20 * var(--lp-u));

    /* 합성글꼴 — 가이드 "한글과 영어가 혼합된 문장의 경우 합성글꼴 형태로 표기":
       라틴은 Neue Haas Unica Pro, 한글은 Noto Sans KR 이 잡는다. */
    font-family: "NeueHaasUnicaPro", "Noto Sans KR", sans-serif;
    color: var(--lp-ink);
    background: #ffffff;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ---------- reset (스코프 내부만) ---------- */
/* ⚠ body 기본 마진 8px 을 지우지 않으면 전 섹션이 8px 씩 밀려 정합이 통째로
   어긋난다(측정으로 확인). renew 파셜은 body 에 .mo-renew 를 붙이지 않으므로
   (각자 래퍼를 갖는다) 이 페이지의 body 마진은 여기서 책임진다.
   자손 :has 로 중첩 깊이와 무관하게 걸고, :where 로 가중치 0 → 호스트 스타일을
   이기지 않는다. */
:where(body:has(.landing_program)) {
    margin: 0;
}

.landing_program * {
    box-sizing: border-box;
}

.landing_program p,
.landing_program h1,
.landing_program h2,
.landing_program h3,
.landing_program h4,
.landing_program figure {
    margin: 0;
    font-weight: inherit;
}

/* ⚠ video 도 같이 리셋한다 — 영상 자리(image 위젯 vsrc)가 <img> → <video> 로
   바뀌어도 박스가 같아야 Δ0 이 유지된다. video 는 기본이 display:inline 이라
   빼먹으면 baseline 여백이 생겨 그 아래가 통째로 밀린다. */
/* ⚠ video 도 같이 리셋한다 — 영상 자리(image 위젯 vsrc)가 <img> → <video> 로
   바뀌어도 박스가 같아야 Δ0 이 유지된다. video 는 기본이 display:inline 이라
   빼먹으면 baseline 여백이 생겨 그 아래 전 섹션이 밀린다(측정으로 확인:
   이 두 줄이 없으면 pore 287행 중 15행부터 전부 어긋난다). */
.landing_program img,
.landing_program video {
    display: block;
    max-width: 100%;
}

/* ---------- 페이지 컨테이너 ----------
   조립 시 위아래로 renew 크롬이 붙는다:
     <div class="mo-renew"> GNB (position:fixed · top15 · h58 · z-index 1000)
     <div class="landing_program"> ← 여기
     <div class="mo-renew"> 푸터 / 플로팅 (position:fixed · z-index 1100)
   GNB·플로팅이 fixed 라 흐름에 영향이 없다. 다만 겹침 순서를 지키려면
   이 스코프 안의 z-index 는 1000 미만으로 묶는다. */
.landing_program {
    position: relative;
    z-index: 0;
    background: #ffffff;
}

/* 440px 상한 · 중앙 정렬 · 설계폭을 이 폭까지 비례 스케일 (2026-07-18)
   내부 px 는 --lp-u 로 비례하므로 이 컨테이너는 폭 상한/중앙정렬/클립만 책임진다.

   가로 클립이 필요한 이유: 풀블리드 이미지 중 일부가 컨테이너보다 넓다
   (모공 후기 392px · exact:true). 그걸 안 가두면 페이지에 가로 스크롤이 생긴다.

   ⚠ hidden 이 아니라 clip 인 이유 (2026-07-16 버그픽스):
   CSS 규칙상 한 축이 visible 이 아니면 나머지 축의 visible 은 auto 로 계산된다.
   즉 overflow-x:hidden 하나로 overflow-y 가 auto 가 되어 .lp-page 자체가
   스크롤 컨테이너가 됐고, 페이드 초기 상태 translateY(30px) 이 그 안에서
   30px 넘쳐 4페이지 전부에 인너 스크롤바가 떴다(scrollH-clientH=+30).
   clip 은 다른 축을 auto 로 만들지 않고 스크롤 컨테이너도 만들지 않는다.
   ※ 두 줄인 건 폴백이다 — clip 미지원(Safari<16)은 둘째 줄을 무시하고
     hidden 을 그대로 쓴다. 클리핑은 유지되고 스크롤바만 남는다(현행 유지). */
.landing_program .lp-page {
    width: 100%;
    max-width: var(--lp-max-w);
    margin: 0 auto;
    overflow-x: hidden;
    overflow-x: clip;
    background: #ffffff;
}

/* ---------- 타이포 프리셋 ----------
   개발전 가이드 10종. 자간은 요소별 실측이 우선이라 프리셋엔 가이드 기본값
   (-2%) 만 넣고, 다른 값은 페이지 CSS 에서 --lp-ls 로 덮어쓴다. */
.landing_program .lp-t {
    letter-spacing: var(--lp-ls, -0.02em);
    white-space: pre-line;
}

.landing_program .lp-t--point {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(15 * var(--lp-u));
    font-weight: 500;
    color: var(--lp-point);
}

.landing_program .lp-t--h1 {
    font-size: calc(26 * var(--lp-u));
    line-height: calc(38 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--h2 {
    font-size: calc(22 * var(--lp-u));
    line-height: calc(35 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--h3 {
    font-size: calc(20 * var(--lp-u));
    line-height: calc(31 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--h4 {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(25 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--p1 {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(31 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--p2 {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(29 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--p3 {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(26 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--c1 {
    font-size: calc(13 * var(--lp-u));
    line-height: calc(15 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--c2 {
    font-size: calc(14 * var(--lp-u));
    line-height: calc(24 * var(--lp-u));
    font-weight: 400;
}

/* 가이드 10종 밖이지만 프레임에서 실제로 쓰이는 타입 —
   실측 우선 원칙에 따라 프리셋으로 둔다. */
/* 섹션 번호 "1"~"5" : 22/31 · Neue Haas Light · #777777 (실측) */
.landing_program .lp-t--num {
    font-family: "NeueHaasUnicaPro", sans-serif;
    font-size: calc(22 * var(--lp-u));
    line-height: calc(31 * var(--lp-u));
    font-weight: 300;
    color: var(--lp-sub);
}

/* FAQ 질문 : 15/30 (실측) */
.landing_program .lp-t--faq {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(30 * var(--lp-u));
    font-weight: 400;
}

/* 프로세스 라벨 : 13/17 (실측) */
.landing_program .lp-t--proc {
    font-size: calc(13 * var(--lp-u));
    line-height: calc(17 * var(--lp-u));
    font-weight: 400;
}

/* 각주 : 10/14 · #7c7c7c (실측) */
.landing_program .lp-t--note {
    font-size: calc(10 * var(--lp-u));
    line-height: calc(14 * var(--lp-u));
    font-weight: 400;
    color: var(--lp-foot);
}

/* weight 보조 — Figma PostScript 명(dRg/eMd/fSm) 대응 */
.landing_program .lp-w-rg {
    font-weight: 400;
}

.landing_program .lp-w-md {
    font-weight: 500;
}

.landing_program .lp-w-sm {
    font-weight: 600;
}

/* 700 — 2026 가이드는 600 이 최대라 4랜딩엔 없었다. vpro(Figma 2989:1839,
   2409 세대)가 Bold 를 상시로 쓴다(30/42·22/31·히어로 point 등 실측 w700). */
.landing_program .lp-w-bd {
    font-weight: 700;
}

/* 자간 — 요소별 실측값. 가이드는 "공통 -2%" 라 적혀 있으나 실제 프레임은
   -1% / -2% / -2.5% / -3% 가 섞여 있어 개별 지정이 필요하다. */
.landing_program .lp-ls-1 {
    --lp-ls: -0.01em;
}

.landing_program .lp-ls-2 {
    --lp-ls: -0.02em;
}

.landing_program .lp-ls-25 {
    --lp-ls: -0.025em;
}

.landing_program .lp-ls-3 {
    --lp-ls: -0.03em;
}

/* -6% — newpore Solution 태그칩 특징 텍스트(13.5px · "주사 시술 · 피부 재생 · 염증 제어") 실측 */
.landing_program .lp-ls-6 {
    --lp-ls: -0.06em;
}

/* 부분강조 — 한 문단 안에서 일부만 Medium/진한 컬러 (Figma
   characterStyleOverrides). V2 의 "부분강조" 와 같은 개념. */
.landing_program .lp-em {
    font-style: normal;
    font-weight: 500;
    color: var(--lp-ink);
}

/* NAVER 워드마크 그린 — slide_review 의 붙박이 제목이 쓴다(트렐로 #167).
   값의 근거 셋이 서로 맞는다: 피그마 7375:878 의 characterStyleOverrides 80 이
   rgb(0.1013,0.6513,0.3543)=#1aa65a · 트렐로 #142 본문의 헥사 표기 · 이미 있는
   .lp-scar-naver.
   ⚠ #142 카드는 같은 줄에서 RGB 를 (79,165,99)=#4fa563 으로도 적어 자기모순이다.
     그 RGB 를 따른 newpore 계열 4페이지가 지금 혼자 다른 색인데, 그쪽은 Δ0 락이라
     이번 카드에서는 안 건드린다(별건).
   ⚠ .lp-scar-naver 를 재사용하지 않는 이유는 값이 아니라 이름이다 — 흉터 전용
     이름이 위젯 기본 카피에 박히면 다음 사람이 흉터 CSS 를 지울 때 같이 죽는다. */
.landing_program .lp-naver {
    color: #1aa65a;
}

/* 정렬 / 컬러 보조 */
.landing_program .lp-c {
    text-align: center;
}

.landing_program .lp-l {
    text-align: left;
}

.landing_program .lp-ink-sub {
    color: var(--lp-sub);
}

.landing_program .lp-ink-point {
    color: var(--lp-point);
}

.landing_program .lp-ink-sub2 {
    color: var(--lp-sub-2);
}

.landing_program .lp-ink-ink2 {
    color: var(--lp-ink-2);
}

.landing_program .lp-ink-foot {
    color: var(--lp-foot);
}

/* 자간 양수 — BEFORE/AFTER 라벨은 실측 +2.5% 로 벌어져 있다 */
.landing_program .lp-ls-p25 {
    --lp-ls: 0.025em;
}

/* ---------- WIDGET[img_row] / WIDGET[cap_row] ---------- */
.landing_program .lp-imgrow,
.landing_program .lp-caprow {
    display: flex;
}

.landing_program .lp-imgrow__img {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    object-fit: cover;
}

.landing_program .lp-caprow>.lp-t {
    flex: 1 1 0;
    min-width: 0;
}

/* ---------- WIDGET[spacer] ---------- */
/* 섹션 간 실측 간격 주입 (--h 는 위젯이 인라인으로 준다) */
.landing_program .lp-sp {
    height: var(--h, 0px);
}

/* ---------- WIDGET[text] ---------- */
/* 좌우 여백 실측 4종 — 프레임에서 20 / 35 / 60 이 섞여 쓰인다 */
.landing_program .lp-pad-text {
    padding-left: var(--lp-pad-text);
    padding-right: var(--lp-pad-text);
}

.landing_program .lp-pad-wide {
    padding-left: var(--lp-pad);
    padding-right: var(--lp-pad);
}

.landing_program .lp-pad-lead {
    padding-left: calc(60 * var(--lp-u));
    padding-right: calc(60 * var(--lp-u));
}

.landing_program .lp-pad-none {
    padding-left: 0;
    padding-right: 0;
}

/* ---------- WIDGET[image] / WIDGET[video] ---------- */
.landing_program .lp-img {
    width: 100%;
    height: auto;
}

/* 풀블리드 — 영상 자리도 좌우 가득(거터·라운드 없음) */
.landing_program .lp-img--full {
    width: 100%;
}

/* 설계 높이 강제 — 프레임보다 넓게 걸친 노드용(image.ejs exact 주석 참고) */
.landing_program .lp-img--exact {
    object-fit: cover;
}

/* 라운드는 이미지에 굽지 않고 CSS 로 준다 (MO 기준: 큰50 / 중간30 / 작은20) */
.landing_program .lp-r-lg {
    border-radius: var(--lp-r-lg);
}

.landing_program .lp-r-md {
    border-radius: var(--lp-r-md);
}

.landing_program .lp-r-sm {
    border-radius: var(--lp-r-sm);
}

/* newpore "단순한 모공 개선" 3-이미지 섹션 카드 라운드 40 (실측 r40 · lg50/md30 사이) */
.landing_program .lp-r-40 {
    border-radius: calc(40 * var(--lp-u));
}

/* newpore ADD ON 카드 · 인터뷰 영상 아래 프로세스 이미지 511 라운드 25 (실측) */
.landing_program .lp-r-25 {
    border-radius: calc(25 * var(--lp-u));
}

/* Figma fill 의 blendMode:MULTIPLY 대응.
   노드를 단독 export 하면 곱하기 상대가 없어 흰 배경이 살아남아 카드 위에
   흰 사각형으로 보인다. 같은 곱하기를 CSS 로 걸어 흰 배경을 날린다.
   해당 소재는 4페이지 통틀어 2개(pore 리액터 병 / scar 주사기) — 실측 확인. */
.landing_program .lp-blend {
    mix-blend-mode: multiply;
}

/* ---------- WIDGET[hero] ---------- */
/* 히어로는 페이지 y0 에서 시작한다. renew GNB 는 position:fixed 라 흐름 공간을
   먹지 않으므로 GNB 가 히어로 위를 덮는다(= Figma 의 탑네비 오버레이와 동일). */
.landing_program .lp-hero {
    position: relative;
}

.landing_program .lp-hero__bg {
    width: 100%;
    height: auto;
}

.landing_program .lp-hero__copy {
    position: absolute;
    left: 0;
    right: 0;
    text-align: center;
}

/* ---------- WIDGET[card] ---------- */
/* 실측 #f9f9f9 · r50 · 좌우 20 여백. bg/padding/height 는 위젯 인라인. */
.landing_program .lp-card {
    margin-left: var(--lp-pad);
    margin-right: var(--lp-pad);
    border-radius: var(--lp-r-lg);
}

.landing_program .lp-card__img {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

/* ---------- WIDGET[slide] ----------
   실측(pore y2570-2894): 화살표 pill 37x22 · 간격 5 · 우측 끝이 프레임에서 15,
   슬라이드 300 폭 · 간격 20 · 첫 슬라이드 x20. */
.landing_program .lp-slide__nav {
    display: flex;
    justify-content: flex-end;
    gap: calc(5 * var(--lp-u));
    padding-right: calc(15 * var(--lp-u));
}

.landing_program .lp-slide__btn {
    width: calc(37 * var(--lp-u));
    height: calc(22 * var(--lp-u));
    padding: 0;
    border: 0;
    border-radius: calc(11 * var(--lp-u));
    background: #f6f6f6;
    color: #323232;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* 처음/끝에서 비활성 — 실측 셰브론 색 #d2d2d2 */
.landing_program .lp-slide__btn.is-off {
    color: #d2d2d2;
    cursor: default;
}

.landing_program .lp-slide__sw {
    overflow: hidden;
}

.landing_program .lp-slide__item {
    flex-shrink: 0;
    height: auto;
}

/* 카드형 — 실측 #f9f9f9 · r30 */
.landing_program .lp-slide__card {
    height: 100%;
    background: #f9f9f9;
    border-radius: var(--lp-r-md);
}

/* 비포/애프터 2분할 — 바깥 모서리만 라운드(가운데 경계는 직각) */
.landing_program .lp-slide__ba {
    position: relative;
    display: flex;
    border-radius: var(--lp-r-md);
    overflow: hidden;
}

.landing_program .lp-slide__ba-img {
    width: 50%;
    height: 100%;
    object-fit: cover;
}

/* 위아래 2분할 (newpore) — before 위 / after 아래. 바깥 모서리만 라운드는 동일.
   실측 newpore: 290x185 + 290x185 = 290x370 · r40. pore(좌우 분할)는 기본값이라 무영향. */
.landing_program .lp-slide__ba--col {
    flex-direction: column;
}

.landing_program .lp-slide__ba--col .lp-slide__ba-img {
    width: 100%;
    height: 50%;
}

/* 세로 영상 카드 (피그마 Slide/video 7621:319) — 실측 228x406 = 9:16 · r25.
   ba 와 달리 캡션이 카드 **밖 아래**라 카드에 position 을 안 건다. */
.landing_program .lp-slide__vid {
    overflow: hidden;
    border-radius: calc(25 * var(--lp-u));
}

.landing_program .lp-slide__vid-m {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 카드 아래 캡션 — 실측 14/24 · ls0 · #000000 · 2줄(닉네임 @핸들 / 태그).
   간격 15 와 좌 들여쓰기 20 은 slide.ejs 가 인라인으로 준다(데이터로 조정 가능). */
.landing_program .lp-slide__vcap {
    font-size: calc(14 * var(--lp-u));
    line-height: calc(24 * var(--lp-u));
    letter-spacing: 0;
    color: #000000;
}

/* 날짜 캡션 — 이미지 위 흰 글씨 (실측 8.46/14.6 · #ffffff) */
.landing_program .lp-slide__ba-date {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: calc(4 * var(--lp-u));
    font-size: calc(8.46 * var(--lp-u));
    line-height: calc(14.6 * var(--lp-u));
    letter-spacing: -0.03em;
    color: #ffffff;
    white-space: pre;
}

/* ---------- WIDGET[rv_card] ---------- */
/* 후기 카드(세로 목록) + 카드 위로 걸친 프로모 알약. 실측 = newpore 4713:884 y601-748.
   흐름 높이는 카드가 정한다 — 알약은 absolute 라 위로 28px 삐져나가도 흐름에 영향이 없다. */
.landing_program .lp-rv {
    position: relative;
}

/* overflow:hidden 이 라운드 클리핑 + 목록 잘라내기를 함께 한다.
   → Figma 의 흰 마스크(Rectangle 729)가 필요 없다(위젯 주석 참고). */
.landing_program .lp-rv__card {
    position: relative;
    overflow: hidden;
}

/* 목록을 안정적인 컨테이닝 블록으로 — 항목은 이 리스트(카드 상단과 동일 위치,
   높이 0) 기준으로 절대배치된다. 라이브 세로 슬라이드는 이 리스트를 translateY
   로 밀어 넘긴다. position 유무와 무관하게 항목 좌표는 동일하다(Δ0). */
.landing_program .lp-rv__list {
    position: relative;
}

.landing_program .lp-rv__item {
    position: absolute;
    left: 0;
    right: 0;
}

/* 배지 — 닉네임 길이에 따라 폭이 변하므로 **오른쪽 끝을 고정**한다(실측 x116). */
.landing_program .lp-rv__badge {
    position: absolute;
    top: calc(2 * var(--lp-u));
    display: inline-block;
    padding: calc(3.5 * var(--lp-u)) calc(11 * var(--lp-u));
    border-radius: calc(11.96 * var(--lp-u));
    background: #323232;
    font-size: calc(9.57 * var(--lp-u));
    line-height: calc(14.4 * var(--lp-u));
    font-weight: 500;
    color: #ffffff;
    white-space: nowrap;
}

.landing_program .lp-rv__txt {
    position: absolute;
    top: 0;
    margin: 0;
    color: #323232;
    white-space: pre-line;
}

/* 2번째 이후 = "다음 항목 미리보기" → **fill 만** 20% (닉네임 흰색은 100% 유지).
   요소 opacity 를 쓰면 닉네임까지 흐려져 원본과 달라진다. */
.landing_program .lp-rv__item+.lp-rv__item .lp-rv__txt {
    color: rgba(50, 50, 50, 0.2);
}

.landing_program .lp-rv__item+.lp-rv__item .lp-rv__badge {
    background: rgba(50, 50, 50, 0.2);
}

/* ---------- 라이브 세로 슬라이드 (rv_card) ----------
   런타임 JS(landing_program.js init_rv)가 뷰 진입 시 .lp-rv--live 를 세우고
   리스트를 3초마다 한 항목씩 위로 민다. 활성(is-active) 항목만 진하고 나머지는
   흐리다(정적 디자인의 '다음 항목 미리보기'를 이어감). 정적 '+형제' 규칙을 덮으므로
   활성 항목이 첫 항목이 아니어도 진하게 나온다.
   ⚠ Δ0: 화면 밖/측정(.lp-no-anim)에선 JS 가 .lp-rv--live 를 안 세워 정적 그대로다. */
.landing_program .lp-rv--live .lp-rv__list {
    transition: transform 0.6s ease;
    will-change: transform;
}

.landing_program .lp-rv--live .lp-rv__txt {
    transition: color 0.6s ease;
}

.landing_program .lp-rv--live .lp-rv__badge {
    transition: background-color 0.6s ease;
}

.landing_program .lp-rv--live .lp-rv__item .lp-rv__txt {
    color: rgba(50, 50, 50, 0.2);
}

.landing_program .lp-rv--live .lp-rv__item .lp-rv__badge {
    background: rgba(50, 50, 50, 0.2);
}

/* 닉네임 글자는 흐림 대상이 아니다(fill 만 20%) — 흰색 100% 유지(정적과 동일) */
.landing_program .lp-rv--live .lp-rv__item.is-active .lp-rv__txt {
    color: #323232;
}

.landing_program .lp-rv--live .lp-rv__item.is-active .lp-rv__badge {
    background: #323232;
}

.landing_program .lp-rv__pill {
    position: absolute;
    left: calc(20 * var(--lp-u));
    right: calc(20 * var(--lp-u));
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 실측: 알약 x20-370 · 라벨 x43(좌 23) · 버튼 x270-349(우 21) */
    padding: 0 calc(21 * var(--lp-u)) 0 calc(23 * var(--lp-u));
}

.landing_program .lp-rv__pill-label {
    font-size: calc(16 * var(--lp-u));
    line-height: calc(35 * var(--lp-u));
    letter-spacing: -0.03em;
    color: #323232;
}

.landing_program .lp-rv__pill-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: calc(79 * var(--lp-u));
    height: calc(33 * var(--lp-u));
    border-radius: calc(50 * var(--lp-u));
    background: #ff0000;
    font-size: calc(15 * var(--lp-u));
    line-height: calc(20.4 * var(--lp-u));
    letter-spacing: -0.04em;
    color: #ffffff;
    text-decoration: none;
    white-space: nowrap;
}

/* ---------- WIDGET[faq] ---------- */
/* 실측: 선은 좌우 가득(x0-390) 1px, 질문은 x35 */
.landing_program .lp-faq__line {
    height: 1px;
}

.landing_program .lp-faq__q .lp-t {
    margin: 0;
}

/* ---------- WIDGET[popup] ----------
   스펙: 공통 가이드 + 날개 주석 5236:1905
     팝업   #ffffff op95% + backdrop blur 15
     뒷배경 #3C3C3C op10% + backdrop blur 80
     상단 라운드 30 / X 는 스크롤해도 고정 / 바깥 클릭 닫기

   ⚠ 팝업 레이어는 .landing_program 을 CSS 스코프로 재사용하되(모든 규칙이
      .landing_program 하위라서), 그 규칙의 position:relative + z-index:0 이
      "스태킹 컨텍스트"를 만들어 버린다 → 안의 팝업이 z-index 를 아무리 올려도
      renew GNB(1000)/플로팅(1100) 아래로 깔린다. 그래서 여기서 되돌린다. */
.landing_program.lp-pop-layer {
    position: static;
    z-index: auto;
    background: none;
}

.landing_program .lp-pop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    /* renew 플로팅(1100)·메가드롭(1200) 위 — 모달이라 전부 덮어야 한다 */
    z-index: 2000;
}

.landing_program .lp-pop[hidden] {
    display: none;
}

.landing_program .lp-pop__dim {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: rgba(60, 60, 60, 0.1);
    -webkit-backdrop-filter: blur(80px);
    backdrop-filter: blur(80px);
}

/* 하단 시트 — 상단만 라운드 30 이고 아래는 화면 밖으로 나간다.
   ⚠ top 여백(40)은 실측이 아니다. 날개엔 패널 크기(350x1920/2011)만 있고
     화면에 어떻게 얹히는지가 없다 → 디자이너 확인 대상. */
.landing_program .lp-pop__panel {
    position: absolute;
    top: calc(40 * var(--lp-u));
    bottom: 0;
    left: 50%;
    width: 100%;
    transform: translateX(-50%);
    background: rgba(255, 255, 255, 0.95);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);
    border-radius: calc(30 * var(--lp-u)) calc(30 * var(--lp-u)) 0 0;
    overflow: hidden;
}

/* X — 스크롤 컨테이너 "밖"에 둬야 스크롤해도 안 움직인다(주석 5236:1905).
   실측: 패널 기준 (285, 25) · 40x25 */
.landing_program .lp-pop__x {
    position: absolute;
    top: calc(25 * var(--lp-u));
    right: calc(25 * var(--lp-u));
    z-index: 2;
    width: calc(40 * var(--lp-u));
    height: calc(25 * var(--lp-u));
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.landing_program .lp-pop__scroll {
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* 열려 있는 동안 뒤 페이지가 같이 스크롤되지 않게 (V1 body.hold 와 같은 역할) */
.landing_program-pop-open {
    overflow: hidden;
}

/* 흉터 팝업 전용 타이포 (실측 5236:2102 내부)
     소제목 17/14 #ff0000  ← 박스 높이(14) < 글자(17). 디자이너가 높이를 고정한
       케이스라 프리셋 행간을 14 로 두고 데이터에서 h 로 흐름을 맞춘다.
     본문   15/25          ← p3(15/26)·p2(15/29)와 1~4px 달라 따로 둔다
     캡션   11.5/22 #a5a5a5 */
.landing_program .lp-t--sc-plbl {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(14 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--sc-pbody {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(25 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--sc-pcap {
    font-size: calc(11.5 * var(--lp-u));
    line-height: calc(22 * var(--lp-u));
    font-weight: 400;
    color: #a5a5a5;
}

/* 색소 팝업 전용 타이포 (실측 5236:1003 = Group 661 내부)
     차트 제목 15/23  Neue Haas Regular  ← 본문 p3(15/26)와 행간이 3 다르다
     캡션     13/23  #a5a5a5            ← 흉터 sc-pcap(11.5/22)와 달라 따로 둔다
     BEFORE/AFTER 8/15.02 . ls+3% . #ffffff
   ※ 헤드(22/35)·소제목(17/14 #ff0000)·본문(15/26)은 각각 공용 h2 · 흉터
     sc-plbl · 공용 p3 와 실측이 같아 그대로 재사용한다(자간만 다르게 준다).
   ※ 폰트: 차트 제목은 라틴+한글 혼합이라 스코프 기본 스택
     (NeueHaasUnicaPro → Noto Sans KR)이 그대로 맞다 — 지정하지 않는다.
   ※ BEFORE/AFTER 는 실측이 Aktiv Grotesk Bold(700)인데 이 프로젝트는 그 패밀리를
     싣지 않는다(라틴은 Haas). 700 페이스도 없어 600 으로 맞춘다 — pig-case 선례. */
.landing_program .lp-t--pig-ptit {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(23 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-t--pig-pcap {
    font-size: calc(13 * var(--lp-u));
    line-height: calc(23 * var(--lp-u));
    font-weight: 400;
    color: #a5a5a5;
}

.landing_program .lp-t--pig-pba {
    font-size: calc(8 * var(--lp-u));
    line-height: calc(15.02 * var(--lp-u));
    font-weight: 600;
    color: #ffffff;
}

/* ---------- WIDGET[pigment_overlay] ----------
   이미지 + 그 위 절대배치 라벨. 라벨은 흐름에서 빠지므로 블록 높이는 이미지가
   정한다(Δ0 영향 없음). 좌표는 이미지 좌상단 기준. */
.landing_program .lp-pigov {
    position: relative;
    font-size: 0;
}

.landing_program .lp-pigov__img {
    display: block;
    width: 100%;
    height: auto;
}

.landing_program .lp-pigov__cap {
    position: absolute;
    margin: 0;
}

/* ---------- WIDGET[faq] 아코디언 ----------
   ⚠ 접힌 상태가 흐름에 0px 만 기여해야 Figma 정합(접힌 상태 기준)이 유지된다.
      → 초기 상태는 [hidden](display:none). JS 가 열 때만 display 를 풀고
        height 를 실측값으로 애니메이션한다.
   ⚠ [hidden] 은 display:block 을 주는 규칙에 지면 안 된다 → 명시적으로 눌러둔다. */
.landing_program .lp-faq__a[hidden] {
    display: none;
}

.landing_program .lp-faq__a {
    overflow: hidden;
    height: 0;
    transition: height 0.3s ease;
}

.landing_program .lp-faq__a-in {
    padding: 0 calc(35 * var(--lp-u)) calc(25 * var(--lp-u));
}

/* 답변 본문 — 질문(15/30)보다 한 단 낮춰 종속돼 보이게.
   ⚠ 펼침 상태 디자인이 Figma 에 없다. 개발전 가이드의 "주석 14/24"(=c2)를
      쓰고 색만 서브(#777)로 낮췄다 → 디자이너 확인 대상. */
.landing_program .lp-faq__a-body {
    color: var(--lp-sub);
    white-space: normal;
}

.landing_program .lp-faq__a-body ul {
    margin: calc(8 * var(--lp-u)) 0 0;
    padding-left: calc(18 * var(--lp-u));
}

.landing_program .lp-faq__a-body li {
    margin-bottom: calc(4 * var(--lp-u));
}

.landing_program .lp-faq__q--acc {
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}

/* 열림 표시 — 굵기 강조는 쓰지 않는다(디자이너 요청 2026-07-21).
   열림 상태는 답변 펼침 자체로 드러나므로 질문 타이포는 접힘/열림 동일(400). */
.landing_program .lp-faq__q--acc[aria-expanded="true"] .lp-t {
    font-weight: 400;
}

/* ---------- WIDGET[feature_rows] ---------- */
.landing_program .lp-frows__line {
    height: 1px;
}

.landing_program .lp-frows__row {
    position: relative;
}

.landing_program .lp-frows__label {
    position: absolute;
    top: var(--label-top, calc(18 * var(--lp-u)));
}

/* ---------- WIDGET[kv_rows] ----------
   팝업 "시술 정보" 표. frows 와 마크업은 닮았지만 타이포가 데이터에서 온다.
   라벨은 absolute(값이 2줄이어도 라벨은 첫 줄에 고정) · 행 높이는 값이 정한다. */
.landing_program .lp-kvrows__line {
    height: 1px;
}

.landing_program .lp-kvrows__row {
    position: relative;
}

.landing_program .lp-kvrows__k {
    position: absolute;
}

/* ---------- WIDGET[process] ---------- */
.landing_program .lp-proc__card {
    position: relative;
    border-radius: var(--lp-r-md);
    overflow: hidden;
}

.landing_program .lp-proc__dot {
    position: absolute;
    border-radius: 50%;
    background: #ffffff;
}

/* Figma 는 bbox 를 14x0 으로 보고하지만 실제로는 머리 달린 화살표(#959595) */
.landing_program .lp-proc__arrow {
    position: absolute;
    overflow: visible;
}

.landing_program .lp-proc__label {
    position: absolute;
    white-space: pre-line;
}

.landing_program .lp-proc__star {
    position: absolute;
    color: var(--lp-point);
    font-size: calc(9 * var(--lp-u));
    line-height: calc(9.3 * var(--lp-u));
    font-style: normal;
}

.landing_program .lp-proc__note {
    position: absolute;
    text-align: left;
}

/* vpro 각주는 가운데정렬이다(pore 는 좌측). 위 규칙이 .lp-c(343줄)보다 뒤라
   같은 specificity 로는 안 먹는다 → 복합 셀렉터로 못 박는다. */
.landing_program .lp-proc__note.lp-c {
    text-align: center;
}

/* ---------- 이펙트 (공통 가이드) ----------
   모든 컨텐츠 영역: Layer in View 트리거 시 페이드인업 */
.landing_program [data-lp-fade] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
    will-change: opacity, transform;
}

.landing_program [data-lp-fade].is-in {
    opacity: 1;
    transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
    .landing_program [data-lp-fade] {
        opacity: 1;
        transform: none;
        transition: none;
    }
}

/* 에디터 미리보기(render.ejs 의 lp_doc)에서는 등장 페이드를 아예 끈다.
   페이드는 IntersectionObserver 가 화면에 들어와야 켜 주는데, 관찰 영역이
   rootMargin '0px 0px -10% 0px' 라 **화면 하단 10% 는 죽은 띠**다. 새로 추가한
   위젯은 페이지 맨 아래에 붙으므로 늘 그 띠 아래로 떨어져 opacity:0 인 채 남는다
   → "추가하고 적용을 눌러도 안 나온다"(트렐로 #163, 실측 재현). translateY(30px)
   자신이 위젯을 30px 더 밀어내 사각지대를 넓히는 것도 확인했다.
   미리보기에 등장 애니메이션은 쓸모가 없고 편집을 가리기만 한다.
   ⚠ lp-no-anim 을 재사용하지 않는다 — 그건 후기 카드 세로 슬라이드
     (.lp-rv__list)까지 멈춰 미리보기가 라이브와 달라진다. 페이드만 끈다.
   ⚠ 측정 하네스(_figma_pull)는 lp_doc 을 안 켜므로 Δ0 정합에 무영향이다. */
.landing_program.lp-no-fade [data-lp-fade],
.landing_program.lp-no-fade [data-lp-fade].is-in {
    opacity: 1;
    transform: none;
    transition: none;
}

/* 측정/캡처 모드 — JS force_reveal() 이 붙인다. 전환을 완전히 끄지 않으면
   translateY 가 남은 채로 좌표가 측정된다. */
.landing_program.lp-no-anim [data-lp-fade],
.landing_program.lp-no-anim [data-lp-fade].is-in {
    opacity: 1;
    transform: none;
    transition: none;
}

/* 후기 카드 세로 슬라이드도 측정 모드에선 정적으로 — 인라인 translateY 를 덮어
   0(첫 항목)으로 되돌린다. init_rv 가 no-anim 이면 tick 을 안 돌리지만, 만약
   측정 직전에 이미 밀린 상태라도 좌표가 어긋나지 않게 하는 안전망이다(Δ0). */
.landing_program.lp-no-anim .lp-rv__list {
    transform: none !important;
    transition: none !important;
}

/* =========================================================================
   페이지 공용 유틸 (2페이지 이상에서 쓰는 것만)
   ------------------------------------------------------------------------
   원래는 색소/흉터/볼륨이 각자 자기 섹션에 따로 갖고 있던 것들인데, 값이
   똑같은 중복이라 여기로 올렸다. 중복으로 두면 뒤 섹션이 앞 섹션을 덮어써서
   "앞 페이지 섹션의 규칙을 고쳤는데 아무 일도 안 일어나는" 함정이 된다.
   ※ 한 페이지에서만 쓰는 값은 여기 올리지 말고 자기 섹션에 둘 것.
   ========================================================================= */

/* 자간 -4% : 색소 팝업 버튼 / 흉터 날짜·각주 / 볼륨 CTA 라벨 (16px 에 -0.64) */
.landing_program .lp-ls-4 {
    --lp-ls: -0.04em;
}

/* 자간 +1% : "NAVER Real Review" 실측 (19px 에 +0.19) — 흉터/볼륨 */
.landing_program .lp-ls-p1 {
    --lp-ls: 0.01em;
}

/* 어두운 배경 위 흰 카피 — 흉터/볼륨 */
.landing_program .lp-ink-white {
    color: #ffffff;
}

/* =========================================================================
   페이지 전용 섹션 — 병렬 작업용으로 미리 갈라 둔다.
   자기 페이지 섹션 안에만 쓸 것. 위쪽 공용 규칙은 수정 금지.
   ========================================================================= */

/* ===== pigment 전용 ===== */

/* ---------- pigment: 자간 추가 실측치 ----------
   색소 프레임은 모공보다 자간이 더 잘게 쪼개져 있다(가이드의 "공통 -2%" 와 무관).
   ls 값 = |퍼센트|*10 규칙으로 이름을 붙인다(예: -2.6% → lp-ls-26). */
.landing_program .lp-ls-0 {
    --lp-ls: 0;
}

.landing_program .lp-ls-23 {
    /* 22px / -0.5 (색소 리액터와의 강력한 시너지 효과) */
    --lp-ls: -0.023em;
}

.landing_program .lp-ls-26 {
    /* 19px / -0.5 (카드 빨강 소제목 4종) */
    --lp-ls: -0.026em;
}

.landing_program .lp-ls-29 {
    /* 17px / -0.5 (사례 1~4) */
    --lp-ls: -0.029em;
}

.landing_program .lp-ls-36 {
    /* 14px / -0.5 (진피성/표피성 설명) */
    --lp-ls: -0.036em;
}

/* 자간 -4%(치료 임상효과 확인 버튼, 16px 에 -0.64) 는 흉터/볼륨과 값이 같아
   위쪽 "페이지 공용 유틸" 로 올렸다. */

.landing_program .lp-ls-p3 {
    /* 15.5px / +0.47 (ADD ON) */
    --lp-ls: 0.03em;
}

/* ---------- pigment: 컬러 추가 실측치 ---------- */
.landing_program .lp-ink-w {
    color: #ffffff;
}

.landing_program .lp-ink-f5 {
    /* 사진 위 라틴 카피 (before/after, Pigmentation Reactor) */
    color: #f5f5f5;
}

.landing_program .lp-ink-33 {
    /* #323232 가 아니라 #333333 인 구간이 있다(시너지 섹션) */
    color: #333333;
}

/* ---------- pigment: 타이포 프리셋 추가 실측치 ----------
   가이드 10종 + 모공 실측 4종 밖이지만 색소 프레임에서 실제로 쓰이는 타입.
   text 위젯의 preset 은 lp-t--(값) 로 그대로 이어붙으므로 여기 정의하면 쓸 수 있다. */
/* 카드 빨강 소제목 : 19/31 (실측) */
.landing_program .lp-t--pig-h19 {
    font-size: calc(19 * var(--lp-u));
    line-height: calc(31 * var(--lp-u));
    font-weight: 400;
}

/* 사례 1~4 : 17/36 . Neue Haas Bold (실측 fontWeight 700).
   Noto/Neue Haas 모두 700 페이스를 싣지 않아 600 으로 맞춘다
   (runs.js 의 이름→굵기 매핑도 -Bold 를 600 으로 본다). */
.landing_program .lp-t--pig-case {
    font-family: "NeueHaasUnicaPro", "Noto Sans KR", sans-serif;
    font-size: calc(17 * var(--lp-u));
    line-height: calc(36 * var(--lp-u));
    font-weight: 600;
}

/* ADD ON : 15.5/42 . Neue Haas Regular (실측) */
.landing_program .lp-t--pig-addon {
    font-family: "NeueHaasUnicaPro", sans-serif;
    font-size: calc(15.5 * var(--lp-u));
    line-height: calc(42 * var(--lp-u));
    font-weight: 400;
}

/* 사진 위 브랜드 카피 : 16/31 (실측) */
.landing_program .lp-t--pig-brand {
    font-family: "NeueHaasUnicaPro", sans-serif;
    font-size: calc(16 * var(--lp-u));
    line-height: calc(31 * var(--lp-u));
    font-weight: 400;
}

/* 시너지 01/02 라벨 : 15/30 (실측) */
.landing_program .lp-t--pig-syn {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(30 * var(--lp-u));
    font-weight: 500;
}

/* 리뷰 섹션 부제 : 15/24 (실측) */
.landing_program .lp-t--pig-sub {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(24 * var(--lp-u));
    font-weight: 400;
}

/* 2단 행 라벨 : 15/14 (실측 — 행간이 글자보다 작다. 박스도 14) */
.landing_program .lp-t--pig-lbl {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(14 * var(--lp-u));
    font-weight: 500;
}

/* 프로세스 표 : 15/28 (실측) */
.landing_program .lp-t--pig-proc {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(28 * var(--lp-u));
    font-weight: 400;
}

/* 프로세스 각주 : 11/12 . #7c7c7c (실측 — 모공의 note 10/14 와 다름) */
.landing_program .lp-t--pig-note {
    font-size: calc(11 * var(--lp-u));
    line-height: calc(12 * var(--lp-u));
    font-weight: 400;
    color: var(--lp-foot);
}

/* 버튼 카피 : 16/20.4 (실측) */
.landing_program .lp-t--pig-cta {
    font-size: calc(16 * var(--lp-u));
    line-height: calc(20.4 * var(--lp-u));
    font-weight: 500;
}

/* ---------- WIDGET[block] ----------
   배경(색/이미지) 위에 위젯을 겹쳐 담는 공용 컨테이너. bg/round/height/여백은
   위젯이 인라인으로 준다. overflow:hidden 이 라운드 클리핑과 배경사진
   크롭(프레임 밖으로 걸친 소재)을 함께 책임진다.
   (구 pigment_block / scar_band / volume_band 를 2026-07-16 에 합친 것) */
.landing_program .lp-block {
    position: relative;
    overflow: hidden;
}

.landing_program .lp-block__bg {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing_program .lp-block__in {
    position: relative;
}

/* ---------- WIDGET[pigment_ba] ----------
   슬라이드/화살표 골격은 공용 slide 클래스를 그대로 쓰고, 반쪽별 라벨만 얹는다.
   실측: 라벨은 각 반쪽 오른쪽에서 15, 슬라이드 아래에서 4 (12.5/31 . #f5f5f5). */
.landing_program .lp-pigba__half {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
}

.landing_program .lp-pigba__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.landing_program .lp-pigba__lbl {
    position: absolute;
    right: calc(15 * var(--lp-u));
    bottom: calc(4 * var(--lp-u));
    font-family: "NeueHaasUnicaPro", sans-serif;
    font-size: calc(12.5 * var(--lp-u));
    line-height: calc(31 * var(--lp-u));
    letter-spacing: 0;
    color: #f5f5f5;
    white-space: pre;
}

/* ---------- WIDGET[pigment_rows] ----------
   구분선 + (좌 이미지 . 우 라벨/본문) 행 반복, 행 사이에 원형 배지. */
.landing_program .lp-pigrows__line {
    height: 1px;
}

.landing_program .lp-pigrows__row {
    position: relative;
}

.landing_program .lp-pigrows__img {
    display: block;
}

.landing_program .lp-pigrows__txt {
    position: absolute;
}

.landing_program .lp-pigrows__badge {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ---------- WIDGET[pigment_icon] ---------- */
.landing_program .lp-pigicon {
    display: flex;
    justify-content: center;
}

.landing_program .lp-pigicon__dot {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ---------- WIDGET[link_button] ----------
   피그마 7621:354 (카테고리 "링크 버튼" · 2026-08-11 신설).
   ★알약도 아이콘도 밑줄도 없다 — 회색 글자 한 줄이 전부다(프레임 자식이 TEXT 하나뿐).
   실측: rel(40,65) · 130x29 · 15/29 · ls-3% · 좌정렬 · #cccccc.
   색/크기/자간/여백은 전부 데이터(위젯 필드)라 여기엔 배치와 상속만 둔다. */
/* ⚠ lp-ls-* 는 --lp-ls 변수만 세운다 — 소비는 각 위젯이 한다(.lp-t 와 같은 규약).
   이걸 빼면 lp-ls-3 을 붙여도 letter-spacing 이 normal 로 남는다(실측으로 잡음). */
/* ⚠ white-space:pre-line 은 이 바깥 상자가 아니라 글자를 직접 담는
   .lp-linkbtn__a 에 건다(.lp-tw / .lp-t 와 같은 배치). 바깥 상자에 걸면
   파셜의 들여쓰기 줄바꿈이 그대로 빈 줄이 돼 높이가 4배(29 → 116)로 부푼다. */
.landing_program .lp-linkbtn {
    text-align: left;
    letter-spacing: var(--lp-ls, -0.02em);
}

.landing_program .lp-linkbtn--c {
    text-align: center;
}

.landing_program .lp-linkbtn--r {
    text-align: right;
}

/* 링크 기본 파랑/밑줄을 끈다 — 이 위젯은 색을 데이터로 받는다.
   span 폴백(href 없음)도 같은 규칙을 타야 링크 유무로 모양이 안 바뀐다. */
.landing_program .lp-linkbtn__a {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
    text-decoration: none;
    white-space: pre-line;
}

/* ---------- WIDGET[pigment_cta] ----------
   실측(y4818-4880): 알약 218x62 . #f9f9f9 . 완전 라운드. 카피는 알약 중앙이
   아니라 좌측에서 30 (우측 원형 아이콘 자리를 비워 둔 배치). */
.landing_program .lp-pigcta {
    display: flex;
    justify-content: center;
}

.landing_program .lp-pigcta__pill {
    position: relative;
}

.landing_program .lp-pigcta__txt {
    position: absolute;
    white-space: pre;
}

.landing_program .lp-pigcta__ico {
    position: absolute;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

/* ---------- WIDGET[pigment_proc] ----------
   시술 프로세스 표. 라벨 칼럼(x35) + 값 칼럼(x130) 에 화살표가 섞여 흘러서
   격자로는 재현이 안 된다 → 모공 process 위젯과 같이 좌표를 데이터로 받는다.
   ※ 화살표는 Figma bbox 가 14x0 이지만 실제로는 머리 달린 채움 도형(#959595). */
.landing_program .lp-pigproc {
    position: relative;
}

.landing_program .lp-pigproc__t {
    position: absolute;
    white-space: pre;
}

.landing_program .lp-pigproc__arrow {
    position: absolute;
    overflow: visible;
}

.landing_program .lp-pigproc__line {
    position: absolute;
}

/* ===== scar 전용 ===== */

/* ---------- WIDGET[scar_stage] / WIDGET[scar_slide] / WIDGET[scar_layers] ----------
   흉터 프레임은 카드/슬라이드 내부가 자동 레이아웃이 아니라 절대좌표 조판이다.
   스테이지(부모)를 기준으로 레이어를 얹는다. */
.landing_program .lp-scar-stage {
    position: relative;
    overflow: hidden;
}

.landing_program .lp-scar-l {
    position: absolute;
    margin: 0;
}

/* Figma 는 화살표 bbox 를 높이 0 으로 보고하지만 실제론 머리가 달려 있다.
   svg.js 원본 확인: 흉터 프로세스 화살표는 #252525 (모공의 #959595 와 다름) */
.landing_program .lp-scar-arrow {
    overflow: visible;
}

/* ===== 연동 탭 (scar_stage tabset + text tabset) =====
   원본 V1 .npr-tab 과 같은 거동 — 칩/화살표를 누르면 다이어그램의 활성 알약과
   아래 본문이 함께 바뀐다.
   ★ 서버가 data-lp-cur="1" 을 박아 내보내므로 JS 가 없어도 1번 탭이 그대로
     그려진다 = Δ0 락(y3827-4072)이 정적 상태에서 자동으로 유지된다.
   ★ tabn 레이어는 기본이 숨김이고, 현재 탭만 되살린다. 1번 탭 레이어까지
     전부 tabn 을 달아야 규칙이 대칭이 된다(안 그러면 1번이 항상 겹쳐 보인다). */
.landing_program [data-lp-tabset] [data-lp-tab] {
    display: none;
}

.landing_program [data-lp-tabset][data-lp-cur="1"] [data-lp-tab="1"],
.landing_program [data-lp-tabset][data-lp-cur="2"] [data-lp-tab="2"],
.landing_program [data-lp-tabset][data-lp-cur="3"] [data-lp-tab="3"],
.landing_program [data-lp-tabset][data-lp-cur="4"] [data-lp-tab="4"] {
    display: block;
}

/* 히트 영역 — 투명 line 레이어(go). 포커스 링은 접근성상 남긴다. */
.landing_program [data-lp-go] {
    cursor: pointer;
}

/* 본문 크로스페이드. 원본은 opacity 0.6s + 200ms 뒤 교체 — 같은 감각으로 맞춘다.
   높이는 text 위젯의 h 가 고정하므로 교체 중에도 아래가 밀리지 않는다. */
.landing_program p[data-lp-tabset],
.landing_program h2[data-lp-tabset] {
    transition: opacity 0.3s;
}

.landing_program [data-lp-tabset].is-lp-swapping {
    opacity: 0;
}

@media (prefers-reduced-motion: reduce) {

    .landing_program p[data-lp-tabset],
    .landing_program h2[data-lp-tabset] {
        transition: none;
    }
}

.landing_program .lp-scar-dot {
    border-radius: 50%;
}

/* ---------- 타이포 (흉터 실측 추가분) ----------
   가이드 10종 + 모공 실측 4종으로 커버되지 않는 조판이 흉터에 여럿 있다.
   전부 프레임 실측값(_spec.js / runs.js)이 근거다. */

/* "핵심만 먼저 살펴볼께요" — 17/18 (행간이 글자보다 작게 고정된 박스) */
.landing_program .lp-t--scar-sub {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(18 * var(--lp-u));
    font-weight: 400;
}

/* "엑소좀 서브시전" — 15/34 · #ff0000 (point 프리셋은 15/15 라 못 쓴다) */
.landing_program .lp-t--scar-point34 {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(34 * var(--lp-u));
    font-weight: 500;
    color: var(--lp-point);
}

/* "자주하는 질문" — 22/34 (h2 는 22/35) */
.landing_program .lp-t--scar-h34 {
    font-size: calc(22 * var(--lp-u));
    line-height: calc(34 * var(--lp-u));
    font-weight: 400;
}

/* 사례 슬라이드 날짜 스탬프 — 14/28 SemiBold (사진 위 흰 글씨) */
.landing_program .lp-t--scar-date {
    font-size: calc(14 * var(--lp-u));
    line-height: calc(28 * var(--lp-u));
    font-weight: 600;
}

/* "시술 전 / 시술 1년 경과" 캡션 — 17/31 Medium.
   cap_row 위젯에는 weight 옵션이 없어 굵기를 프리셋에 넣는다. */
.landing_program .lp-t--scar-cap-md {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(31 * var(--lp-u));
    font-weight: 500;
}

/* 후기 카드 이름 / ADD ON 포인트 — 17/30 Medium (컬러는 lp-ink-* 로 분리) */
.landing_program .lp-t--scar-17-30 {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(30 * var(--lp-u));
    font-weight: 500;
}

/* 후기 카드 메타(리뷰수·날짜) — 14/30 Medium · #afafaf */
.landing_program .lp-t--scar-meta {
    font-size: calc(14 * var(--lp-u));
    line-height: calc(30 * var(--lp-u));
    font-weight: 500;
}

/* "NAVER Real Review" — 19/16 Medium (박스 높이 16 고정) */
.landing_program .lp-t--scar-nrr {
    font-size: calc(19 * var(--lp-u));
    line-height: calc(16 * var(--lp-u));
    font-weight: 500;
}

/* 후기 서브카피 — 15/27 */
.landing_program .lp-t--scar-p27 {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(27 * var(--lp-u));
    font-weight: 400;
}

/* 프로세스 표 — 15/28 */
.landing_program .lp-t--scar-proc {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(28 * var(--lp-u));
    font-weight: 400;
}

/* 프로세스 표 2행 라벨 — 15/25 */
.landing_program .lp-t--scar-proc2 {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(25 * var(--lp-u));
    font-weight: 400;
}

/* 프로세스 각주 — 12.5/28 · #6f6f6f (모공 각주 10/14 #7c7c7c 와 다름) */
.landing_program .lp-t--scar-note {
    font-size: calc(12.5 * var(--lp-u));
    line-height: calc(28 * var(--lp-u));
    font-weight: 400;
}

/* 프로세스 별표 — 12/25 (인라인이 아니라 자기 좌표를 가진 별도 노드) */
.landing_program .lp-t--scar-star {
    font-size: calc(12 * var(--lp-u));
    line-height: calc(25 * var(--lp-u));
    font-weight: 400;
}

/* 팝업 버튼 라벨 — 16/20.4 Medium */
.landing_program .lp-t--scar-btn {
    font-size: calc(16 * var(--lp-u));
    line-height: calc(20.4 * var(--lp-u));
    font-weight: 500;
}

/* 사진 위 카피 슬라이드의 첫 줄만 17.7 SemiBold (문단 나머지는 17 Regular).
   Figma characterStyleOverrides 실측 — lp-em(Medium/#323232) 과는 다른 값이다. */
.landing_program .lp-scar-hd {
    font-size: calc(17.7 * var(--lp-u));
    font-weight: 600;
}

/* NAVER 로고 워드마크 그린 (실측 #1aa65a) */
.landing_program .lp-scar-naver {
    color: #1aa65a;
}

/* ---------- 컬러 / 자간 (흉터 실측 추가분) ----------
   .lp-ink-white 는 볼륨과 값이 같아 위쪽 "페이지 공용 유틸" 로 올렸다. */
.landing_program .lp-ink-ink {
    color: var(--lp-ink);
}

/* 후기 카드 메타 컬러 */
.landing_program .lp-ink-meta {
    color: #afafaf;
}

/* 프로세스 각주 컬러 */
.landing_program .lp-ink-note {
    color: #6f6f6f;
}

/* 자간 -4%(날짜 스탬프/각주/팝업 버튼) · +1%(NAVER Real Review) 는
   볼륨과 값이 같아 위쪽 "페이지 공용 유틸" 로 올렸다. */

/* ---------- 좌우 여백 (흉터 실측 추가분) ----------
   히어로 카피는 프레임 표준(20/35/60) 이 아니라 실측 x55·x57 에 놓여 있다
   (포인트와 h1 의 좌표가 2px 다른 것도 실측 그대로다). */
.landing_program .lp-pad-scar-pt {
    padding-left: calc(57 * var(--lp-u));
    padding-right: calc(20 * var(--lp-u));
}

.landing_program .lp-pad-scar-h1 {
    padding-left: calc(55 * var(--lp-u));
    padding-right: calc(20 * var(--lp-u));
}

/* ===== volume 전용 ===== */

/* 히어로 카피 좌 여백 — 실측 55(제목) / 57(포인트). 둘이 2px 어긋나 있는데
   왼쪽 정렬끼리라 디자이너 오차로 보이나, 실측 우선 원칙에 따라 그대로 둔다.
   (본문 공용 여백 35 와 다른 값이라 volume 전용으로 뺀다) */
.landing_program .lp-pad-vhero {
    padding-left: calc(55 * var(--lp-u));
    padding-right: calc(20 * var(--lp-u));
}

.landing_program .lp-pad-vhero2 {
    padding-left: calc(57 * var(--lp-u));
    padding-right: calc(20 * var(--lp-u));
}

/* 자간 -4%(CTA 버튼 라벨) 는 색소/흉터와 값이 같아 "페이지 공용 유틸" 로 올렸다. */

/* 섹션 라벨 여백 — 실측 x36 ("볼륨 리액터"/"MO 리액터실" 라벨만 본문 35 보다 1px 안쪽) */
.landing_program .lp-pad-vlabel {
    padding-left: calc(36 * var(--lp-u));
    padding-right: calc(20 * var(--lp-u));
}

/* 각주 여백 — 표 각주는 실측 x32 (본문 35 와 다름) */
.landing_program .lp-pad-vnote {
    padding-left: calc(32 * var(--lp-u));
    padding-right: calc(20 * var(--lp-u));
}

/* 다크 밴드 위 흰 카피(.lp-ink-white) 는 흉터와 값이 같아 "페이지 공용 유틸" 로 올렸다. */

/* 실측 추가 타입 — 가이드 10종 밖이지만 이 페이지에서 실제로 쓰인다 */
/* 섹션 소제목 : 19/34 (실측) */
.landing_program .lp-t--v19 {
    font-size: calc(19 * var(--lp-u));
    line-height: calc(34 * var(--lp-u));
    font-weight: 500;
}

/* 섹션 라벨 : 15/34 · #ff0000 (실측 — 행간이 폰트의 2배가 넘는 고정 박스) */
.landing_program .lp-t--v15x34 {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(34 * var(--lp-u));
    font-weight: 500;
    color: var(--lp-point);
}

/* 후기 헤더 "NAVER Real Review" : 19/16 · Inter Medium (실측 — 행간이 폰트보다 작다) */
.landing_program .lp-t--vrev {
    font-size: calc(19 * var(--lp-u));
    line-height: calc(16 * var(--lp-u));
    font-weight: 500;
}

/* 후기 리드 : 15/27 (실측 — p3 의 15/26 과 1px 다르다) */
.landing_program .lp-t--vlead {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(27 * var(--lp-u));
    font-weight: 400;
}

/* 자간 +1%("NAVER Real Review") 는 흉터와 값이 같아 "페이지 공용 유틸" 로 올렸다. */

/* 표 각주 : 13.5/25 · #a7a7a7 (실측) */
.landing_program .lp-t--vnote {
    font-size: calc(13.5 * var(--lp-u));
    line-height: calc(25 * var(--lp-u));
    font-weight: 500;
    color: #a7a7a7;
}

/* ---------- WIDGET[volume_overlay] ----------
   이미지 + 그 위에 얹히는 절대배치 카피. 리액터 카드(흰 카드에 제품컷 +
   가운데 빨간 라벨) 와 "가장 자연스러운 곡선"(풀폭 사진 위 흰 카피) 겸용. */
.landing_program .lp-vov {
    position: relative;
}

.landing_program .lp-vov__img {
    display: block;
    width: 100%;
    height: auto;
}

.landing_program .lp-vov__cap {
    position: absolute;
    left: 0;
    right: 0;
}

/* ---------- WIDGET[volume_cta] ----------
   실측: 알약 버튼 #f9f9f9 · h62 · 완전 라운드. 안에 라벨(16/20.4) +
   빨간 원(30x30) + 흰 화살표(15x15). */
.landing_program .lp-vcta {
    display: flex;
    justify-content: center;
}

.landing_program .lp-vcta__btn {
    position: relative;
    display: block;
    height: calc(62 * var(--lp-u));
    border: 0;
    border-radius: calc(31 * var(--lp-u));
    background: var(--lp-card-bg);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    padding: 0;
    text-decoration: none;
}

/* 라벨 박스 폭은 Figma 실측(=Sandoll 조판 기준 ink 폭)이라 Noto 로는 한 줄이
   안 들어가 2줄로 접힌다(실측 21 → 40.8). 한 줄 라벨이므로 nowrap 으로 고정하고
   넘치는 폭은 가운데 정렬로 좌우 대칭 처리한다. */
.landing_program .lp-vcta__label {
    position: absolute;
    left: 0;
    font-size: calc(16 * var(--lp-u));
    line-height: calc(20.4 * var(--lp-u));
    font-weight: 500;
    color: var(--lp-ink);
    text-align: center;
    white-space: nowrap;
}

.landing_program .lp-vcta__dot {
    position: absolute;
    width: calc(30 * var(--lp-u));
    height: calc(30 * var(--lp-u));
    border-radius: 50%;
    background: var(--lp-point);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- WIDGET[volume_slide] ----------
   공용 slide 위젯(cards/ba)과 나란한 volume 전용 3종.
   나브/스와이퍼 마크업은 공용과 동일한 클래스를 써서 런타임(JS)·CSS 를 그대로 탄다. */
/* imgcap — 이미지 + 캡션 (실측 279x396: 이미지 279x350 r30 → +15 캡션) */
.landing_program .lp-vsl__img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.landing_program .lp-vsl__cap {
    padding-left: calc(20 * var(--lp-u));
}

/* review — 네이버 후기 카드 (실측 280x422 · #ffffff · r30) */
.landing_program .lp-vsl__rev {
    background: #ffffff;
    border-radius: var(--lp-r-md);
    padding: calc(32 * var(--lp-u)) calc(25 * var(--lp-u)) 0;
}

.landing_program .lp-vsl__rev-img {
    display: block;
    width: calc(240 * var(--lp-u));
    height: calc(126 * var(--lp-u));
    object-fit: cover;
    border-radius: calc(18 * var(--lp-u));
    margin-left: calc(-5 * var(--lp-u));
}

/* 후기 본문은 Noto 조판 (원본도 NotoSansCJKkr) */
.landing_program .lp-vsl__rev-name {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(30 * var(--lp-u));
    font-weight: 500;
}

.landing_program .lp-vsl__rev-meta {
    font-size: calc(14 * var(--lp-u));
    line-height: calc(30 * var(--lp-u));
    font-weight: 500;
    color: #afafaf;
}

.landing_program .lp-vsl__rev-txt {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(26 * var(--lp-u));
    font-weight: 400;
}

/* addon — 디바이스 카드 (실측 279x500 · #f9f9f9 · r30).
   이미지는 카드 아래에 붙는다(설명 줄 수가 달라 흐름으로는 안 맞음 → bottom 고정) */
.landing_program .lp-vsl__addon {
    position: relative;
    background: var(--lp-card-bg);
    border-radius: var(--lp-r-md);
    padding: calc(40 * var(--lp-u)) calc(30 * var(--lp-u)) 0;
}

.landing_program .lp-vsl__addon-img {
    position: absolute;
    display: block;
    object-fit: cover;
    border-radius: calc(25 * var(--lp-u));
}

/* 피부층 라벨 — 이미지 위 흰 글씨, 우측 정렬.
   ⚠ Figma 박스는 19~20 인데 행간은 31(고정 높이 텍스트) → 글리프는 박스 top
     기준 31 행상자 안에 놓인다. 그래서 행간 31 을 그대로 쓰고 top 을 실측대로 준다. */
.landing_program .lp-vsl__layer {
    position: absolute;
    font-size: calc(12.4 * var(--lp-u));
    line-height: calc(31 * var(--lp-u));
    font-weight: 500;
    color: #ffffff;
    text-align: right;
    white-space: pre;
}

.landing_program .lp-vsl__layer-en {
    font-family: "NeueHaasUnicaPro", sans-serif;
    font-size: calc(13.5 * var(--lp-u));
}

/* ---------- WIDGET[volume_table] ----------
   실측(y4370-4709 · 코드기준): 가로 스크롤 비교표.
   - 뷰포트 x35-390(355). 3번째 열(x372~)은 프레임 밖 → 가로 스크롤로 드러난다.
   - 라벨 열은 스크롤해도 남는다(sticky). Figma 의 Rectangle 797(157x296 ·
     #1a1a1a · LAYER_BLUR 45)이 그 근거 — 밴드와 같은 색이라 눈엔 안 보이고,
     밑으로 지나가는 스크롤 콘텐츠를 가리는 마스크다. blur 45 의 부드러운
     오른쪽 경계는 그라디언트로 옮긴다.
   - 스크롤바는 실측 h2 · 트랙 #676767 · 썸 #cccccc → 네이티브 스크롤바를 그대로 꾸민다. */
/* 뷰포트는 x35 에서 프레임 오른쪽 끝까지(실측 355) — 오른쪽 여백이 있으면
   3번째 열이 잘려 스크롤로도 안 드러난다. */
.landing_program .lp-vtbl {
    position: relative;
    margin-left: calc(35 * var(--lp-u));
    margin-right: 0;
}

/* 구분선은 스크롤 콘텐츠(565)가 아니라 뷰포트 폭이다(실측 x35-390) →
   스크롤 컨테이너 밖에 두고, 라벨 열의 페이드(z-index 2)보다 위에 그린다. */
.landing_program .lp-vtbl__line {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 3;
    height: 1px;
    background: #676767;
}

/* ⚠ 네이티브 스크롤바(::-webkit-scrollbar)로는 이 디자인을 못 만든다:
   모바일(iOS/안드로이드)과 요즘 크로미움은 오버레이 스크롤바라 "가만히 있을 때"
   안 보이고 레이아웃 공간도 안 먹는다(clientHeight == offsetHeight 로 확인).
   실측은 항상 보이는 2px 바(트랙 #676767 / 썸 #cccccc)라 DOM 으로 직접 그린다. */
.landing_program .lp-vtbl__scroll {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
}

.landing_program .lp-vtbl__scroll::-webkit-scrollbar {
    display: none;
}

/* 스크롤 인디케이터 — 트랙은 뷰포트 폭(실측 355 · x35-390), 썸은
   뷰포트/콘텐츠 비율(355/565 = 62.8% → 223 = 실측 썸 폭과 일치).
   썸 위치는 런타임(landing_program.js)이 scrollLeft 에 맞춰 옮긴다. */
.landing_program .lp-vtbl__bar {
    position: absolute;
    left: 0;
    right: 0;
    height: calc(2 * var(--lp-u));
    border-radius: 1px;
    background: #676767;
    overflow: hidden;
}

.landing_program .lp-vtbl__thumb {
    height: calc(2 * var(--lp-u));
    border-radius: 1px;
    background: #cccccc;
}

.landing_program .lp-vtbl__inner {
    position: relative;
}

.landing_program .lp-vtbl__cell {
    position: absolute;
    white-space: pre-line;
}

.landing_program .lp-vtbl__head {
    font-size: calc(15 * var(--lp-u));
    line-height: calc(20 * var(--lp-u));
    font-weight: 500;
    color: #969696;
}

.landing_program .lp-vtbl__tag {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(20 * var(--lp-u));
    font-weight: 500;
    color: #ffffff;
}

.landing_program .lp-vtbl__way {
    font-size: calc(17 * var(--lp-u));
    line-height: calc(25 * var(--lp-u));
    font-weight: 500;
    color: #ffffff;
}

/* 라벨 열 — 가로 스크롤에도 남는다. 오른쪽 경계는 blur 45 를 옮긴 페이드. */
.landing_program .lp-vtbl__labels {
    position: sticky;
    left: 0;
    z-index: 2;
    height: 100%;
    background: linear-gradient(to right, #1a1a1a 0, #1a1a1a calc(110 * var(--lp-u)), rgba(26, 26, 26, 0) calc(138 * var(--lp-u)));
}

.landing_program .lp-vtbl__label {
    position: absolute;
    font-size: calc(17 * var(--lp-u));
    line-height: calc(20 * var(--lp-u));
    font-weight: 500;
    color: var(--lp-point);
    white-space: pre;
}

/* 목록 불릿 — 실측 7x7 흰 원(Ellipse 91 · x35 · y4311).
   원본은 텍스트 앞에 공백을 넣어 불릿 자리를 비워 뒀지만, .lp-t 가
   white-space:pre-line 이라 연속 공백이 접힌다 → 인라인 불릿으로 같은 결과를 만든다.
   행간 34 의 중앙 정렬이라 원 top = 텍스트 top + 13.5 ≒ 실측 14. */
.landing_program .lp-vbullet__dot {
    display: inline-block;
    width: calc(7 * var(--lp-u));
    height: calc(7 * var(--lp-u));
    border-radius: 50%;
    background: #ffffff;
    vertical-align: middle;
    margin-right: calc(7 * var(--lp-u));
}

/* ---------- WIDGET[volume_process] ----------
   실측(y10793-11023 · 코드기준): 원형 다이어그램이 아니라 좌측 라벨 + 흐름
   텍스트의 명세표. 화살표는 실측 stroke #252525 / 0.6 (모공의 #959595 와 다름).
   좌표는 모두 블록 좌상단 기준(= Figma 절대값 − 블록 top). */
.landing_program .lp-vproc {
    position: relative;
}

.landing_program .lp-vproc__t {
    position: absolute;
    white-space: pre-line;
    font-size: calc(15 * var(--lp-u));
    line-height: calc(28 * var(--lp-u));
    font-weight: 400;
}

.landing_program .lp-vproc__t--tight {
    line-height: calc(25 * var(--lp-u));
}

.landing_program .lp-vproc__star {
    position: absolute;
    font-size: calc(12 * var(--lp-u));
    line-height: calc(25 * var(--lp-u));
    font-weight: 700;
}

.landing_program .lp-vproc__arrow {
    position: absolute;
    overflow: visible;
}

.landing_program .lp-vproc__line {
    position: absolute;
    height: 1px;
    background: var(--lp-line);
}

.landing_program .lp-vproc__note {
    position: absolute;
    font-size: calc(12.5 * var(--lp-u));
    line-height: calc(28 * var(--lp-u));
    font-weight: 400;
    color: #6f6f6f;
    white-space: pre;
}

/* ===== vpro 전용 ===== */
/* Figma 2989:1839 "페이스리액터 프로그램 V" · 캔버스 2989:1809 "2409_리프팅 랜딩".
   ⚠ 이 페이지만 설계 세대가 다르다 — 폭 400(나머지는 390) · 본문 여백 30(나머지 35).
     2024-09 손조판이라 디자인시스템(2026 가이드) 이전 파일이다. 사용자 결정:
     "디자인은 피그마를 무조건 기준" → 실측값을 그대로 쓴다.
   ⚠ 타이포는 fs/lh 조합이 29종인데 가이드 프리셋과 겹치는 건 4종뿐이라
     클래스로 만들지 않는다 — text/cap_row 위젯의 fs/lh 로 데이터에서 준다. */

/* 좌우 여백 — 실측 x 가 30/34/35/50 로 제각각이다(디자이너 눈대중).
   35 는 공용 lp-pad-text 로 덮이므로 나머지만 만든다.
   volume 이 vhero(55)/vhero2(57) 로 2px 어긋남을 각자 둔 것과 같은 원칙. */
.landing_program .lp-pad-vp30 {
    padding-left: calc(30 * var(--lp-u));
    padding-right: calc(30 * var(--lp-u));
}

.landing_program .lp-pad-vp33 {
    padding-left: calc(33 * var(--lp-u));
    padding-right: calc(33 * var(--lp-u));
}

.landing_program .lp-pad-vp34 {
    padding-left: calc(34 * var(--lp-u));
    padding-right: calc(34 * var(--lp-u));
}

.landing_program .lp-pad-vp37 {
    padding-left: calc(37 * var(--lp-u));
    padding-right: calc(37 * var(--lp-u));
}

.landing_program .lp-pad-vp50 {
    padding-left: calc(50 * var(--lp-u));
    padding-right: calc(50 * var(--lp-u));
}

/* 잉크 — 기존 토큰과 하나도 안 겹치는 5종(실측 8회).
   #000 은 순검정이라 공용 ink(#323232)와 다르다 — 히어로 h1 전용. */
.landing_program .lp-ink-k {
    color: #000000;
}

.landing_program .lp-ink-dc {
    color: #dcdcdc;
}

.landing_program .lp-ink-b5 {
    color: #b5b5b5;
}

.landing_program .lp-ink-a5 {
    color: #a5a5a5;
}

.landing_program .lp-ink-a8 {
    color: #a8a8a8;
}

/* 부분강조 Bold — 공용 lp-em 은 w500 이다. vpro 인트로의 강조 런은 w700 이라
   (styleOverrideTable 203) 얹어 쓴다: em.lp-em.lp-em-bd.
   ⚠ 같은 런의 fs 17.808(본문 18.02)은 옮기지 않는다 — 0.21px 차이는
     Sandoll→Noto 폰트 치환 오차보다 작고 개행은 br 로 고정돼 있어 무의미하다. */
.landing_program .lp-em-bd {
    font-weight: 700;
}

/* 부분강조 SemiBold — newpore 캐러셀 캡션의 1줄차가 SDGothicNeoa-**fSm**(600),
   2~3줄차가 dRg(400) 다(characterStyleOverrides 전수 확인 · 노드 base eMd 는 전부 덮여 거짓).
   ⚠ 공용 lp-em 을 얹어 쓰지 않는다 — lp-em 은 color:var(--lp-ink) 를 강제해서
     **흰 캡션(슬라이드 1)이 검게 바뀐다**. 그래서 색을 안 건드리는 단독 클래스다
     (em 기본 이탤릭만 끈다). 사용: em.lp-em-sm */
.landing_program .lp-em-sm {
    font-style: normal;
    font-weight: 600;
}

/* newpore S4 슬라이드의 네이버 팔로워 목록 목업 (Group 563 · 전체 opacity 0.6) */
.landing_program .lp-ink-g86 {
    color: #868686;
}

.landing_program .lp-ink-nv {
    color: #2c67ed;
}

/* newpore 본문 좌우 여백 40 (기존 4랜딩 35 · vpro 30 — 설계 세대마다 다르다) */
.landing_program .lp-pad-np40 {
    padding-left: calc(40 * var(--lp-u));
    padding-right: calc(40 * var(--lp-u));
}

/* newpore "리액터의 핵심" 본문(4713 · 박스 x50-349 · 299폭) 좌측 들여쓰기 50.
   좌변(50)이 글자 시작점이라 반드시 맞춘다. 우변은 좌정렬 + br 고정 개행이라
   보이지 않지만, Noto 가 원본 Sandoll 보다 넓어 Figma 박스(299)를 그대로 주면
   4번째 줄이 재줄바꿈된다 → 우변을 줄여 콘텐츠 폭을 넉넉히(325) 준다. */
.landing_program .lp-pad-np50 {
    padding-left: calc(50 * var(--lp-u));
    padding-right: calc(15 * var(--lp-u));
}

/* 글자 그라디언트는 CSS 클래스가 아니라 text 위젯의 grad 필드다(데이터).
   ⚠ 2026-07-17 .lp-ink-vgrad 를 지우고 옮긴 이유:
     Figma 의 그라디언트 핸들은 **텍스트 박스에 정규화**돼 저장된다 → 디자이너가
     같은 그라디언트를 복사해 붙여도 박스 종횡비가 다르면 실제 각도가 달라진다.
     vpro 4곳이 전부 다르다 — y938 113.3° / y4382 112.6° / y10173 105.9° /
     y10851 105.9°(끝색마저 #535353). 토큰 1개로는 담을 수 없다.
   핸들 → CSS 환산법(재발명 금지):
     · 각도 = atan2(dx, -dy), dx/dy 는 핸들을 박스 실치수로 스케일한 벡터
     · 스톱 % = 박스 중심을 지나는 그라디언트선(L = |W·sinθ| + |H·cosθ|)에 투영
       (Figma 핸들은 박스 밖으로 나가 있어 그대로 쓰면 색 범위가 과장된다)
   검산: 이 식이 예전 경험적 피팅값(113.3deg / -12.5% / 122.6%)을 그대로 재현한다. */

/* ----- vpro_slide — 점(dots) 캐러셀 -----
   이 페이지의 캐러셀 7개는 전부 점 방식이다(화살표 0개, 실측 전수).
   기존 slide/scar_slide/volume_slide 는 전부 우측 상단 화살표 알약이라
   내비 자체가 다르다 → scar_slide·volume_slide 와 같은 페이지별 변형 관례를
   따라 vpro_slide 를 새로 판다(공용 slide 는 pore 전용이라 건드리지 않는다).
   ※ .lp-slide 마크업 계약은 그대로 재사용한다 — landing_program.js 가
     [data-lp-slide] 로 Swiper(자동 3s·루프·IO 시작)를 물린다. */
.landing_program .lp-vslide__card {
    height: 100%;
    background: #f6f6f6;
    border-radius: calc(25 * var(--lp-u));
}

/* 점 — 실측 5x5 · 간격 8 · 가운데 정렬 · 활성 #35363a / 비활성 #d9d9d9.
   Swiper 기본 불릿(8px·투명도)과 달라 전부 덮어쓴다. */
.landing_program .lp-vslide__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: calc(8 * var(--lp-u));
}

.landing_program .lp-vslide__dots .swiper-pagination-bullet {
    width: calc(5 * var(--lp-u));
    height: calc(5 * var(--lp-u));
    margin: 0;
    border-radius: 50%;
    background: #d9d9d9;
    opacity: 1;
}

.landing_program .lp-vslide__dots .swiper-pagination-bullet-active {
    background: #35363a;
}

/* 패널 카드(S7·S9) — 제목/본문은 흐름, 이미지/캡션은 절대배치.
   슬라이드마다 이미지 위치·크기가 달라(S7 x23 y427 304x290 r15 /
   S9 x0 y443 350x321 풀블리드) 흐름으로는 못 맞춘다. */
.landing_program .lp-vslide__panel {
    position: relative;
    overflow: hidden;
}

.landing_program .lp-vslide__pimg {
    position: absolute;
    display: block;
    object-fit: cover;
}

/* kind='img' — 이미지 한 장이 곧 슬라이드(S11 · 400x353 풀블리드 / S15 · 250x315 r25).
   라운드는 위젯이 인라인으로 주입한다(round 필드) — 공용 ROUND 토큰에 25 가 없고,
   같은 kind 를 S11(0)과 S15(25)가 함께 쓰므로 CSS 에 못 박으면 안 된다. */
.landing_program .lp-vslide__img {
    display: block;
    width: 100%;
    object-fit: cover;
}

.landing_program .lp-vslide__pcap {
    position: absolute;
    display: block;
    white-space: nowrap;
}

/* 카드 안 절대배치 범용(icard 의 제목/본문). __pcap 과 달리 nowrap 이 아니다 —
   본문은 .lp-t 의 pre-line 으로 br/개행을 살려야 한다. */
.landing_program .lp-vslide__abs {
    position: absolute;
    display: block;
}

/* 탭 — 실측 x35 시작 · 간격 12 · 12/23 w500 ls-2% · 비활성 #dcdcdc / 활성 #323232.
   ⚠ 탭 폭은 지정하지 않는다(Figma 박스는 글자에 붙는 폭이라 폰트 파생값). */
.landing_program .lp-vslide__tabs {
    display: flex;
    gap: calc(12 * var(--lp-u));
    padding-left: calc(35 * var(--lp-u));
}

.landing_program .lp-vslide__tab {
    padding: 0;
    border: 0;
    background: none;
    font-size: calc(12 * var(--lp-u));
    line-height: calc(23 * var(--lp-u));
    font-weight: 500;
    letter-spacing: -0.02em;
    color: #dcdcdc;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.landing_program .lp-vslide__tab.is-on {
    color: #323232;
}

/* 350(DemiLight) — S7_1 캡션 실측(NotoSansCJKkr-DemiLight). 가변폰트가 아니면
   브라우저가 가장 가까운 굵기로 스냅한다. */
.landing_program .lp-w-dl {
    font-weight: 350;
}