/* ── 첫 화면 성혼책임제 안내 그림 (2026-10-17 대표님) ──────────────────────────
   "PART 1. 인연의 집 시스템"(.section01 · #faf7f6) 칸과 PART 02 "사람을 더 깊게 봅니다"(Relationship Scan) 칸 사이 — home.blade.php .home_pledge.
   그림은 관리자 [홈페이지 › 이미지 관리 › 메인] 의 두 자리 — PC 화면(.hpl_pic.hpl_pc · 901px 이상) · 휴대폰 화면(.hpl_pic.hpl_m · 900px 이하).
   (2026-10-18 대표님 "휴대폰용 그림 자리도 따로") 두 그림이 함께 적히고 화면 폭에 맞는 하나만 보인다.
   한쪽 자리를 모두 끄면 그 화면에서만 칸이 사라진다 — .no-pc(PC 그림 없음) · .no-m(휴대폰 그림 없음).
   PC     : 위 칸 바탕(#faf7f6)을 이어 가운데 — 그림 전체가 한 화면에 들어오는 크기 (대표님 "한 화면에 다 보이게").
            폭 = 칸 폭 · 1000px · 그림 가로(--w · 키우지 않음) · (화면 높이 − 150px) × 가로세로 비(--r) 가운데 가장 작은 것.
            901~1370 은 오른쪽 고정 메뉴(.fixed_left · 폭 70px)를 피해 좌우 90px (영상 칸 .home_film 과 같음).
   휴대폰 : 화면 폭에 꽉 차게(가장자리까지) — 세로로 긴 그림이나 가로로 눕힌 휴대폰은 한 화면 높이 안으로.
   높이는 <img> 의 width · height(실제 그림 크기)로 먼저 정해진다 — 그림이 늦게 와도 아래 칸이 밀리지 않는다.
   ──────────────────────────────────────────────────────────────── */
.home_pledge { position: relative; padding: 0 20px 100px; background: #faf7f6; }
.home_pledge .hpl_in { position: relative; }

/* 그림 하나를 감싼 칸 — 그림과 크기가 같아서, 그 위에 누르는 곳(.hpl_hit)을 그림 비율 자리에 얹는다 */
.home_pledge .hpl_pic {
    position: relative;
    margin: 0 auto;
    width: 100%;
    max-width: 1000px;
    width: min(100%, 1000px, var(--w, 1254px), calc((100vh - 150px) * var(--r, 1)));
    border-radius: 14px;
    box-shadow: 0 26px 60px -30px rgba(70, 48, 16, .45);
}

.home_pledge .hpl_pic img { display: block; width: 100%; height: auto; border-radius: inherit; }

/* PC — 휴대폰 그림은 숨김 · PC 그림이 모두 꺼졌으면 칸이 없음 */
.home_pledge .hpl_pic.hpl_m { display: none; }
.home_pledge.no-pc { display: none; }

/*
 * 그림 속 두 단추 자리 (2026-10-18 대표님 "버튼 연결") — 지금 그림(1254×1254)의 단추 자리 비율.
 *  「환급 기준 자세히 보기」 흰 단추 가로 353~899 · 세로 773~863 / 「성혼책임제 알아보기」 금빛 단추 가로 353~899 · 세로 884~974.
 *  누르는 곳은 위아래로 조금 넓혀 두 단추 사이 가운데(873.5)에서 나눈다 — 휴대폰에서도 손가락으로 누르기 쉽게.
 *  올림 · 누름 · 초점일 때의 움직임은 아래 "단추 움직임" (.hpl_btn).
 */
.home_pledge .hpl_hit {
    position: absolute;
    left: 27.67%;
    width: 44.5%;
    height: 8.81%;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: transparent;
    font: inherit;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    outline: none;
}

.home_pledge .hpl_hit_refund { top: 60.85%; }
.home_pledge .hpl_hit_consult { top: 69.66%; }

/*
 * 단추 움직임 (2026-10-18 대표님 — "카톡 상담" 단추의 반짝임을 그림 속 두 단추에 · 마우스 올림 · 누름도 자연스럽게 · 노란 바탕으로 바꾸지 않음)
 *  단추의 바탕 · 그라데이션 · 테두리 · 글자색은 그림 그대로다. 움직임은 그 위에 얹는 투명한 빛 · 그림자뿐이다.
 *   .hpl_btn  : 그림 속 단추와 꼭 같은 자리 · 모양(양끝 반원)의 칸 — 빛은 이 안에서만 지나간다(둥근 끝 밖으로 새지 않음).
 *   .hpl_face : 올리거나 누를 때만 보이는 "그 단추 그림" — 같은 그림(--img)을 같은 비율로 깔아 단추 부분만 보이게 한 것이라
 *               색 · 테두리 · 글자가 그림과 똑같다. 그래서 단추가 떠오르거나 눌리는 것처럼 움직일 수 있다(평소에는 투명).
 *   늘        : 카톡 상담과 같은 두 빛 — 은은한 사선 빛이 3초 동안 오갔다 돌아오고(goldShimmer) 흰 빛 띠가 2초마다 지나간다(shimmerWave).
 *               크림 단추는 흰빛만으로는 안 보여 빛 띠 가장자리에 옅은 금빛을 섞었다(바탕은 그대로 — 지나가는 빛만).
 *               세기는 카톡 상담(흰빛 0.6)보다 낮게 — 그만큼 세게 하면 금빛 단추가 잠깐 잿빛으로 보이고 크림 단추 글자가 흐려졌다(2026-10-18 찍어 확인).
 *   올림(PC)  : 3% 커지며 떠오름(아래 그림자 · 둘레에 옅은 금빛 번짐) · 빛 띠가 한 번 빠르게 지나감
 *   누름      : 제 크기로 내려앉으며 조금 어두워지고 안쪽 그늘 → 떼면 다시 떠오름(PC) · 톡 튀어 오름(휴대폰) · 빛 띠가 한 번 지나감
 *               (휴대폰은 손가락을 댈 때 — home-pledge.js 가 아주 짧게 눌러도 보이게 0.15초 붙잡는다)
 *               위로 옮기거나 작게 줄이지 않는다 — 그러면 밑의 그림 단추 테두리가 비쳐 테두리가 두 줄로 보였다(2026-10-18 확대해 확인).
 *               "단추 그림"은 늘 제 크기 이상이라 그림 단추를 다 덮는다.
 *   키보드 초점 : 올림과 같고 둘레에 흰 테두리
 *  단추 자리(지금 그림 1254×1254 의 픽셀 — 테두리까지) : 크림 가로 352.5~900.5 · 세로 772.5~864.5 / 금빛 가로 같음 · 세로 883.5~975.
 *  아래 숫자는 그것을 누르는 곳(.hpl_hit) 안의 비율 · 그림 깔기 비율로 옮긴 것 — 단추 배치가 다른 그림으로 바꾸면 누르는 곳 자리와 함께 맞춰야 한다.
 */
.home_pledge .hpl_btn {
    position: absolute;
    left: 0.989%;
    right: 0.809%;
    border-radius: 999px;
    overflow: hidden;
    isolation: isolate;
    pointer-events: none;
    transform: translateZ(0);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease;
}

.home_pledge .hpl_hit_refund .hpl_btn { top: 8.546%; bottom: 8.179%; }
.home_pledge .hpl_hit_consult .hpl_btn { top: 9.019%; bottom: 8.159%; }

/* "그 단추 그림" — 그림이 다 오면(home-pledge.js 가 .is-ready) 같은 그림을 깐다 · 늦게 받기(lazy)는 그대로 */
.home_pledge .hpl_face {
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background-repeat: no-repeat;
    opacity: 0;
    transition: opacity .2s ease, filter .2s ease;
}

.home_pledge .hpl_pic.is-ready .hpl_face { background-image: var(--img); }
.home_pledge .hpl_hit_refund .hpl_face { background-size: 228.832% 1363.043%; background-position: 49.929% 66.48%; }
.home_pledge .hpl_hit_consult .hpl_face { background-size: 228.832% 1370.492%; background-position: 49.929% 76%; }

/* 늘 — 은은한 사선 빛(카톡 goldShimmer 와 같은 3초 오감) */
.home_pledge .hpl_btn::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .12) 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
    background-size: 200% 200%;
    animation: hplSheen 3s ease infinite;
}

.home_pledge .hpl_hit_refund .hpl_btn::before {
    background-image: linear-gradient(135deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, .1) 50%, rgba(255, 255, 255, 0) 70%, rgba(255, 255, 255, 0) 100%);
}

/* 늘 — 지나가는 빛 띠(카톡 shimmerWave 와 같은 2초) · 금빛 단추는 흰빛 · 크림 단추는 흰빛 가운데에 옅은 금빛 가장자리 */
.home_pledge .hpl_btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .38), rgba(255, 255, 255, 0));
    transform: translateX(-100%);
    animation: hplWave 2s ease infinite;
}

.home_pledge .hpl_hit_refund .hpl_btn::after {
    background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(201, 164, 96, .14) 35%, rgba(255, 255, 255, .35) 50%, rgba(201, 164, 96, .14) 65%, rgba(255, 255, 255, 0) 100%);
}

/* 올림 · 누를 때 한 번 빠르게 지나가는 빛 + 눌렸을 때 안쪽 그늘 */
.home_pledge .hpl_flash {
    position: absolute;
    inset: 0;
    z-index: 2;
    border-radius: inherit;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 38%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 62%) no-repeat;
    background-size: 250% 100%;
    background-position: 120% 0;
    opacity: 0;
    transition: box-shadow .2s ease;
}

@media (hover: hover) and (pointer: fine) {
    .home_pledge .hpl_hit:hover .hpl_btn {
        transform: scale(1.03);
        box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 224, 160, .3);
    }

    .home_pledge .hpl_hit:hover .hpl_face { opacity: 1; }
    .home_pledge .hpl_hit:hover .hpl_flash { animation: hplFlash .8s ease-out; }
}

.home_pledge .hpl_hit:focus-visible .hpl_btn {
    transform: scale(1.03);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .9), 0 10px 20px -10px rgba(0, 0, 0, .6), 0 0 18px rgba(255, 224, 160, .3);
}

.home_pledge .hpl_hit:focus-visible .hpl_face { opacity: 1; }

/* 누름 — 마우스는 :active · 손가락은 home-pledge.js 의 .is-press — 제 크기로 내려앉고 조금 어둡게 · 안쪽 그늘 */
.home_pledge .hpl_hit:active .hpl_btn,
.home_pledge .hpl_hit.is-press .hpl_btn {
    transform: scale(1);
    box-shadow: 0 3px 8px -5px rgba(0, 0, 0, .55);
    transition-duration: .12s;
}

.home_pledge .hpl_hit:active .hpl_face,
.home_pledge .hpl_hit.is-press .hpl_face { opacity: 1; filter: brightness(.93); transition-duration: .08s; }

.home_pledge .hpl_hit:active .hpl_flash,
.home_pledge .hpl_hit.is-press .hpl_flash { box-shadow: inset 0 2px 7px rgba(0, 0, 0, .28); }

/* 누른 뒤 빛 띠 한 번 (.is-tap · 다른 이름의 움직임이라 올려 둔 채 눌러도 다시 지나간다) */
.home_pledge .hpl_hit.is-tap .hpl_flash { animation: hplFlashTap .7s ease-out; }

/* 마우스 올림이 없는 기기(휴대폰 · 태블릿) — 손을 떼면 톡 튀어 올랐다 제자리로 */
@media (hover: none) {
    .home_pledge .hpl_hit.is-tap .hpl_btn { animation: hplPop .45s cubic-bezier(.2, .8, .2, 1); }
    .home_pledge .hpl_hit.is-tap .hpl_face { animation: hplFaceShow .45s linear; }
}

@keyframes hplSheen {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes hplWave {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes hplFlash {
    0% { background-position: 120% 0; opacity: 1; }
    100% { background-position: -20% 0; opacity: 1; }
}

@keyframes hplFlashTap {
    0% { background-position: 120% 0; opacity: 1; }
    100% { background-position: -20% 0; opacity: 1; }
}

@keyframes hplPop {
    0% { transform: scale(1); }
    45% { transform: scale(1.035); }
    100% { transform: scale(1); }
}

@keyframes hplFaceShow {
    0%, 85% { opacity: 1; }
    100% { opacity: 0; }
}

@media screen and (min-width: 901px) and (max-width: 1370px) {
    .home_pledge { padding-left: 90px; padding-right: 90px; }
}

@media screen and (max-width: 900px) {
    .home_pledge { padding: 0 0 70px; }
    .home_pledge.no-pc { display: block; }
    .home_pledge.no-m { display: none; }
    .home_pledge .hpl_pic.hpl_pc { display: none; }
    .home_pledge .hpl_pic.hpl_m {
        display: block;
        max-width: none;
        width: min(100%, var(--w, 1254px), calc((100vh - 70px) * var(--r, 1)));
        width: min(100%, var(--w, 1254px), calc((100svh - 70px) * var(--r, 1)));
        border-radius: 0;
        box-shadow: none;
    }
}

/* 「환급 기준 자세히 보기」 창의 모양은 assets/css/refund-rules.css (2026-10-18 그림 창 → 글 창 · WHY 인연의 집과 함께 씀) */

/* 무료 상담 신청 칸 — 머리글에 가리지 않게 (단추가 내려가는 자리는 home-pledge.js 가 셈) */
#homeConsult { scroll-margin-top: 100px; }

/*
 * 상담 신청 칸 (2026-10-19 대표님 "성함 칸 더하기" · "인증 단추 숨기고 번호만")
 *  · 성함은 한 줄 전체(칸이 일곱이라 둘씩 짝이 안 맞음) — 입력칸은 왼쪽 칸들과 같은 폭으로 줄 맞춤
 *  · 연락처 인증 단추 · 인증번호 칸은 문자(알리고) 승인 전이라 숨기고, 연락처 입력칸을 칸 폭 가득
 */
#homeConsult .sub_txt li.namearea { width: 100%; }
#homeConsult .sub_txt li.namearea > p { width: calc(50% - 120px); }
#homeConsult .sub_txt .telarea .consult-verify { display: none !important; }
#homeConsult .sub_txt .telarea p input[type="text"] { width: 100%; }

@media screen and (max-width: 900px) {
    #homeConsult { scroll-margin-top: 56px; }
    #homeConsult .sub_txt li.namearea > p { width: calc(100% - 80px); }
}

/* 움직임 줄이기를 켠 기기 — 늘 도는 빛 · 떠오름 · 눌림 · 지나가는 빛은 끄고, 올림 · 초점의 그림자 · 테두리만 남긴다 */
@media (prefers-reduced-motion: reduce) {
    .home_pledge .hpl_btn::before,
    .home_pledge .hpl_btn::after { animation: none; opacity: 0; }
    .home_pledge .hpl_btn,
    .home_pledge .hpl_face,
    .home_pledge .hpl_flash { transition: none; }
    .home_pledge .hpl_hit:hover .hpl_btn,
    .home_pledge .hpl_hit:focus-visible .hpl_btn,
    .home_pledge .hpl_hit:active .hpl_btn,
    .home_pledge .hpl_hit.is-press .hpl_btn { transform: none; }
    .home_pledge .hpl_hit:hover .hpl_flash,
    .home_pledge .hpl_hit.is-tap .hpl_flash,
    .home_pledge .hpl_hit.is-tap .hpl_btn,
    .home_pledge .hpl_hit.is-tap .hpl_face { animation: none; }
}