/* =========================================================
   머니프렌즈 → 피니페이 이식 섹션
   - ③ 히어로 배너 (.hero-banner)
   - ② 반응형 도킹 CTA (.hero-cta-btn.big.docked)
   - ① 강조 CTA 배너 (.cta-banner)
   - ① 2단 소개 섹션 (.intro-split / .intro-phone / .ip-result)
   색상: 머니프렌즈 노랑·주황 → 피니페이 파랑(#1f00bb / #110163)
   ========================================================= */

/* ================ ③ 히어로 배너 ================ */
.hero-banner {
    background: #ffffff;
    padding: 0;
    margin-bottom: 0;
    text-align: center;
}

/* 상단 파란 계열 그라데이션: 하단은 0이라 모델 하단에서 배경이 끝남 */
.hero-top {
    background: linear-gradient(180deg, #ffffff 0%, #f5f5ff 60%, #e8ebff 100%);
    padding: 56px 0 0;
    font-size: 0; /* .hero-visual 아래 여백 제거 → 모델 하단과 배경 하단 일치 */
}

.hero-bottom {
    background: #ffffff;
    padding: 24px 0 0;
}

.hero-banner .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* font-size:0 상속 방지 */
.hero-top .container {
    font-size: 16px;
}

.hero-title {
    font-size: 48px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.3;
    margin-bottom: 20px;
    letter-spacing: -0.5px;
}

/* 헤드라인 스타일 메인 타이틀 (2색) */
.hero-title.headline {
    position: relative;
    z-index: 1;
    font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
    font-size: 52px;
    font-weight: 800;
    line-height: 1.18;
    letter-spacing: -1.5px;
    margin-top: 19px;
    margin-bottom: 14px;
}

.hero-title.headline .line-accent {
    color: #1f00bb;
}

.hero-title.headline .line-dark {
    color: #222222;
}

/* 서브 소제목 (회색) */
.hero-eyebrow {
    font-size: 18px;
    font-weight: 500;
    color: #7a7a7a;
    margin-bottom: 0;
    letter-spacing: -0.3px;
}

/* 모델 크레딧 (한글 검정 / 영문 짙은 남색) — 이미지 워터마크 대체 */
.hero-credit {
    font-size: 13px;
    font-weight: 600;
    color: #111111;
    letter-spacing: -0.2px;
    margin-top: 8px;
    margin-bottom: 0;
    line-height: 1.3;
}

.hero-credit .en {
    color: #110163;
    font-weight: 700;
    letter-spacing: 0.5px;
    margin-left: 5px;
}

.hero-visual {
    position: relative;
    display: block;
    margin-bottom: 0;
    margin-top: 40px;
    line-height: 0;
    z-index: 5;
}

.hero-stage {
    position: relative;
    width: 760px;
    max-width: 100%;
    height: 520px;
    margin-left: auto;
    margin-right: auto;
    padding-top: 0;
    overflow: hidden;
}

/* 인물 뒤 은은한 후광 링 (홀로그램 느낌 유지) */
.hero-circle {
    position: absolute;
    bottom: -68px;
    left: 50%;
    transform: translateX(-50%);
    width: 500px;
    height: 500px;
    border-radius: 50%;
    background: transparent;
    z-index: 0;
    pointer-events: none;
}

.hero-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(
        from 210deg,
        rgba(180, 190, 255, 0.9) 0%,
        rgba(190, 240, 240, 0.85) 22%,
        rgba(200, 215, 255, 0.85) 45%,
        rgba(215, 205, 255, 0.9) 62%,
        rgba(200, 210, 255, 0.85) 78%,
        rgba(180, 190, 255, 0.9) 100%
    );
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    mask-composite: exclude;
    filter: blur(4px);
    opacity: 0.75;
}

.hero-circle::after {
    content: "";
    position: absolute;
    inset: 4%;
    border-radius: 50%;
    background:
        radial-gradient(circle at 30% 40%, rgba(175, 185, 255, 0.42) 0%, rgba(175, 185, 255, 0) 55%),
        radial-gradient(circle at 28% 62%, rgba(185, 225, 240, 0.40) 0%, rgba(185, 225, 240, 0) 52%),
        radial-gradient(circle at 74% 38%, rgba(198, 210, 255, 0.42) 0%, rgba(198, 210, 255, 0) 55%),
        radial-gradient(circle at 72% 66%, rgba(210, 205, 250, 0.40) 0%, rgba(210, 205, 250, 0) 55%),
        radial-gradient(circle at 60% 82%, rgba(205, 214, 255, 0.32) 0%, rgba(205, 214, 255, 0) 50%),
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0) 72%);
    filter: blur(16px);
    opacity: 0.85;
}

.hero-model {
    position: absolute;
    bottom: -18px;
    left: 50%;
    /* 이미지 안에서 인물 몸통이 왼쪽으로 치우쳐 있어(-41%로) 무게중심을 무대 정중앙에 맞춤 */
    transform: translateX(-41%);
    z-index: 1;
    max-height: 520px;
    width: auto;
    display: block;
}

/* ================ ② hero CTA 버튼 (반응형 도킹) ================ */
.hero-cta-btn {
    display: inline-block;
    margin: 18px auto 0;
    padding: 16px 40px;
    background: var(--maincolor);
    color: #fff;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(31, 0, 187, 0.35);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}

.hero-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(31, 0, 187, 0.45);
}

/* 인물 아래 큰 CTA 버튼 */
.hero-cta-btn.big {
    display: block;
    position: relative;
    z-index: 20;
    width: 100%;
    max-width: 480px;
    margin: 40px auto 0;
    padding: 24px 0;
    background: var(--maincolor);
    color: #ffffff;
    font-size: 24px;
    font-weight: 700;
    border-radius: 18px;
    letter-spacing: -0.3px;
    box-shadow: 0 8px 24px rgba(31, 0, 187, 0.3);
}

.hero-cta-btn.big:hover {
    transform: translateY(-4px);
    background: #1a00a0;
    box-shadow: 0 12px 30px rgba(31, 0, 187, 0.4);
}

/* 스크롤을 내려 원래 위치를 지나면 같은 버튼이 화면 하단에 고정됨 */
.hero-cta-btn.big.docked {
    position: fixed;
    top: auto;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    width: calc(100% - 40px);
    max-width: 480px;
    z-index: 900;
    box-shadow: 0 8px 28px rgba(31, 0, 187, 0.35);
}

.hero-cta-btn.big.docked:hover {
    transform: translateX(-50%) translateY(-3px);
    background: #1a00a0;
}

/* ================ ① 강조 CTA 배너 ================ */
.cta-banner {
    background-color: #ffffff;
    padding: 80px 0;
    text-align: center;
}

.cta-banner .container {
    max-width: 640px;
    margin: 0 auto;
    padding: 0 20px;
}

.cta-banner-title {
    font-size: 40px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.3;
    letter-spacing: -0.5px;
    margin-bottom: 26px;
}

.cta-banner-title .accent {
    color: #1f00bb;
}

/* 지폐 이모지 (동전 CSS 대체) */
.cta-banner-title .money-emoji {
    display: inline-block;
    font-size: 0.95em;
    vertical-align: middle;
    position: relative;
    top: -0.05em;
    margin: 0 4px;
    line-height: 1;
}

/* 동전 아이콘 (기기 무관하게 항상 금색 동전) */
.cta-banner-title .coin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.9em;
    height: 0.9em;
    vertical-align: middle;
    position: relative;
    top: -0.06em;
    margin: 0 3px;
    border-radius: 50%;
    background: radial-gradient(circle at 32% 28%, #ffe27a 0%, #ffc42e 45%, #f5a300 100%);
    box-shadow: inset 0 0 0 0.055em #e59200, 0 1px 2px rgba(180, 110, 0, 0.35);
}

.cta-banner-title .coin .coin-mark {
    font-size: 0.5em;
    font-weight: 900;
    color: #b06f00;
    line-height: 1;
}

/* 숫자 카운트업 */
.cta-banner-title .count-up {
    display: inline-block;
    font-variant-numeric: tabular-nums;
    min-width: 1.6em;
    text-align: right;
}

.cta-banner-sub {
    font-size: 19px;
    font-weight: 500;
    color: var(--text-color2);
    line-height: 1.55;
    margin-bottom: 18px;
}

.cta-banner-sub strong {
    display: inline-block;
    margin-top: 4px;
    color: #1f00bb;
    font-weight: 800;
}

.cta-banner-chevron {
    color: #c2c2c2;
    font-size: 26px;
    margin-bottom: 34px;
    animation: ctaChevronBounce 1.6s ease-in-out infinite;
}

@keyframes ctaChevronBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(6px); }
}

.cta-banner-btn {
    display: block;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
    padding: 22px 0;
    background: linear-gradient(180deg, #3a1fd6 0%, #1f00bb 55%, #150182 100%);
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 14px;
    letter-spacing: -0.3px;
    transition: transform 0.2s, background 0.2s;
}

.cta-banner-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #2f18b0 0%, #180190 55%, #100160 100%);
}

/* 한도조회 버튼: 파란 배경 + 흰 굵은 텍스트 */
.cta-banner-btn.limit-check {
    background: var(--maincolor);
    color: #ffffff;
    font-weight: 700;
}

.cta-banner-btn.limit-check:hover {
    background: #1a00a0;
}

/* ================ ① 2단 소개 섹션 ================ */
.intro-split {
    padding: 80px 0;
    background: #ffffff;
}

.intro-split-wrap {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 40px;
}

.intro-split-text {
    flex: 1 1 auto;
    max-width: 460px;
}

.intro-split-eyebrow {
    font-size: 21px;
    font-weight: 800;
    color: #1f00bb;
    letter-spacing: -0.3px;
    margin: 0 0 14px;
}

.intro-split-title {
    font-size: 32px;
    font-weight: 800;
    color: #1a1a1a;
    line-height: 1.3;
    letter-spacing: -1px;
    margin: 0 0 20px;
    white-space: nowrap;
}

.intro-split-desc {
    font-size: 17px;
    font-weight: 500;
    color: #4a4a4a;
    line-height: 1.7;
    letter-spacing: -0.3px;
    margin: 0 0 34px;
}

.intro-split-desc .muted {
    color: #9a9a9a;
}

.intro-split-btn {
    display: inline-block;
    background: var(--maincolor);
    color: #ffffff;
    font-size: 16px;
    font-weight: 700;
    text-decoration: none;
    padding: 15px 34px;
    border-radius: 12px;
    transition: transform 0.2s ease, background 0.2s ease;
}

.intro-split-btn:hover {
    transform: translateY(-3px);
    background: #1a00a0;
}

/* 오른쪽 폰 목업 */
.intro-split-visual {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.intro-phone {
    position: relative;
    width: 820px;
    max-width: 100%;
    margin-right: -60px;
    container-type: inline-size;
}

.intro-phone-frame {
    display: block;
    width: 100%;
    height: auto;
    filter: drop-shadow(24px 30px 34px rgba(0, 0, 0, 0.22));
}

.intro-phone-screen {
    position: absolute;
    top: 13%;
    left: 33%;
    width: 34%;
    height: 70%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: transparent;
    border-radius: 14% / 6.5%;
}

/* 한도 조회 결과 화면(모바일) 재현 - 폰 폭(cqw) 기준 비례 스케일 */
.ip-result {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 5cqw 3cqw 4cqw;
}

.ip-confetti {
    font-size: 3.4cqw;
    line-height: 1;
    margin-bottom: 1cqw;
    animation: ipBounce 0.6s ease infinite alternate;
}

@keyframes ipBounce {
    from { transform: translateY(0); }
    to { transform: translateY(-4px); }
}

.ip-result-badge {
    background: #f5f5ff;
    border: 0.25cqw solid var(--maincolor);
    border-radius: 50px;
    padding: 0.7cqw 2cqw;
    font-size: 1.6cqw;
    font-weight: 600;
    color: #1f00bb;
    margin-bottom: 1.2cqw;
}

.ip-result-amount {
    font-size: 4.6cqw;
    font-weight: 800;
    color: #222;
    line-height: 1.1;
    letter-spacing: -0.6px;
    white-space: nowrap;
    margin-bottom: 1cqw;
}

.ip-result-amount span {
    color: #1f00bb;
}

.ip-result-title {
    display: inline-block;
    font-size: 1.8cqw;
    font-weight: 700;
    color: #1f00bb;
    background: #f5f5ff;
    border-radius: 30px;
    padding: 0.7cqw 1.8cqw;
    margin-bottom: 1.2cqw;
    letter-spacing: -0.4px;
    white-space: nowrap;
}

.ip-result-desc {
    font-size: 1.55cqw;
    color: #888;
    line-height: 1.45;
    margin-bottom: 1.8cqw;
}

.ip-result-desc strong {
    color: #555;
}

.ip-result-kakao {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    width: 100%;
    padding: 1.8cqw 0;
    background: #FEE500;
    border-radius: 2cqw;
    font-size: 1.95cqw;
    font-weight: 700;
    color: #222;
    box-shadow: 0 0.5cqw 1.5cqw rgba(254, 229, 0, 0.4);
}

.ip-result-kakao i,
.ip-result-tel i {
    font-size: 1em;
    line-height: 1;
}

.ip-result-divider {
    width: 100%;
    border: none;
    border-top: 1px solid #f0f0f0;
    margin: 1.4cqw 0;
}

.ip-result-tel {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1cqw;
    width: 100%;
    padding: 1.6cqw 0;
    background: #f7f7f7;
    border-radius: 2cqw;
    font-size: 1.8cqw;
    font-weight: 600;
    color: #444;
}

.ip-result-notice {
    margin-top: 1.4cqw;
    font-size: 1.25cqw;
    color: #bbb;
    line-height: 1.4;
}

/* ================ 랜딩 전용 플로팅 (카톡·전화 버튼 숨김, 말풍선만) ================ */
/* index.html(body.landing)에서만 적용 — 다른 페이지는 기존 플로팅 버튼 유지 */
body.landing .floating .floating_btn {
    display: none !important;
}

/* 버튼이 없으므로 말풍선 자체를 플로팅 컨테이너의 내용으로 표시 */
body.landing .floating_bubble {
    position: static;
    right: auto;
    bottom: auto;
}

/* ================ 반응형 (모바일 ≤768px) ================ */
@media (max-width: 768px) {
    /* 랜딩: 말풍선을 하단 도킹 CTA(한도조회) 버튼 위로 올림 */
    body.landing .floating {
        right: 16px;
        bottom: max(96px, calc(env(safe-area-inset-bottom) + 96px));
    }

    /* 히어로 */
    .hero-banner { padding: 0; }
    .hero-top { padding: 45px 0 0; }

    .hero-title.headline {
        font-size: 34px;
        line-height: 1.2;
        margin-top: 19px;
        margin-bottom: 8px;
    }

    .hero-eyebrow {
        font-size: 14px;
        margin-bottom: 0;
    }

    .hero-visual {
        margin-bottom: 0;
        margin-top: 45px;
        width: 100%;
    }

    .hero-stage {
        width: 100%;
        max-width: 380px;
        height: 350px;
        margin: 0 auto;
        overflow: hidden;
    }

    .hero-circle {
        width: 340px;
        height: 340px;
        top: auto;
        bottom: -108px;
    }

    .hero-model {
        max-height: 350px;
        bottom: 0;
    }

    .hero-cta-btn.big {
        max-width: 340px;
        margin: 60px auto 0;
        padding: 18px 0;
        font-size: 19px;
    }

    .hero-bottom { padding: 0; }

    /* 강조 CTA 배너 */
    .cta-banner { padding: 64px 0 56px; }
    .cta-banner-title {
        font-size: 28px;
        margin-bottom: 20px;
    }
    .cta-banner-sub {
        font-size: 15px;
        margin-bottom: 14px;
    }
    .cta-banner-chevron {
        font-size: 22px;
        margin-bottom: 26px;
    }
    .cta-banner-btn {
        max-width: 340px;
        padding: 18px 0;
        font-size: 17px;
    }

    /* 2단 소개 섹션 - 세로 스택 */
    .intro-split { padding: 50px 0 0; }

    .intro-split-wrap {
        flex-direction: column;
        gap: 12px;
        text-align: center;
    }

    .intro-split-text {
        max-width: 100%;
        order: 1;
    }

    .intro-split-eyebrow {
        font-size: 19px;
        margin-bottom: 10px;
    }

    .intro-split-title {
        font-size: 22px;
        margin-bottom: 16px;
        white-space: nowrap;
    }

    .intro-split-desc {
        font-size: 15px;
        margin-bottom: 26px;
    }

    .intro-split-btn {
        width: auto;
        min-width: 140px;
        max-width: 180px;
        padding: 14px 24px;
        border-radius: 50px;
    }

    .intro-split-visual {
        order: 2;
        width: 100%;
        position: relative;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        height: 132vw;
        max-height: 540px;
        margin-top: -8px;
        margin-bottom: 0;
    }

    .intro-phone {
        display: block;
        width: 132vw;
        max-width: 720px;
        flex: 0 0 auto;
        margin: 0;
        filter: none;
    }

    .intro-phone-frame {
        filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.18));
    }
}