:root {
    --maincolor: #ffc700;
    --subcolor: #ffa800;
    --bgcolor: #f7f7f7;
    --bgcolor2: #fffbef;

    --text-color1: #262626;
    --text-color2: #757575;

    --main-gradient: linear-gradient(135deg, var(--maincolor) 0%, var(--subcolor) 100%);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    word-break: keep-all;
}

html,
body {
    width: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;
    padding-top: 70px;
    position: relative;
}

.hide-pc {
    display: none !important;
}

.hide-mobile {
    display: block !important;
}

.title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    margin-bottom: 15px;
}

.subtitle {
    text-align: center;
    font-size: 18px;
    font-weight: 500;
    margin-bottom: 50px;
    color: var(--text-color2);
}

/* 스크롤 애니메이션 */
.fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: all 1s ease;
    visibility: hidden;
}

.fade-up.active {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
}

/* 딜레이 클래스 */
.delay-200 {
    transition-delay: 0.2s;
}

.delay-400 {
    transition-delay: 0.4s;
}

.delay-600 {
    transition-delay: 0.6s;
}

.delay-800 {
    transition-delay: 0.8s;
}

/* ================================== */

/* 헤더 */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 70px;
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
}

.header-container {
    max-width: 1200px;
    height: 100%;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-logo a {
    font-size: 22px;
    font-weight: bold;
    text-decoration: none;
    color: var(--text-color1);
}

.header-logo img {
    height: 28px;
    width: auto;
}

.nav-menu {
    position: relative;
    width: auto;
    height: auto;
    background-color: transparent;
    padding: 0;
    box-shadow: none;
}

.nav-menu .close-btn {
    display: none;
}

.nav-list {
    display: flex;
    list-style: none;
    gap: 2rem;
}

.nav-list a {
    text-decoration: none;
    color: var(--text-color1);
    font-size: 18px;
    font-weight: 700;
    transition: color 0.3s ease;
}

.nav-list a:hover {
    color: var(--maincolor);
}

.mobile-buttons {
    display: none;
    gap: 1rem;
}

.mobile-left-btn,
.mobile-menu-btn {
    display: none;
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text-color1);
    padding: 0.5rem;
}

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

/* 노란 그라데이션 영역: 상단 패딩만, 하단은 0이라 모델 셔츠 끝에서 배경이 끝남 */
.hero-top {
    background: linear-gradient(180deg, #ffffff 0%, #fffbec 60%, #fff6d6 100%);
    padding: 56px 0 0;
    font-size: 0; /* .hero-visual(inline-block) 아래 여백 제거 → 모델 하단과 배경 하단 정확히 일치 */
}

/* 흰 배경 영역: CTA 버튼 */
.hero-bottom {
    background: #ffffff;
    padding: 24px 0 0;
}

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

.hero-badge {
    display: inline-block;
    background-color: var(--maincolor);
    color: #fff;
    padding: 10px 28px;
    border-radius: 50px;
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 30px;
    box-shadow: 0 4px 12px rgba(255, 199, 0, 0.25);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: default;
}

.hero-badge:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 18px rgba(255, 199, 0, 0.35);
}

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

.hero-title .accent {
    color: #ffc700;
}

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

/* 헤드라인 스타일 메인 타이틀 (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: #ffc700;
}

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

.hero-subtitle {
    font-size: 18px;
    color: var(--text-color2);
    margin-bottom: 50px;
    font-weight: 500;
}

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

/* font-size:0 상속 방지: hero-top 내부 텍스트 복원 */
.hero-top .container {
    font-size: 16px;
}

/* 스테이지를 중앙 정렬 (display:block 전환에 따른 보정) */
.hero-stage {
    margin-left: auto;
    margin-right: auto;
}

.hero-banner .main-top-stats {
    position: relative;
    margin-top: -63px;
    margin-bottom: -55px;
    z-index: 5;
}

.hero-partners {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.hero-partners img {
    max-height: 36px;
    width: auto;
    opacity: 0.85;
}

.hero-stage {
    position: relative;
    width: 760px;
    max-width: 100%;
    height: 520px;
    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;
}

/* 영롱한 무지갯빛 링(테두리) - conic gradient를 링 모양으로 마스킹 */
.hero-circle::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    padding: 2px;
    background: conic-gradient(
        from 210deg,
        rgba(255, 236, 150, 0.9) 0%,
        rgba(190, 240, 210, 0.85) 22%,
        rgba(200, 225, 255, 0.85) 45%,
        rgba(240, 205, 245, 0.9) 62%,
        rgba(255, 220, 225, 0.85) 78%,
        rgba(255, 236, 150, 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(255, 240, 175, 0.42) 0%, rgba(255, 240, 175, 0) 55%),
        radial-gradient(circle at 28% 62%, rgba(185, 240, 205, 0.40) 0%, rgba(185, 240, 205, 0) 52%),
        radial-gradient(circle at 74% 38%, rgba(198, 224, 255, 0.42) 0%, rgba(198, 224, 255, 0) 55%),
        radial-gradient(circle at 72% 66%, rgba(232, 205, 250, 0.40) 0%, rgba(232, 205, 250, 0) 55%),
        radial-gradient(circle at 60% 82%, rgba(255, 214, 224, 0.32) 0%, rgba(255, 214, 224, 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%;
    transform: translateX(-50%);
    z-index: 1;
    max-height: 520px;
    width: auto;
    display: block;
}

.hero-signature {
    position: absolute;
    top: 120px;
    right: -40px;
    z-index: 3;
    width: 180px;
    height: auto;
    mix-blend-mode: multiply;
    pointer-events: none;
    transform: rotate(-4deg);
}

.hero-partners {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-top: 20px;
}

.hero-partners img {
    max-height: 36px;
    width: auto;
    opacity: 0.85;
}

/* ================ 메인 ================ */
main {
    margin: 0 auto;
}

.main-top {
    background: var(--bgcolor2);
    padding-bottom: 30px;
    position: relative;
    overflow: visible;
    background-size: cover;
    background-attachment: fixed;
}

.main-top .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}

.main-top-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    justify-content: space-around;
    padding: 50px 50px 0px;
    height: 520px;
}

.main-top .main-top-txt {}

.main-top .main-top-txt .main-title {
    font-family: "SBAggro", sans-serif;
    font-size: 58px;
    font-weight: 700;
    color: var(--maincolor);
    text-shadow: -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff, 2px 2px 0 #fff;
    margin-bottom: 20px;
    line-height: 1.2;
}

.main-top .main-top-txt .highlight {
    font-weight: 500;
    text-shadow: none;
    color: #fff;
    line-height: 0.7;

    position: relative;
    display: inline-block;
    z-index: 1;

    cursor: pointer;
    pointer-events: auto;
}

.main-top .main-top-txt .highlight.bg::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 168, 0, 0.8);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.main-top:hover .main-top-txt .highlight.bg::before {
    transform: scaleX(1);
}

.main-top .main-top-txt .main-subtitle {
    font-size: 24px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.2;
    margin-bottom: 0;
}

.main-top .main-top-img {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: flex-end;
}

.main-top .main-top-img img {
    width: 380px;
    height: auto;
    object-fit: contain;
}

/* 통계 카드 */
.main-top-stats {
    display: flex;
    justify-content: center;
    gap: 0;
    background-color: rgba(255, 255, 255);
    border-radius: 20px;
    padding: 30px 50px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    margin-bottom: -90px;
    z-index: 1;
}

.main-top-stats .stat-item {
    flex: 1;
    text-align: center;
    position: relative;
}

.main-top-stats .stat-item:not(:last-of-type)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 60px;
    background-color: #e0e0e0;
}

.main-top-stats .stat-number {
    display: block;
    font-size: 30px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 8px;
    transition: all 0.3s ease;
}

.main-top-stats .stat-number:hover {
    color: var(--maincolor);
}

.main-top-stats .stat-unit {
    font-size: 18px;
    font-weight: 400;
    color: var(--text-color2);
}

.main-top-stats .stat-label {
    display: block;
    font-size: 14px;
    color: var(--text-color2);
    font-weight: 500;
}

.main-top-stats .stat-note {
    position: absolute;
    bottom: -20px;
    right: 0;
    font-size: 11px;
    color: var(--text-color2);
    font-weight: 400;
}


/* 메인 introduce 섹션 */
.main-introduce {
    scroll-margin-top: 70px;
    padding-top: 110px;
    padding-bottom: 80px;
    background-color: #fff;
}

/* ================ 비교 섹션 ================ */
.compare-section {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

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

.compare-title {
    text-align: center;
    margin-bottom: 50px;
}

.compare-title .title {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 12px;
    line-height: 1.3;
}

.compare-title .subtitle {
    font-size: 16px;
    color: var(--text-color2);
    line-height: 1.6;
    margin-bottom: 0;
}

.compare-wrap {
    background: var(--main-gradient);
    border-radius: 30px;
    padding: 30px;
    box-shadow: 0 12px 30px rgba(255, 168, 0, 0.18);
}

.compare-headers {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    color: #fff;
    font-weight: 700;
    font-size: 18px;
    text-align: center;
    padding: 10px 0 20px;
}

.compare-h-mf,
.compare-h-other {
    padding: 0 25px;
}

.compare-table {
    position: relative;
}

.compare-row {
    display: grid;
    grid-template-columns: 200px 1fr 1fr;
    align-items: stretch;
}

.compare-row > div {
    padding: 20px 25px;
    display: flex;
    align-items: center;
    gap: 12px;
}

.compare-row .cat {
    color: #fff;
    font-weight: 600;
    font-size: 16px;
}

.compare-row .cat i {
    font-size: 18px;
    width: 22px;
    text-align: center;
}

.compare-row .positive,
.compare-row .negative {
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
    font-size: 15px;
    line-height: 1.4;
}

.compare-row .positive {
    color: var(--text-color1);
    border-right: 1px solid #f0f0f0;
}

.compare-row .negative {
    color: var(--text-color2);
}

.compare-row .positive i {
    color: #22c55e;
    font-size: 18px;
    flex-shrink: 0;
}

.compare-row .negative i {
    color: #ef4444;
    font-size: 18px;
    flex-shrink: 0;
}

.compare-row:first-child .positive {
    border-radius: 16px 0 0 0;
}

.compare-row:first-child .negative {
    border-radius: 0 16px 0 0;
}

.compare-row:last-child .positive {
    border-radius: 0 0 0 16px;
    border-bottom: none;
}

.compare-row:last-child .negative {
    border-radius: 0 0 16px 0;
    border-bottom: none;
}

.main-introduce .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 60px;
}

.main-introduce-title {
    flex: 1;
    padding-top: 40px;
}

.main-introduce-title .title {
    color: var(--text-color1);
    text-align: left;
}

.main-introduce-title .title .highlight {
    color: var(--maincolor);
    font-weight: 700;
}

.main-introduce-title .subtitle {
    text-align: left;
    margin-bottom: 20px;
}

.main-introduce-title .bottom-btn {
    margin-top: 20px;
    text-align: center;
    width: 180px;
    height: 35px;
    line-height: 35px;
    border-radius: 150px;
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    background-color: var(--maincolor);
    color: var(--text-color1);
    transition: background-color 0.3s ease;
}

.main-introduce-title .bottom-btn:hover {
    background-color: #f0b800;
}

.main-introduce-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

.card-wrapper {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.card-wrapper:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.card-wrapper:nth-child(even) {
    justify-content: flex-end;
}

.main-introduce .card {
    width: 85%;
    background: var(--bgcolor);
    border-radius: 15px;
    padding: 25px;
    display: flex;
    align-items: center;
    gap: 20px;
}

.main-introduce .card-img {
    width: 60px;
    height: 60px;
    flex-shrink: 0;
}

.main-introduce .card-img img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.main-introduce .card-content {
    flex: 1;
}

.main-introduce .card h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color1);
}

.main-introduce .card p {
    font-size: 15px;
    line-height: 1.5;
    color: var(--text-color2);
    font-weight: 500;
    margin: 0;
    margin-bottom: 2px;
}

/* 메인 live 섹션 */
.main-live {
    padding: 80px 0;
    background-color: var(--bgcolor2);
    overflow: hidden;
    position: relative;
}

.main-live .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    gap: 60px;
}

.main-live-title {
    flex: 1;
    padding-top: 40px;

}

.main-live-title .title {
    text-align: end;
    margin-bottom: 10px;
}

.main-live-title .title .highlight {
    color: var(--maincolor);
}

.main-live-title .subtitle {
    text-align: end;
    margin-bottom: 10px;
}

.main-live-title p.small {
    text-align: end;
    font-size: 14px;
    color: var(--text-color2);
}

.main-live-cards {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
}

/* 실시간 테이블 (live 내부) */
.main-live-live {
    flex: 1;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
}

.live-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 15px 20px;
    background-color: var(--maincolor);
    border-radius: 20px 20px 0 0;
    border-bottom: 1px solid #eee;
}

.live-update,
.live-time {
    font-size: 14px;
    font-weight: 500;
    color: #fff;
}

.live-time {
    margin: 0 5px;
    font-weight: 700;
}

.live-update i {
    margin-right: 5px;
    color: #fff;
}

.live-table-header {
    display: flex;
    align-items: center;
    padding: 12px 20px;
    background-color: var(--bg-blue);
    border-bottom: 1px solid rgba(49, 36, 233, 0.1);
}

.live-table-header span {
    font-size: 14px;
    font-weight: 600;
    color: var(--maincolor);
    text-align: center;
}

.live-table-header .col-name {
    flex: 1;
}

.live-table-header .col-product {
    flex: 2;
}

.live-table-header .col-amount {
    flex: 2;
}

.live-table-header .col-status {
    flex: 1;
}

.live-scroll-container {
    max-height: 400px;
    overflow: hidden;
    position: relative;
}

.live-scroll-content {
    position: relative;
    display: flex;
    flex-direction: column;
}

.live-row {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(49, 36, 233, 0.05);
    background-color: #fff;
    transition: background-color 0.3s ease;
}

.live-row:hover {
    background-color: var(--bg-blue);
}

.live-row .col-name {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.live-row .col-name .name {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-color1);
}

.live-row .col-product {
    flex: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.live-row .col-product i {
    font-size: 18px;
    color: #ffc700;
    width: 24px;
    text-align: center;
}

.live-row .col-product .product-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-color1);
}

.live-row .col-amount {
    flex: 2;
    font-size: 16px;
    font-weight: 700;
    color: var(--maincolor);
    text-align: center;
}

.live-row .col-status {
    flex: 1;
    text-align: center;
}

.live-row .status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    background: #ffc700;
    color: #1e1e1e;
}

/* 메인 review 섹션 */
.main-review {
    padding: 80px 0;
    background: var(--main-gradient);
    overflow: hidden;
}

.main-review .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.main-review .container .title {
    color: rgb(255, 255, 255, 0.8);
    margin-bottom: 50px;
}

.main-review .container .highlight {
    color: #fff
}

/* Swiper 슬라이더 스타일 */
.review-swiper {
    position: relative;
    padding: 20px 0;
    overflow: visible !important;
}

.review-swiper .swiper-slide {
    opacity: 0.5;
    transition: opacity 0.3s ease;
}

.review-swiper .swiper-slide-active,
.review-swiper .swiper-slide-active~.swiper-slide,
.review-swiper .swiper-slide-active~.swiper-slide~.swiper-slide,
.review-swiper .swiper-slide-active~.swiper-slide~.swiper-slide~.swiper-slide {
    opacity: 1;
}

.review-swiper .swiper-slide-active~.swiper-slide~.swiper-slide~.swiper-slide~.swiper-slide {
    opacity: 0.5;
}

.review-card {
    background: #fff;
    border-radius: 15px;
    padding: 25px;
    transition: all 0.3s ease;
    height: 350px;
    display: flex;
    flex-direction: column;
}

.review-profile {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 20px;
}

.profile-img {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    background: var(--bgcolor);
}

.profile-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info .name {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 5px;
}

.rating {
    display: flex;
    align-items: center;
    gap: 2px;
}

.rating i {
    color: #ffd43b;
    font-size: 12px;
}

.rating span {
    color: var(--text-color2);
    font-size: 12px;
    margin-left: 5px;
}

.review-text {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-color1);
    margin-bottom: 15px;
    display: -webkit-box;
    flex: 1;
}

.review-date {
    font-size: 13px;
    color: var(--text-color2);
    margin-top: auto;
}

/* 네비게이션 버튼 스타일 */
.swiper-button-next,
.swiper-button-prev {
    color: var(--maincolor) !important;
    background: #fff;
    width: 30px !important;
    height: 30px !important;
    border-radius: 50%;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.swiper-button-next:hover,
.swiper-button-prev:hover {
    background: #fff;
    color: var(--maincolor);
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
}

.swiper-button-next:after,
.swiper-button-prev:after {
    font-size: 14px !important;
    font-weight: 700;
}

.swiper-button-next {
    right: -15px !important;
}

.swiper-button-prev {
    left: -15px !important;
}

/* 메인 lic 섹션 */
.main-lic {
    padding: 80px 0;
    background-color: #fff;
}

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

.main-lic .title {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.25;
    letter-spacing: -0.5px;
}

.main-lic .title .highlight {
    color: #ffc700;
    font-weight: 800;
}

.lic-wrapper {
    max-width: 1200px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.lic-card {
    width: calc(50% - 5px);
    border-radius: 15px;
    overflow: hidden;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.lic-card:hover {
    transform: translateY(-10px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.lic-card img {
    width: 100%;
}

/* 메인 links 섹션 */
.main-links {
    padding: 15px 0;
    background-color: #fff;
}

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

.partners-logo-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    overflow-x: hidden;
    scrollbar-width: none;
    /* Firefox */
}

.partners-logo-wrapper::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Edge */
}

.partner-logo {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 15px;
}

.partner-logo img {
    max-width: 100%;
    max-height: 40px;
}

/* ================ 서브 페이지 공통 ================ */

.top-banner {
    height: 200px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image: var(--main-gradient);
    background-color: var(--maincolor);
}

.top-banner p {
    color: #fff;
    font-size: 28px;
    font-weight: 700;
}

/* ================ about ================ */

/* About intro 섹션 */
.about-intro {
    padding: 100px 0;
    background-color: var(--bgcolor);
}

.about-intro .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    padding-bottom: 50px;
    text-align: center;
}

.about-intro .container>img {
    max-width: 100%;
    height: auto;
}

/* ================ hero cta button ================ */
.hero-cta-btn {
    display: inline-block;
    margin: 18px auto 0;
    padding: 16px 40px;
    background: var(--maincolor);
    color: #222;
    font-size: 18px;
    font-weight: 700;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(255, 199, 0, 0.45);
    transition: transform 0.2s, box-shadow 0.2s;
    text-align: center;
}
.hero-cta-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(255, 199, 0, 0.55);
}

/* 인물 아래 큰 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: #ffdf00;
    color: #1e1e1e;
    font-size: 24px;
    font-weight: 700;
    border-radius: 18px;
    letter-spacing: -0.3px;
    box-shadow: none;
}

.hero-cta-btn.big:hover {
    transform: translateY(-4px);
    box-shadow: none;
}

/* 스크롤을 내려 원래 위치를 지나면 같은 버튼이 화면 하단에 고정됨 */
.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: none;
}

.hero-cta-btn.big.docked:hover {
    transform: translateX(-50%) translateY(-3px);
    box-shadow: none;
}

@media (max-width: 768px) {
    .hero-cta-btn {
        font-size: 16px;
        padding: 14px 32px;
    }
    .hero-cta-btn.big {
        max-width: 340px;
        padding: 18px 0;
        font-size: 19px;
        border-radius: 14px;
    }
    .hero-cta-btn.big.docked {
        max-width: none;
        width: calc(100% - 24px);
        bottom: 28px;
        border-radius: 14px;
    }
}

/* ================ featured-reviews ================ */
.featured-reviews{padding:80px 0;background:#282c30}.featured-reviews .container{max-width:1200px;margin:0 auto;padding:0 20px}.featured-reviews-title{text-align:center;font-size:34px;font-weight:800;color:#fff;line-height:1.25;letter-spacing:-0.5px;margin-bottom:14px}.featured-reviews-title .highlight{color:#fff}.featured-reviews-sub{text-align:center;font-size:18px;font-weight:500;color:rgba(255,255,255,0.8);line-height:1.25;letter-spacing:-0.5px;margin:0 0 50px}.featured-reviews-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.fr-card{border-radius:20px;overflow:hidden;transition:transform .3s,box-shadow .3s}.fr-card:hover{transform:translateY(-8px);box-shadow:0 15px 35px rgba(0,0,0,.1)}.fr-avatar{width:100%;border-radius:20px;overflow:hidden;box-shadow:0 6px 16px rgba(0,0,0,.1)}.fr-avatar img{width:100%;height:auto;display:block}@media(max-width:768px){.featured-reviews{padding:50px 0}.featured-reviews-title{font-size:26px;margin-bottom:10px}.featured-reviews-sub{font-size:15px;margin-bottom:30px}.featured-reviews-grid{grid-template-columns:1fr;gap:23px;padding:0 4px}}

.about-intro .container>a>img {
    max-width: 100%;
    height: auto;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
}

.about-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.about-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0, 0, 0, 0.1);
}

.about-card-inner {
    padding: 40px;
    text-align: center;
}

.about-img {
    text-align: center;
    margin-bottom: 30px;
}

.about-img img {
    max-height: 170px;
    width: auto;
}

.about-content h3 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 20px;
    line-height: 1.4;
}

.about-content .highlight {
    color: var(--maincolor);
    position: relative;
    display: inline-block;
    padding: 0 4px;
    animation: highlightShine 3s ease-in-out infinite;
    padding: 0 2px;
}

.about-content .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 199, 0, 0.1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.about-card:hover .highlight::before {
    transform: scaleX(1);
}

@keyframes highlightShine {

    0%,
    100% {
        color: #ffe14d;
    }

    50% {
        color: #ffc700;
    }
}

.about-content p {
    font-size: 16px;
    color: var(--text-color2);
    line-height: 1.6;
    font-weight: 500;
    margin-bottom: 15px;
}

.about-content p:last-child {
    margin-bottom: 0;
}

/* About Links 섹션 */
.about-links {
    padding: 80px 0;
    background: var(--main-gradient);
}

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

.about-links-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}

.about-links-text {
    text-align: left;
}

.about-links-content h3 {
    font-size: 23px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 12px;
}

.about-links-content p {
    font-size: 16px;
    color: var(--text-color1);
    margin-bottom: 0;
    font-weight: 500;
}

.about-links-button {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: #fff;
    color: var(--text-color1);
    padding: 15px 30px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 16px;
    font-weight: 500;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.about-links-button:hover {
    background-color: var(--maincolor);
    transform: translateY(-2px);
}

.about-links-button i {
    font-size: 18px;
    transition: transform 0.3s ease;
}

.about-links-button:hover i {
    transform: translateX(5px);
}

/* ================ product ================ */

.product {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

.product .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.product-table {
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.product-item {
    flex: 1;
    background: #fff;
    border-radius: 15px;
    padding: 30px;
    transition: all 0.3s ease;
}

.product-item:hover {
    transform: translateY(-5px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.product-header {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
    gap: 10px;
}

.product-header h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color1);
    order: 2;
}

.product-header img {
    width: 24px;
    height: 24px;
    object-fit: contain;
    order: 1;
}

.product-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-content li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px dashed #eee;
}

.product-content li:last-child {
    border-bottom: none;
}

.product-content li.description {
    display: block;
    padding: 20px 0 0 0;
    border-bottom: none;
}

.product-content li.description p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-color1);
    word-break: keep-all;
    text-align: center;
}

.product-content .label {
    color: var(--text-color2);
    font-size: 15px;
    font-weight: 500;
}

.product-content .value {
    color: var(--text-color1);
    font-size: 15px;
    font-weight: 600;
}


/* Product Money 섹션 */
.product-money {
    /* padding: 80px 0; */
    padding-bottom: 80px;
    background-color: var(--bgcolor);
}

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

.product-money-text {
    flex: 1;
    padding: 40px;
}

.product-money-text h2 {
    font-size: 18px;
    color: var(--text-color2);
    margin-bottom: 5px;
}

.product-money-text h3,
.product-card-text h3 {
    font-size: 32px;
    font-weight: 700;
    color: var(--maincolor);
    margin-bottom: 20px;
}

.product-money-text p,
.product-card-text p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color1);
    margin-bottom: 15px;
    font-weight: 500;
}

.product-money-text .small,
.product-card-text .small {
    font-size: 13px;
    color: var(--text-color2);
}

.product-money-text p:last-child,
.product-card-text p:last-child {
    margin-bottom: 0;
}

.product-money-text strong,
.product-card-text strong {
    color: var(--maincolor);
    font-weight: 700;
}

.product-money-image,
.product-card-image {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
}

.product-money-image img,
.product-card-image img {
    max-width: 50%;
    height: auto;
    object-fit: contain;
    transition: transform 0.5s ease;
}

.product-money-hero:hover .product-money-image img,
.product-card-hero:hover .product-card-image img,
.product-card-hero:hover .product-money-image img {
    transform: translateY(-10px);
}

.timeline {
    position: relative;
    max-width: 1000px;
    margin: 0 auto;
    padding: 40px 0;
    margin-bottom: 60px;
}

.timeline::before {
    content: '';
    position: absolute;
    width: 2px;
    background: var(--maincolor);
    top: 0;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    border-left: 2px dashed var(--maincolor);
    background: none;
}

.timeline-item {
    margin-bottom: 30px;
    position: relative;
    width: calc(50% - 30px);
    transition: transform 0.3s ease;
}

.timeline-item:hover {
    transform: translateY(-5px);
}

.timeline-item:nth-child(odd) {
    margin-left: 0;
    margin-right: auto;
    padding-right: 40px;
}

.timeline-item:nth-child(even) {
    margin-left: auto;
    margin-right: 0;
    padding-left: 40px;
}

.timeline-item::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    background: #fff;
    border: 4px solid var(--maincolor);
    border-radius: 50%;
    top: 50%;
    transform: translateY(-50%);
    z-index: 1;
}

.timeline-item:nth-child(odd)::before {
    right: -44px;
}

.timeline-item:nth-child(even)::before {
    left: -44px;
}

.timeline-content {
    padding: 30px;
    background: #fff;
    border-radius: 15px;
    position: relative;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.timeline-content .icon {
    position: absolute;
    top: 20px;
    right: 25px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
}

.timeline-content .icon img {
    width: 100%;
    height: auto;
    object-fit: contain;
    transition: transform 0.3s ease;
}

.timeline-item:hover .timeline-content {
    transform: translateY(-5px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.timeline-content::before {
    content: '';
    position: absolute;
    border-style: solid;
    border-width: 15px;
    top: 50%;
    transform: translateY(-50%);
}

.timeline-item:nth-child(odd) .timeline-content::before {
    right: -15px;
    border-color: transparent transparent transparent #fff;
}

.timeline-item:nth-child(even) .timeline-content::before {
    left: -15px;
    border-color: transparent #fff transparent transparent;
}

.timeline-content .step-number {
    display: inline-block;
    background: var(--main-gradient);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 15px;
}

.timeline-content h3 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 10px;
}

.timeline-content p {
    font-size: 15px;
    color: var(--text-color2);
    line-height: 1.6;
    margin: 0;
}

/* ======================================================
   강조 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: #ffc700;
}

/* 동전 아이콘 (이모지 대신 CSS로 그려 기기와 무관하게 항상 금색 동전 표시) */
.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: #ffc700;
    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, #ffa000 0%, #f58800 55%, #ec7600 100%);
    color: #ffffff;
    font-size: 20px;
    font-weight: 500;
    text-align: center;
    text-decoration: none;
    border-radius: 14px;
    letter-spacing: -0.3px;
    box-shadow: none;
    transition: transform 0.2s, background 0.2s;
}

.cta-banner-btn:hover {
    transform: translateY(-3px);
    background: linear-gradient(180deg, #f59200 0%, #ec7c00 55%, #e06d00 100%);
}

/* 한도조회 버튼: 노란 배경 + 검정 굵은 텍스트 (첨부 이미지 스타일) */
.cta-banner-btn.limit-check {
    background: #ffdf00;
    color: #1e1e1e;
    font-weight: 700;
    box-shadow: none;
}

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

/* ======================================================
   체크리스트 섹션 (대상 확인) - 노랑/주황 랜딩 색감
====================================================== */
.checklist-section {
    scroll-margin-top: 70px;
    padding: 90px 0;
    /* 히어로처럼 위는 밝은 흰색/연노랑, 아래로 갈수록 노랑이 은은하게 진해지는 그라데이션 */
    background: linear-gradient(180deg, #ffffff 0%, #fffbec 35%, #fff1c0 70%, #ffe27a 100%);
}

.checklist-section .container {
    max-width: 520px;
    margin: 0 auto;
    padding: 0 20px;
}

.checklist-head {
    text-align: center;
    margin-bottom: 36px;
}

.checklist-title {
    font-size: 34px;
    font-weight: 800;
    color: #222222;
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
    text-shadow: none;
}

.checklist-title .accent {
    color: #ffc700;
}

.checklist-sub {
    font-size: 16px;
    color: var(--text-color2);
    line-height: 1.5;
    margin: 0;
}

.checklist-cards {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.checklist-card {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: #fff;
    border-radius: 18px;
    padding: 26px 24px;
    box-shadow: 0 8px 20px rgba(150, 90, 0, 0.12);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.checklist-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(255, 168, 0, 0.18);
}

.checklist-card .cl-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
}

.checklist-card .cl-text {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-color1);
    letter-spacing: -0.3px;
}

/* ======================================================
   타사 vs 머니프렌즈 비교 섹션 - 노랑/주황 랜딩 색감
====================================================== */
.versus-section {
    padding: 90px 0;
    background-color: #fff;
}

.versus-section .container {
    max-width: 560px;
    margin: 0 auto;
    padding: 0 20px;
}

.versus-head {
    text-align: center;
    margin-bottom: 40px;
}

.versus-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin-bottom: 14px;
}

.versus-title .accent {
    background: linear-gradient(180deg, #ffd53a 0%, #ffb300 50%, #f59000 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
}

.versus-sub {
    font-size: 16px;
    color: var(--text-color2);
    line-height: 1.5;
    margin: 0;
}

.versus-wrap {
    display: grid;
    grid-template-columns: 1fr 1.25fr;
    gap: 16px;
    align-items: end;
}

.versus-col-label {
    text-align: center;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-color2);
    margin-bottom: 14px;
}

.versus-col-label.accent {
    color: var(--subcolor);
    font-weight: 800;
    font-size: 27px;
    /* 프렌즈론 라벨을 위로 올려 아래 박스와 간격 확보 */
    margin-bottom: 22px;
}

.versus-card {
    border-radius: 12px;
    overflow: hidden;
}

/* 타사 (약하게) */
.versus-card.other {
    background: #f2f2f2;
}

.versus-card.other .versus-item {
    padding: 20px 18px;
    text-align: center;
    font-size: 17px;
    font-weight: 500;
    color: #9a9a9a;
    border-bottom: 1px solid #e6e6e6;
    line-height: 1.4;
}

.versus-card.other .versus-item:last-child {
    border-bottom: none;
}

/* 머니프렌즈 (강조 - 노랑/주황 그라데이션 박스 + 흰색 텍스트) */
.versus-card.mf {
    background: linear-gradient(180deg, #ffa000 0%, #f58800 55%, #ec7600 100%);
    box-shadow: none;
    transform: translateY(-8px);
}

.versus-card.mf .versus-item {
    padding: 26px 18px;
    text-align: center;
    font-size: 27px;
    font-weight: 500;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    line-height: 1.4;
    letter-spacing: -0.3px;
    text-shadow: none;
}

.versus-card.mf .versus-item:last-child {
    border-bottom: none;
}

.versus-note {
    margin-top: 22px;
    text-align: center;
    font-size: 12px;
    color: #b0b0b0;
    line-height: 1.5;
    letter-spacing: -0.2px;
}

.versus-cta-wrap {
    margin-top: 36px;
    text-align: center;
}

.versus-cta-wrap .cta-banner-chevron {
    margin-bottom: 18px;
}

.tip-item {
    background-color: #fff;
    border-radius: 15px;
    padding: 20px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    margin-bottom: 20px;
}

.tip-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.tip-label {
    background-color: #f1f1f1;
    color: var(--text-color1);
    padding: 8px 12px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.tip-content {
    font-size: 15px;
    color: var(--text-color1);
    line-height: 1.5;
    flex: 1;
}

.tip-content .highlight {
    color: var(--maincolor);
    font-weight: 700;
    position: relative;
    display: inline-block;
    padding: 0 2px;
}

.tip-content .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 199, 0, 0.1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.6s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.tip-item:hover .highlight::before {
    transform: scaleX(1);
}

/* Product Tips 섹션 */
.product-tips {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

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

.product-tips-hero {
    display: flex;
    gap: 40px;
    background-color: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    padding: 40px;
}

.product-tips-image {
    width: 35%;
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    padding: 20px;
}

.product-tips-image img {
    max-width: 70%;
    height: auto;
    transition: transform 0.5s ease;
}

.product-tips-hero:hover .product-tips-image img {
    transform: translateY(-10px);
}

.product-tips-content {
    width: 60%;
    padding: 20px 0;
}

.product-tips-content h2 {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 10px;
}

.product-tips-content p {
    font-size: 16px;
    line-height: 1.6;
    color: var(--text-color1);
    margin-bottom: 20px;
    font-weight: 500;
}

.product-tips-content p:last-child {
    margin-bottom: 0;
}

.product-tips-content .highlight {
    position: relative;
    display: inline-block;
    color: var(--maincolor);
    animation: highlightShine 0.5s ease-in-out infinite;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
    padding: 0 2px;
    text-decoration: none;
}

.product-tips-content .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(226, 45, 26, 0.2);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.product-tips-content .highlight:hover::before {
    transform: scaleX(1);
}

/* ================ request ================ */

.top-banner .sub-title {
    font-size: 18px;
    color: #fff;
    font-weight: 500;
    margin-top: 5px;
}


/* Request Howto 섹션 */
.request-howto {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

.request-howto .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.request-howto-steps {
    display: flex;
    gap: 20px;
}

.request-step-card {
    flex: 1;
    background-color: #fff;
    border-radius: 15px;
    overflow: hidden;
    text-align: center;
}

.request-step-number {
    background-color: var(--maincolor);
    color: #fff;
    font-weight: 700;
    padding: 12px 0;
    font-size: 18px;
}

.request-step-image {
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 250px;
    background-color: #fff;
    overflow: hidden;
}

.request-step-image img {
    width: 95%;
}

.request-step-content {
    padding: 10px 20px 20px 20px;
}

.request-step-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-color1);
    line-height: 1.5;
}

.request-step-desc {
    font-size: 14px;
    color: var(--text-color2);
    line-height: 1.6;
    font-weight: 400;
}

/* Request Button 섹션 */
.request-button {
    padding: 80px 0;
    background-color: #fff;
}

.request-button .container {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 20px;
}

.request-button-title {
    text-align: center;
    margin-bottom: 40px;
}

.request-button-title h2 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 15px;
}

.request-button-title p {
    font-size: 20px;
    line-height: 1.2;
    font-weight: 500;
    color: var(--text-color2);
}

.request-button-title.bottom {
    margin-top: 20px;
    margin-bottom: 0;
}

.request-button-title.bottom p {
    line-height: 1.5;
    font-size: 16px;
    color: var(--text-color2);
}

.request-button-links {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.request-button-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 50px;
    border-radius: 50px;
    text-decoration: none;
    font-size: 18px;
    font-weight: 600;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.request-button-link.phone {
    background-color: var(--maincolor);
    color: #fff;
}

.request-button-link.kakao {
    background-color: #fffc00;
    color: #000;
}

.request-button-link:hover {
    transform: translateY(-3px);
    filter: drop-shadow(0 5px 5px rgba(0, 0, 0, 0.1));
}

.request-button-link i {
    font-size: 20px;
}

.form-desc {
    text-align: center;
    margin-top: 20px;
    margin-bottom: 0;
}

.form-desc p {
    line-height: 1.5;
    font-size: 16px;
    color: var(--text-color2);
}


/* Request Notice 섹션 */
.request-notice {
    padding: 50px 0;
    background-color: #fffc00;
}

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

.request-notice-content {
    text-align: center;
}

.request-notice-icon {
    margin-bottom: 20px;
}

.request-notice-icon img {
    width: 120px;
    height: auto;
}

.request-notice-content h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 15px;
}

.request-notice-content p {
    font-size: 18px;
    line-height: 1.5;
    color: var(--text-color1);
    font-weight: 500;
}

/* Request Kakao 섹션 */
.request-kakao {
    padding: 80px 0;
    background-color: #fff;
}

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

.request-kakao-title {
    text-align: center;
    margin-bottom: 30px;
}

.request-kakao-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 10px;
}

.request-kakao-title p {
    font-size: 18px;
    color: var(--text-color2);
}

.request-kakao-button {
    text-align: center;
    margin-bottom: 30px;
}

.request-kakao-button.id {
    margin-top: 50px;
}

.request-kakao-button span {
    display: inline-block;
    background-color: #3f1d1d;
    color: #fff;
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
}

.request-kakao-content {
    display: flex;
    justify-content: center;
    gap: 30px;
    margin-bottom: 20px;
}

.request-kakao-banner {
    background: var(--main-gradient);
    border-radius: 15px;
    padding: 15px 20px;
    text-align: center;
    margin: 50px 0;
    box-shadow: 0 4px 15px rgba(255, 217, 0, 0.2);
}

.request-kakao-banner p {
    font-size: 18px;
    color: #3f1d1d;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.5);
}

.request-kakao-box {
    flex: 1;
    max-width: 350px;
    text-align: center;
}

.request-kakao-image {
    margin-bottom: 10px;
}

.request-kakao-image img {
    width: 100%;
    height: auto;
    display: block;
}

.request-kakao-box p {
    font-size: 16px;
    color: var(--text-color1);
    font-weight: 700;
    background-color: #ffe94a;
    padding: 15px;
    border-radius: 15px;
}

/* ================ faq ================ */

/* FAQ 섹션 */
.faq-container {
    padding: 80px 0;
    background-color: var(--bgcolor);
}

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

.faq-title {
    text-align: center;
    margin-bottom: 50px;
}

.faq-title h2 {
    font-size: 32px;
    font-weight: 700;
    color: var(--text-color1);
    margin-bottom: 15px;
}

.faq-title p {
    font-size: 18px;
    color: var(--text-color2);
}

.faq-content {
    max-width: 1200px;
    margin: 0 auto;
}

.faq-item {
    background: #fff;
    border-radius: 15px;
    margin-bottom: 15px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

.faq-question {
    padding: 25px;
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: background-color 0.5s;
}

.faq-question:hover {
    background-color: rgba(255, 199, 0, 0.05);
}

.question-mark {
    color: var(--maincolor);
    font-size: 20px;
    font-weight: 700;
    margin-right: 15px;
}

.question-text {
    flex: 1;
    font-size: 16px;
    font-weight: 700;
    color: var(--text-color1);
}

.toggle-icon {
    margin-left: 15px;
    color: var(--text-color2);
    transition: transform 0.5s;
}

.faq-answer {
    padding: 0 25px;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s;
    background-color: #f8f9fa;
}

.faq-answer p {
    padding: 25px 0;
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-color2);
}

.faq-item.active .toggle-icon {
    transform: rotate(180deg);
}

.faq-item.active .faq-answer {
    max-height: 650px;
}

.faq-answer .highlight {
    position: relative;
    display: inline-block;
    color: var(--maincolor);
    animation: highlightShine 0.5s ease-in-out infinite;
    z-index: 1;
    cursor: pointer;
    pointer-events: auto;
    padding: 0 2px;
    text-decoration: none;
}

.faq-answer .highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(255, 199, 0, 0.1);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1);
    z-index: -1;
}

.faq-answer .highlight:hover::before {
    transform: scaleX(1);
}

/* 푸터 */
.footer {
    background-color: var(--text-color1);
    color: #fff;
    padding: 40px 0;
    padding-bottom: calc(40px + 47px);
    /* 기본 패딩 + 플로팅 메뉴 높이 */
}

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

.footer-info {
    margin-bottom: 30px;
}

.company-logo {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 15px;
}

.company-logo img {
    width: 150px;
    height: auto;
}

.contact-info {
    display: flex;
    gap: 30px;
    margin-bottom: 10px;
}

.contact-info p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.8);
}

.footer-notice {
    margin-bottom: 20px;
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.footer-copyright {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

/* 플로팅 */
.floating {
    position: fixed;
    right: 20px;
    bottom: max(110px, calc(env(safe-area-inset-bottom) + 110px));
    z-index: 999;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.floating_bubble {
    position: relative;
    background: #fff;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    padding: 10px 12px;
    border-radius: 16px;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    text-align: center;
    white-space: normal;
    letter-spacing: -0.2px;
    width: 80px;
    animation: floatingConsultBubble 1.9s ease-in-out infinite;
}

.floating_bubble strong {
    font-size: 14px;
    line-height: 1.2;
    font-weight: 900;
    color: #ffc700;
}

.floating_bubble::after {
    content: "";
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: -7px;
    width: 0;
    height: 0;
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-top: 9px solid #fff;
}

@keyframes floatingConsultBubble {
    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-6px);
    }

    100% {
        transform: translateY(0);
    }
}

.floating_btn {
    width: 50px;
    height: 50px;
    border-radius: 43%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    border: 0;
    box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
    transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
}

.floating_btn i {
    font-size: 20px;
    line-height: 1;
}

.floating-call {
    background: #ffc700;
}

.floating-call i {
    color: #fff !important;
}

.floating-call img {
    width: 35px;
}

.floating-kakao {
    background: #FFE44D;
}

.floating-kakao i {
    color: var(--text-color1) !important;
}

.floating_btn:active {
    transform: translateY(0);
    filter: brightness(0.98);
}


@keyframes highlightShine {

    0%,
    100% {
        color: #ffe14d;
    }

    50% {
        color: #ffc700;
    }
}

/* ================ 환급 여정 섹션 (랜딩 색감) ================ */
.refund-journey {
    padding: 60px 0 66px;
    background: #f8f9fa;
    text-align: center;
}

.refund-journey .container {
    max-width: 620px;
    margin: 0 auto;
    padding: 0 20px;
}

.rj-badge {
    display: inline-block;
    background: #ffc700;
    color: #1e1e1e;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.5px;
    padding: 6px 16px;
    border-radius: 50px;
    margin-bottom: 18px;
}

.rj-eyebrow {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 0 0 2px;
}

.rj-title {
    font-size: 34px;
    font-weight: 800;
    color: var(--text-color1);
    line-height: 1.25;
    letter-spacing: -0.5px;
    margin: 0 0 15px;
}

.rj-title .accent {
    color: #ffc700;
}

/* 시각 영역 */
.rj-visual {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 30px;
}

/* 폰 목업 - 테두리(베젤) 있는 폰 프레임 */
.rj-phone {
    position: relative;
    width: 290px;
    max-width: 80%;
    background: #fff7dd;
    border: 1px solid #ffe9a8;
    border-radius: 42px 42px 0 0;
    padding: 14px 14px 0;
    box-shadow: none;
    z-index: 2;
}

/* 폰 내부 화면 */
.rj-phone-screen {
    position: relative;
    background: linear-gradient(180deg, #ffe28c 0%, #ffcf5a 100%);
    border-radius: 30px 30px 0 0;
    padding: 28px 16px 26px;
    overflow: hidden;
}

.rj-phone-notch {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    width: 90px;
    height: 8px;
    background: rgba(120, 90, 0, 0.28);
    border-radius: 50px;
}

.rj-status {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: rgba(120, 90, 0, 0.55);
    margin-bottom: 14px;
    padding-top: 6px;
}

.rj-status-icons i {
    margin-left: 4px;
}

.rj-clock {
    font-size: 56px;
    font-weight: 300;
    color: #ffffff;
    text-align: center;
    line-height: 1;
    text-shadow: 0 2px 6px rgba(180, 120, 0, 0.25);
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* 은행 알림 카드 */
.rj-noti {
    background: #ffffff;
    border-radius: 16px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-align: left;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.08);
}

.rj-noti-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 12px;
    background: var(--main-gradient);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.rj-noti-body {
    flex: 1 1 auto;
}

.rj-noti-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 3px;
}

.rj-noti-bank {
    font-size: 12px;
    color: var(--text-color2);
    font-weight: 500;
}

.rj-noti-time {
    font-size: 11px;
    color: #b5b5b5;
}

.rj-noti-amount {
    font-size: 14px;
    color: var(--text-color1);
    font-weight: 500;
}

.rj-noti-amount strong {
    color: #ffc700;
    font-size: 17px;
    font-weight: 800;
}

/* 4단계 스텝 - 폰보다 가로로 넓게 */
.rj-steps {
    position: relative;
    margin-top: 0;
    width: 440px;
    max-width: 100%;
    background: #ffffff;
    border-radius: 24px;
    padding: 22px 26px 22px;
    display: flex;
    justify-content: space-between;
    box-shadow: 0 14px 34px rgba(255, 168, 0, 0.18);
    z-index: 1;
}

/* 스텝 사이 연결선 */
.rj-steps::before {
    content: '';
    position: absolute;
    top: 38px;
    left: 58px;
    right: 58px;
    height: 2px;
    background: #ffe08a;
    z-index: 0;
}

.rj-step {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    flex: 1;
}

.rj-step-num {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--main-gradient);
    color: #fff;
    font-size: 14px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(255, 168, 0, 0.35);
}

.rj-step-label {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-color1);
    line-height: 1.3;
}

.rj-note {
    font-size: 18px;
    font-weight: 500;
    color: var(--text-color2);
    margin: 0 0 34px;
}

.rj-cta {
    display: block;
    width: 100%;
    max-width: 420px;
    margin: 0 auto;
    background: #ffc700;
    color: #1e1e1e;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    padding: 20px 0;
    border-radius: 16px;
    box-shadow: none;
    transition: transform 0.2s ease, background 0.2s ease;
}

.rj-cta:hover {
    transform: translateY(-3px);
    background: #f0b800;
}

/* ================ 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: #ffdf00;   /* 내 비상금 한도 조회 버튼과 동일한 노란색 */
    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: #ffdf00;   /* 내 비상금 한도 조회 버튼과 동일한 노란색 */
    color: #1e1e1e;
    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: #f2d000;
}

/* 오른쪽 폰 목업 */
.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: #fffbef;
    border: 0.25cqw solid var(--maincolor);
    border-radius: 50px;
    padding: 0.7cqw 2cqw;
    font-size: 1.6cqw;
    font-weight: 600;
    color: #a07a00;
    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: #ffc700;
}

.ip-result-title {
    display: inline-block;
    font-size: 1.8cqw;
    font-weight: 700;
    color: #a07a00;
    background: #fffbef;
    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;
}