:root{
    --vh: 1vh;
    --font-base: "Outfit", "Pretendard", -apple-system, BlinkMacSystemFont,
    "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans KR",
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}

html, body {
    margin: 0;
    padding: 0;
    height: auto;
    overflow: auto; /* 기본 스크롤 숨김 */
    letter-spacing: -0.02em;

    font-family: var(--font-base);,
    Roboto, "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased; /* iOS/크롬 → 얇고 부드럽게 */
    -moz-osx-font-smoothing: grayscale;  /* macOS */
    font-smooth: always;                 /* 일부 브라우저 대응 */
    text-rendering: optimizeLegibility;  /* 커닝/리간처 보정 */
    -webkit-text-size-adjust: 100%; /* 필요하면 none 으로 바꿔보세요 */
    text-size-adjust: 100%;
}


@font-face {
    font-family: "Pretendard";
    font-weight: 900;
    font-display: swap;
    src: local("Pretendard Black"), url("../fonts/pretendard/woff2-subset/Pretendard-Black.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-Black.subset.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 800;
    font-display: swap;
    src: local("Pretendard ExtraBold"), url("../fonts/pretendard/woff2-subset/Pretendard-ExtraBold.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-ExtraBold.subset.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 700;
    font-display: swap;
    src: local("Pretendard Bold"), url("../fonts/pretendard/woff2-subset/Pretendard-Bold.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-Bold.subset.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 600;
    font-display: swap;
    src: local("Pretendard SemiBold"), url("../fonts/pretendard/woff2-subset/Pretendard-SemiBold.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-SemiBold.subset.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 500;
    font-display: swap;
    src: local("Pretendard Medium"), url("../fonts/pretendard/woff2-subset/Pretendard-Medium.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-Medium.subset.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 400;
    font-display: swap;
    src: local("Pretendard Regular"), url("../fonts/pretendard/woff2-subset/Pretendard-Regular.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-Regular.subset.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 300;
    font-display: swap;
    src: local("Pretendard Light"), url("../fonts/pretendard/woff2-subset/Pretendard-Light.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-Light.subset.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 200;
    font-display: swap;
    src: local("Pretendard ExtraLight"), url("../fonts/pretendard/woff2-subset/Pretendard-ExtraLight.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-ExtraLight.subset.woff") format("woff");
}
@font-face {
    font-family: "Pretendard";
    font-weight: 100;
    font-display: swap;
    src: local("Pretendard Thin"), url("../fonts/pretendard/woff2-subset/Pretendard-Thin.subset.woff2") format("woff2"), url("../fonts/pretendard/woff-subset/Pretendard-Thin.subset.woff") format("woff");
}

a {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

ul, li, h1, h2, h3, h4, h5, p, span, button {
    list-style: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: unset;
    appearance: none;
}

.navbar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 4rem;
    z-index: 99;
    backdrop-filter: blur(8px); /* 반투명+블러 효과 */
    box-sizing: border-box;
}

.navbar .logo img.web    { display: block;  width: 160px; height: auto; }
.navbar .logo img.mobile { display: none;  width: 40px; height: auto; }

.nav ul {
    display: flex;
    gap: 30px;
    font-size: 18px;
    font-weight: 400;
}
.navbar.no-blur{
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: transparent !important; /* 필요 없으면 지워도 OK */
}
.header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    z-index: 99;
    backdrop-filter: blur(8px); /* 반투명+블러 효과 */
    box-sizing: border-box;
}

.header h5 {
    font-size: 18px;
    font-weight: 600;
    margin-right: 24px;
}

.host-link.mobile  { display:none; }
.host-link.desktop { display:inline-block; }

.store-btn{
    display:flex;
    justify-content:center;
    align-items:center;
    gap: 1rem;
}

.store{
    width:13rem;
    height:4rem;
    display:inline-block;
    background-repeat:no-repeat; background-position:center;
    background-size:contain;
    transition:transform .15s ease;
}

/* 기본/호버 스킨 교체 */
.store.app  { background-image:url("/img/icon/ios_bk.svg"); }
.store.app:hover  { background-image:url("/img/icon/ios_wh.svg"); }

.store.play { background-image:url("/img/icon/aos_bk.svg"); }
.store.play:hover { background-image:url("/img/icon/aos_wh.svg"); }

.store.app-line  { background-image:url("/img/icon/ios_line.svg"); }
.store.app-line:hover  { background-image:url("/img/icon/ios_bk.svg"); }

.store.play-line { background-image:url("/img/icon/aos_line.svg"); }
.store.play-line:hover { background-image:url("/img/icon/aos_bk.svg"); }

.section{ min-height:100svh; }
@supports (height:100dvh){ .section{ min-height:100dvh; } }
@supports not (height:100dvh){ .section{ min-height:calc(var(--vh)*100); } }

.section1{
    position: relative;
}

.section1::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;                                     /* 살짝 내려서 자연스럽게 */
    transform: translateX(-50%);
    width: clamp(900px, 120vw, 1800px);               /* 반응형 가로 크기 */
    height: clamp(420px, 70vh, 1000px);                /* 반응형 세로 크기 */
    background: url("/img/web/bg_line.svg")         /* 경로 수정 */
    no-repeat center bottom / cover;     /* contain 권장(잘림 최소화) */
    opacity: .95;
    pointer-events: none;
    z-index: 0;
}

/* 핀 레이어 */
.section1 .pins{
    position:absolute; inset:0;        /* 섹션 전체를 덮는 레이어 */
    pointer-events:none;               /* 클릭 방해 X */
    z-index:1;                         /* 배경선(::before) 위, 메인콘텐츠 아래면 1~2로 조절 */
}

.section1 .mobile-bottom-hint{
    position:absolute; left:0; right:0; bottom:0;
    height:100px; z-index:8; pointer-events:none; /* 화살표만 클릭 가능 */
    display:none;
}


/* 블러+그라데이션 바닥 */
.section1 .mobile-bottom-hint .blur{
    position:absolute;
    inset:0;
    background: linear-gradient(
            to top,
            #ffffff 0%,
            rgba(255,255,255,0.96) 35%,
            rgba(255,255,255,0.70) 65%,
            rgba(255,255,255,0.0) 100%
    );
    backdrop-filter: none;
}

/* 화살표 버튼 */
.section1 .mobile-bottom-hint .chev{
    position:absolute; left:50%; bottom:16px; transform: translateX(-50%);
    width:42px; height:42px;
    display:grid; place-items:center;
    pointer-events:auto;             /* 클릭 가능 */
}

.section1 .mobile-bottom-hint .chev img{
    width:48px; height:48px; display:block;
    animation: bounceY 1.8s ease-in-out infinite;
}

/* 공통 핀 스타일 */
.section1 .pin{
    position:absolute;
    width: clamp(36px, 2.6vw, 42px);
    height:auto;
    filter: drop-shadow(0 6px 14px rgba(142,77,255,.28));
    will-change: transform;
    animation: bob 2.8s ease-in-out infinite;
}

/* 위치(스크린샷 기준 대략값, 필요시 퍼센트만 조정해줘) */
.section1 .pin--lt{ left:10%; top:38%;  animation-delay: .1s; }
.section1 .pin--rt{ right: 8%; top:15%;  animation-delay: .4s; }
.section1 .pin--rm{ right:20%; top:46%;  animation-delay: .7s; }


.section-content {
    height: 100%;
    max-height:100dvh;
    position: relative;
}


.section1_container {
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.section1_top_container {
    height: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.section1_top_container h1 {
    margin-top: 80px;
    font-size: 1.8rem;
    font-weight: 400;
}

.section1_top_container .logo {
    width: 15.5rem;
    margin: 1.2rem 0 2rem 0;
}

.phone-stage-outer {
    /*position: absolute;*/
    /*left: 0;*/
    /*bottom: 0;*/
}

.phone-stage{
    position: relative;
    height: 100%;
    width: 100%;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: end;
}

/* 폰 이미지는 래퍼 폭에 맞춤 */
.phone{
    width: clamp(305px, 58%, 430px);
    /*height: clamp(300px, 70%, 700px);*/
    /*display: block;*/


}

.phone img {
    width: 100%;
}

.phone-screen{
    position: absolute;
    left:   auto;
    bottom: 13%;
    width:  90%;

    overflow: hidden;
    z-index: 2;
}

/*@media (min-width: 1500px) {*/
/*    .phone-screen {*/
/*        width: 80%;*/
/*    }*/
/*}*/

/* 슬라이더가 화면 박스를 꽉 채우게 */
.phone-screen .swiper,
.phone-screen .swiper-wrapper,
.phone-screen .swiper-slide{ height: 100%; }


.phone-screen .swiper-slide{
    width: clamp(290px, 72%, 450px);
    display:flex; align-items:end; justify-content:center;
}

.phone-screen .swiper-slide img{
    width: 100%;
    height: auto;
    object-fit: cover;
    border-radius: 16px;
    transition: transform .5s, filter .5s;
}

/* (선택) 좌우 페이드 */
.main-fade{
    position:absolute;
    /*top:0;*/
    top:-30px;
    bottom:-30px;
    width:30%;
    pointer-events:none;
    z-index:3;
}
.main-fade--left { left:0;  background:linear-gradient(to right, rgba(255,255,255) 10%, rgba(255,255,255,0) 60%); }
.main-fade--right{ right:0; background:linear-gradient(to left,  rgba(255,255,255) 10%, rgba(255,255,255,0) 60%); }

.split{
    height: 100%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    position: relative;
}
.split::before{
    content:"";
    position:absolute; top:0; bottom:0; left:50%;
    width:2px; transform: translateX(-1px);
    background: #2dd4bf; /* 원하는 색으로 */
    opacity:.9;
}

.panel{ position: relative; }
.panel .inner{
    max-width: 640px;
    padding: clamp(32px, 5vw, 80px);
}

/* 왼쪽: 흰색 배경 */
.panel--white{
    display: flex;
    align-items: center;
    justify-content: right;
    background:#fff;
    text-align: right;
}

/* 오른쪽: 보라 그라데이션 */
.panel--gradient{
    display: flex;
    align-items: center;
    justify-content: left;
    --p0:#A27FE5; --p1:#8B5CE4; --p2:#6A4BC7;
    background:
            radial-gradient(60% 50% at 63% 32%,
            rgba(255,255,255,0.22) 0%,
            rgba(255,255,255,0.10) 35%,
            rgba(255,255,255,0.00) 70%),
            radial-gradient(110% 85% at 0% 100%,
            rgba(0,0,0,0.18) 0%,
            rgba(0,0,0,0.06) 45%,
            rgba(0,0,0,0.00) 75%),
            linear-gradient(137deg, var(--p0) 0%, var(--p1) 45%, var(--p2) 100%);
}

/* 오른쪽 흰 텍스트 */
.title-solid{
    margin: 0;
    color:#fff;
    font-weight: 650;
    font-size: clamp(38px, 6vw, 88px);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

/* 왼쪽 외곽선 타이포 */
.title-outline{
    margin: 0;
    color:#fff;                                  /* 내부 채움 */
    -webkit-text-stroke: 0.5px #9475CF;            /* 외곽선 */
    text-shadow:
            1px 0   #9475CF, -1px 0   #9475CF,
            0   1px #9475CF,  0  -1px #9475CF,
            1px 1px #9475CF, -1px 1px #9475CF,
            1px -1px#9475CF, -1px -1px#9475CF;         /* FF 폴백 */
    font-weight: 700;
    font-size: clamp(38px, 6vw, 88px);
    line-height: 1.25;
    letter-spacing: -0.02em;
}

.title-outline,
.title-outline .strike { overflow: visible; }

.title-outline .strike{
    position: relative;
    display: inline-block;
    line-height: 1;
    padding: .08em .1em;
}

.title-outline .strike::after{
    content:"";
    position:absolute;
    left:50%; top:50%;
    /*transform: translate(-50%, -50%) rotate(var(--angle, 0deg));*/

    /* 오버스캔(bleed)로 잘림 방지 */
    width:  calc(100% + 2rem);
    height: calc(var(--thick, .36em) + var(--bleed-y, .28em));

    background-image: var(--img);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 100% auto;               /* 가로 기준, 세로는 비율 유지 */
    pointer-events: none;
    z-index: 1;

    opacity: 0;
    transform: translate(-50%, -50%) rotate(var(--angle, -7deg)) scaleX(.7);
    filter: blur(3px);
}

/* 줄별 미세 조정 */
.strike--1::after{
    --img: url("/img/icon/strike1.svg");
    --angle: 0deg;  --thick: .48em;  --bleed-x: 50%;  --bleed-y: .30em;
}
.strike--2::after{
    --img: url("/img/icon/strike2.svg");
    --angle: 0deg;  --thick: .46em;  --bleed-x: 46%;  --bleed-y: .28em;
}
.strike--3::after{
    --img: url("/img/icon/strike3.svg");
    --angle: 0deg;  --thick: .64em;  --bleed-x: 44%;  --bleed-y: .26em;
}

.floaty{
    position: absolute;
    right: clamp(50px, 8vw, 120px);
    top:   clamp(100px, 11vw, 140px);
    width: clamp(150px, 18vw, 260px); /* 아이콘 최대/최소 폭 */
    transform: translateZ(0);         /* GPU 가속 힌트 */
    animation: bob 2s ease-in-out infinite;  /* 상하 둥둥 */
    will-change: transform;
}

/* 실제 이미지 */
.floaty__inner img{
    display:block;
    width:100%;
    height:auto;
}

/* 살짝 기울기/흔들림 */
.floaty__inner{
    animation: tilt 9s ease-in-out infinite;
    will-change: transform;
}

.sec-container {
    display: grid;
    /*grid-template-rows: 3fr 7fr;*/
    align-items: center;
}

.sec-title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    margin: 4rem 0 0 0;
}

.sec-title h1 {
    font-weight: 500;
    font-size: clamp(20px, 1.1vw + 0.8rem, 2.4rem);
}

.sec-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 10px;
}

.check_item {
    margin-top: 1rem;
    display: flex;
    gap: 20px;
}

.check_item span{
    display: inline-flex;
    align-items: center;
    gap: 6px;
    line-height: 1.5;
    color: #686869;
    font-size: clamp(14px, 1.1vh + 0.5rem, 1.2rem);
}

.check_icon span::before{
    content: "";
    width: 18px;
    height: 18px;
    flex: 0 0 18px;
    background: url("/img/icon/check-blue.svg") center / contain no-repeat;
}

.steps{
    display:flex;
    align-items:center;
    justify-content: center;
    /*gap:2rem*/
}

.sec-content .steps.web   { display: flex;  }
.illust-container .steps.mobile{ display: none; }

.step-icon{
    display:flex;
    align-items:center;
    color:var(--c)
}

.badge{
    width:28px;
    height:28px;
    border-radius:100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color:#fff;
    background: var(--c); font:600 14px/1 system-ui, sans-serif;
    margin-right: .5rem;
}
.label{
    font-weight:600;
    margin-right:2rem;
    font-size: clamp(16px, 1.5rem, 1.8rem);
}

/* 컨테이너: 4열 그리드 */
.steps-content{
    display: flex;
    gap: 28px;
    padding: 3rem 14px;
    margin: 0;
    list-style: none;
}

.arrow{
    background: url("/img/icon/pc_chevron_1.svg") center/contain no-repeat;
    margin-right: 2rem;
}

/* 개별 아이템 */
.step{
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    /*gap: 16px;*/
}

.illust-container {
    display: flex;
}

/* 일러스트 */
.step-illust{
    width: clamp(130px, 19vw, 280px);
    height: auto;
    object-fit: cover;
    display:block;
    user-select: none;
}

/* 카드 */
.step-card{
    width: 100%;
    position: relative;
    outline: 2px solid transparent;  /* 하이라이트 굵기 */
    outline-offset: 0;
    background: #F3F4F8;
    border-radius: 12px;
    padding: 28px;
    /*box-shadow: 0 10px 24px rgba(12, 25, 76, 0.08);*/
    box-sizing: border-box;
}
.section3.steps-animate .step-card{
    /* JS에서 duration/delay를 인라인으로 넣을 거라 최소 설정만 */
    animation-name: cardHighlight;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: none; /* forwards 금지! */
}
.guide-figure {
    margin:0;
    padding-top: 50px;
    position: relative;
}
.guide-figure img{
    display:block;
    width:100%;
    height:auto;
    max-width:100%;
}

.copy_link {
    padding: 6px 10px;
    color: #8a4bd7;
    border-radius: 20px;
    border: 0.75px solid rgba(138, 75, 215, 0.7);
    position: absolute;
    bottom: 10.5%;
    left: 63%;
    font-weight: 400;
    font-size: 14px;
}




/* 한 바퀴(전체 기간) 중 앞부분(예: 0~20%)만 테두리 on */
@keyframes cardHighlight{
    0%   { outline-color: #8E4DFF; }
    16%  { outline-color: #8E4DFF; }
    20%  { outline-color: transparent; }
    100% { outline-color: transparent; }
}

/* 모션 민감 사용자 */
@media (prefers-reduced-motion: reduce){
    .section3.steps-animate .step-card{
        animation: none !important;
        outline-color: #8E4DFF;
    }
}

.step-head{
    display:flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
}

.step-title{
    font-weight: 500;
    font-size: clamp(16px, 1.5rem, 1.8rem);
    letter-spacing: -0.02em;
    margin: 0;
    color: #131314;
}

.step-desc{
    display:block;
    font-size: clamp(14px, 0.9vw + 0.5rem, 1.2rem);
    color: #686869;
    font-weight: 400;
}

/* 최소 5분 */
.time{
    color: #5FAEF5;
    font-weight: 500;
    font-size: clamp(14px, 0.9vw + 0.5rem, 1.2rem);
    display:flex;
    align-items:center;
    gap: 6px;
    white-space: nowrap;
}
.time i{
    width: clamp(16px, 0.9vw + 0.5rem, 1.2rem);
    height: clamp(16px, 0.9vw + 0.5rem, 1.2rem);
    display:inline-block;
    background: currentColor;
    -webkit-mask: url("/img/icon/clock.svg") center/contain no-repeat;
    mask: url("/img/icon/clock.svg") center/contain no-repeat;
}

/* 말풍선(옵션) */
.bubble{
    position:absolute;
    right: -5rem;
    top: -2rem;
}


.section4 {
    background-color: #F3F4F8;
    max-height: 100dvh;
}

.review-container{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding-bottom: 2rem;
    --sec-bg: #F3F4F8;
    /*margin-top: 3rem;*/
}

.review-wrap{
    position: relative;
    width: 85vw;
    margin: 24px auto 12px;
    height: auto;
}

/* Swiper */
.review-swiper{ overflow: hidden; }
.review-swiper .swiper-wrapper{ align-items: stretch; }
.review-swiper .swiper-slide{ width:33%; min-width: 300px; height: auto }

/* 카드 */
.review-card{
    width: 100%;
    height: 100%;
    background: #fff;
    border-radius: 16px;
    border: 1px solid rgba(2,8,23,.05);
    display: block;
}

.review-head{
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 2rem 2rem 1.4rem 2rem;
}
.review-head .avatar{
    width: 40px; height: 40px;
    border-radius: 50%;
    object-fit: cover; background:#eee; flex:0 0 40px;
}

.review-head .meta{ display:flex; gap:6px; align-items: baseline; }
.review-head .meta strong{ font-weight:700; color:#1e293b; }
.review-head .meta span{ color:#474748; font-size: clamp(13px, 15px, 18px); }

.review-body{
    color:#334155;
    line-height: 1.8;
    font-size: clamp(15px, 2vh, 22px);

    padding: 0 2rem 2.4rem 2rem;
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 좌/우 페이드 */
.fade{
    position:absolute;
    top:-30px;
    bottom:-30px;
    width:30%;
    pointer-events:none; z-index:3;
}
.fade--left{  left: 0;  background: linear-gradient(90deg, var(--sec-bg) 0%,var(--sec-bg) 30%, rgba(245,246,248,0) 60%); }
.fade--right{ right:0; background: linear-gradient(270deg, var(--sec-bg) 0%,var(--sec-bg) 30%, rgba(245,246,248,0) 60%); }

/* 네비게이션 화살표 */
.review-nav{
    position:absolute; top:50%; transform:translateY(-50%);
    z-index:4;
    width:6.4rem; height: 6.4rem;
}
.review-prev{ left:0; }
.review-next{ right:0; }

/* 아이콘(마스크) */
.review-nav::before{
    content:""; display:block; width:100%; height:100%;
    background: #474748;
    -webkit-mask: url("/img/icon/chevron-left.svg") center/40% no-repeat;
    mask: url("/img/icon/chevron-right.svg") center/40% no-repeat;
}
.review-prev::before{ transform: rotate(180deg); }

/* 하단 CTA */
.review-cta{
    height: 35%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    text-align:center;
    /*margin: 2rem auto 0;*/
}
.cta-copy{
    font-size: clamp(14px, 0.9vw + 0.5rem, 1.2rem);;
    color:#474748;
    margin: 10px 0 0;
}


/* 회사 소개 */
.company-container {
    height: 100%;
    padding: 4rem 0 0;
    overflow: scroll;

}

.company-story {
    padding-top: 10px;
}

.story-banner {
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
}

.story-banner__bg {
    width: calc(100% - 6rem);
    height: 300px;
    border-radius: 12px;
    background: url('/img/web/company/sub_hero.png') center/cover no-repeat;
}

.story-banner__content {
    position: absolute;
    left: 6rem;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
}

.story-banner__content .small {
    font-size: clamp(18px, 1.1vw + 0.6rem, 1.4rem);
    /*opacity: 0.8;*/
    margin-bottom: 1rem;
}

.story-banner__content h2 {
    font-size: clamp(22px, 1.6vw + 0.6rem, 1.9rem);
    font-weight: 500;
    line-height: 1.4;
}

.story-content {
    padding: 100px clamp(1.5rem, 6vw, 8rem);
    display: grid;
    grid-template-columns: 1fr 2fr;
    margin: 0 auto;
}


.story-content h2 {
    font-size: clamp(34px, 5.5vw, 3.75rem);
    font-weight: 400;
    margin-bottom: 42px;
}



.story-item {
    margin-bottom: 55px;
    display: grid;
    grid-template-columns: 3fr 7fr;

}

.story-item h3 {
    margin-top: 10px;
    margin-bottom: 12px;
    font-size: clamp(18px, 1.1vw + 0.6rem, 1.4rem);
    font-weight: 300;
}

.story-item h4 {
    margin-top: 4px;
    font-size: clamp(22px, 1.6vw + 0.6rem, 1.9rem);
    font-weight: 500;
    line-height: 1.4;
    margin-bottom: 20px;
}

.story-item p {
    font-size: clamp(16px, 0.9vw + 0.5rem, 1.2rem);
    font-weight: 400;
    line-height: 1.4;
    color: #333;
}

.ceo-message {
    background-color: #F3F4F8;
    padding: 100px clamp(1.5rem, 6vw, 8rem);
}

.ceo-inner {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
    row-gap: 48px;
}

.ceo-title h3 {
    font-size: clamp(18px, 1.1vw + 0.6rem, 1.4rem);
    font-weight: 300;
    margin-bottom: 1.5rem;
    color: #131314;
}

.ceo-title h2 {
    font-size: clamp(22px, 1.6vw + 0.6rem, 1.9rem);
    font-weight: 500;
    line-height: 1.4;
}

.ceo-text {
    display: grid;
    grid-template-columns: 6fr 4fr;
    align-items: start;
    gap: 60px;

}

.ceo-text p {
    font-size: clamp(16px, 0.9vw + 0.5rem, 1.2rem);
    line-height: 1.6;
    color: #131314;
    margin-bottom: 24px;
}

.ceo-sign {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ceo-sign span {
    font-size: 1rem;
    font-weight: 400;
    color: #555;
}

.ceo-sign img {
    width: 80px;
    height: auto;
}

.ceo-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
}



#host_info .footer {
    border-top: 0px solid #3f3f3f;
}

.section--footer {
    height: auto !important;
    min-height: 500px !important;   /* 푸터만 550px 보장 */
}
.section--footer .fp-tableCell {
    height: auto !important;
    min-height: 500px !important;
}
/* 섹션 공통에서 높이 100% 잡는 래퍼가 있으면 푸터에서만 해제 */
.section--footer .section-content{
    height: auto !important;
    max-height: none !important;
}

.footer {
    position: relative;
    transition: 0s;
}

.footer .footer_content_wrap {
    padding: 2rem;
}

.footer .footer_content_wrap .sns_img_wrap {
    margin-bottom: 10px;
}

.footer_content_wrap .footer_text_wrap ul {
    font-size: 14px;
    display: flex;
}

.footer_content_wrap .footer_text_wrap ul li {
    color: #666666 !important;
    margin: 10px 0px;
}

.contact_text_item02 a {
    color: white !important;
    text-decoration: none !important;
}
.footer_content_wrap .footer_text_wrap ul li:nth-child(1) {
    padding-right: 10px;
}
.footer_content_wrap .footer_text_wrap ul li:nth-child(2) {
    padding: 0px 10px;
}
.footer_content_wrap .footer_text_wrap ul li:nth-child(3) {
    padding-left: 10px;
}
.footer_content_wrap .footer_text_wrap ul li:nth-child(1) {
    border-right: 2px solid #adadad;
}
.footer_content_wrap .footer_text_wrap ul li:nth-child(2) {
    border-right: 2px solid #adadad;
}
.footer_content_wrap .footer_text_wrap ul li a {
    background-color: white;
    border: 1px solid #adadad;
    border-radius: 5px;
    color: #adadad;
    padding: 5px 12px;
    margin-top: -10px;
    cursor: pointer;
}
.footer_logo_wrap {
    margin-top: 10px;
    display: flex;
}
.footer_logo_wrap img {
    display: inline-block;
    margin-right: 20px;
}

.footer_logo_wrap .kb_img {
    width: 41px;
}
.footer_logo_wrap .logo_img {
    width: 130px;
    height: 28px;
    margin-top: 10px;
}
.footer_logo_wrap .logo_img_m {
    display: none;
}
.footer .copy_wrap {
    font-size: 12px;
    margin-top: 10px;
}

.footer .copy_wrap p {
    color: #adadad;
}

.footer .footer_btn_wrap {
    position: absolute;
    top: -36px;
    right: calc(40vw - 400px);
}

.footer .footer_btn_wrap img {
    width: 80px;
    cursor: pointer;
}

.sgi_img,
.venture_img {
    width: 130px;
    margin-right: 30px;
    height: 40px;
}
/* .th_content_box > div {
  width: 50%;
} */
.fst_img_wrap {
    display: flex;
    justify-content: center; /* 좌우 기준 중앙정렬 */
    max-width: 1156px;
    margin: auto;
}
.fst_img_wrap > div:nth-child(1) {
    width: 53%;
}
.fst_img_wrap > div:nth-child(2) {
    width: 47%;
}
.fst_img_wrap img {
    display: inline-block;
    flex-direction: row-reverse;
}

.fst_img_wrap .img_wrap > div {
    position: relative;
}

.fst_img_wrap .text_wrap {
    padding-top: 100px;
    flex-direction: column;
    position: relative;
    text-align: left;
    display: flex;
    justify-content: center;
}
.fst_img_wrap .img_wrap h1,
.fst_img_wrap .img_wrap p {
    display: none;
    transition: 0.3s;
    opacity: 0;
}

.sec_img_wrap {
    display: flex;
    justify-content: center; /* 좌우 기준 중앙정렬 */
    max-width: 1156px;
    margin: auto;
}
.sec_img_wrap > div:nth-child(1) {
    width: 43%;
}
.sec_img_wrap > div:nth-child(2) {
    width: 57%;
}
.sec_img_wrap .img_wrap h1,
.sec_img_wrap .img_wrap p {
    display: none;
    opacity: 0;
}
.sec_img_wrap .text_wrap {
    padding-top: 100px;
    align-items: flex-end;
    flex-direction: column;
    position: relative;
    text-align: left;
    display: flex;
    justify-content: center;
}
.sec_img_wrap .text_wrap .text_inner {
    width: 50%;
    margin-top: -150px;
}

.sec_img_wrap .img_wrap .img_box {
    position: relative;
    display: flex;
    justify-content: flex-start;
}


br.only-sm, br.only-md, br.only-lg { display: none; }


/* Keyframes */
@keyframes bob {
    0%   { transform: translateY(0); }
    50%  { transform: translateY(-14px); }
    100% { transform: translateY(0); }
}
@keyframes tilt {
    0%   { transform: rotate(-3deg) translateX(0); }
    50%  { transform: rotate( 1.5deg) translateX(2px); }
    100% { transform: rotate(-3deg) translateX(0); }
}
@keyframes shadowPulse {
    0%,100% { transform: translateX(-50%) scale(1);   opacity:.70; filter: blur(8px); }
    50%     { transform: translateX(-50%) scale(0.9); opacity:.55; filter: blur(10px); }
}

/* 모션 민감 사용자 배려 */
@media (prefers-reduced-motion: reduce){
    .floaty, .floaty__inner, .floaty::after { animation: none !important; }
}

/* 트리거가 붙으면 1초 간격으로 1→2→3 */
@keyframes scribbleIn {
    0%   { opacity:0; transform: translate(-50%,-50%) rotate(var(--angle)) scaleX(.7); filter: blur(3px); }
    60%  { opacity:1; }
    100% { opacity:1; transform: translate(-50%,-50%) rotate(var(--angle)) scaleX(1); filter: blur(0); }
}
.animate-strikes .strike--1::after { animation: scribbleIn .7s cubic-bezier(.22,.7,.31,1) .0s  both; }
.animate-strikes .strike--2::after { animation: scribbleIn .7s cubic-bezier(.22,.7,.31,1) 1.0s both; }
.animate-strikes .strike--3::after { animation: scribbleIn .7s cubic-bezier(.22,.7,.31,1) 2.0s both; }

/* 접근성 */
@media (prefers-reduced-motion: reduce){
    .title-outline .strike::after{ opacity:1; transform: translate(-50%,-50%) rotate(var(--angle)) scaleX(1); filter:none; }
    .animate-strikes .strike--1::after,
    .animate-strikes .strike--2::after,
    .animate-strikes .strike--3::after { animation:none !important; }
}


@media (max-width: 1350px){
    br.only-lg { display: inline; }
}

@media (max-width: 1200px){
    .illust-container{ display: unset }
    .sec-content .steps.web   { display: none; }
    .illust-container .steps.mobile{ display: flex; }
    .step-title{ font-size: 1.2rem }
    .step-desc{ font-size: 1.0rem }
    .time{ font-size: 1.0rem }
    .steps-content{ padding: 1rem 14px 2rem 14px; }
    .step-card { padding: 20px 22px}
    .review-prev{ left:-12px; }
    .review-next{ right:-12px; }
    .bubble{
        right: -8rem;
        top: 0;
    }
    .bubble { right: -6rem }

}

@media (max-width: 1024px) {
    .story-content {
        grid-template-columns: 1fr;
    }

    .story-item {
        grid-template-columns: 1fr; /* 세로 정렬 */
        max-width: 100%;
    }

    .ceo-inner {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .ceo-sign {
        /*justify-content: center;*/
    }
    .ceo-text {
        grid-template-columns: 1fr;     /* 단일 컬럼 */
        grid-auto-flow: row;
        grid-template-rows: auto auto;  /* 2행 고정 */
        row-gap: 36px;
    }

    .ceo-text h2 {
        font-size: 1.75rem;
    }
}



@media (max-width: 960px){
    .split{ grid-template-columns: 1fr; grid-auto-rows: 5fr 5fr; }
    .split::before{ display:none; }
    .panel .inner{ padding: clamp(24px, 6vw, 56px); }
    .panel--white, .panel--gradient { justify-content: center; text-align: center; }
    .review-prev{ left:0; }
    .review-next{ right:0; }
    .floaty{
        right: 20%;
        top:   -50px;
    }
    .story-content, .ceo-message {padding: 56px clamp(1.5rem, 6vw, 8rem);}

}

@media (max-width: 768px){
    .section1::before{
        bottom: 0;
        width: 140vw;
        height: 50vh;
        opacity: .98;
    }

    .store {
        width: 10rem;
    }
    /*.sec-title h1 {font-size: 26px;}*/
    .steps { gap: 1rem; }
    .step-illust{ width: clamp(130px, 55vw, 180px); }
    .step-title{ font-size: 16px }
    .step-desc{ font-size: 14px }
    .time{ font-size: 14px; gap: 2px; }
    .steps-content{ padding: clamp(4px, 8px, 16px) 8px 1.2rem 8px; gap: 16px; }
    .step-card { padding: 12px 16px}
    .check_item { flex-direction: column; align-items: center; gap: 0; margin-top: 6px; }
    .badge { width: 18px; height: 18px;}
    .label { font-size: 16px;}
    .arrow { width: 80px; margin: 0; }
    .review-wrap { margin: 24px; }
    .review-swiper { overflow: visible }

    .fade{ width: 100px; }
    .fade{ display:none; }
    .review-nav{ display:none; }
    .story-banner__content { left: clamp(1.5rem, 6vw, 8rem) }
    .story-banner__bg { width: 100%; border-radius: 0; }
    .company-story { padding-top: 0; }
    .section1 .pins{ display:none; }
    .store.app  { background-image:url("/img/icon/ios_wh.svg"); }
    .store.app:hover  { background-image:url("/img/icon/ios_wh.svg"); }

    .store.play { background-image:url("/img/icon/aos_wh.svg"); }
    .store.play:hover { background-image:url("/img/icon/aos_wh.svg"); }

    .store.app-line:hover  { background-image:url("/img/icon/ios_line.svg"); }

    .store.play-line:hover { background-image:url("/img/icon/ios_line.svg"); }
    .store-btn { gap: 12px; }
    .title-solid { letter-spacing: 0 }
}

@media (max-width: 640px){
    .host-link.desktop { display:none; }
    .host-link.mobile  { display:inline-block; }
    br.only-md { display: inline; }
    /*.step-illust{ width: clamp(100px, 55vw, 200px); }*/
    .navbar {
        padding: 1rem 2rem;
    }
    .navbar .logo img.web    { display: none; }
    .navbar .logo img.mobile { display: block; }
    .bubble{
        right: auto;        /* 모바일에서는 왼쪽/가운데 등 원하는 위치로 */
        left: 3rem;
        top: 0;
        transform: translateX(-50%) scale(.9);
        width: 8.5rem;      /* 모바일 크기 */
    }

    .section1 .mobile-bottom-hint{
        display:block;
    }
    .footer_content_wrap .footer_text_wrap ul {
        flex-wrap: wrap;
        /*flex-direction: column;*/
    }
    .footer_content_wrap .footer_text_wrap ul li {
        margin: 10px 10px 0 0;
    }
    .footer_content_wrap .footer_text_wrap ul li:nth-child(1),
    .footer_content_wrap .footer_text_wrap ul li:nth-child(2),
    .footer_content_wrap .footer_text_wrap ul li:nth-child(3)
    {
        padding: 0;
        border-right: unset;
    }
    .ceo-sign img {
        width: 60px;
        height: auto;
    }

}

@media (max-width: 480px){
    br.only-sm { display: inline; }
    .step-illust{ width: clamp(100px, 55vw, 135px); }
    .phone{ width: clamp(310px, 70%, 320px) }
    .phone-screen {
        width: clamp(460px, 100%, 480px);
        left: unset;
        bottom: 13%;
    }
    .store { width: 9rem; }
    .main-fade { opacity: 0; }
    .section1_top_container h1 { font-size: 1.4rem; }
    .section1_top_container .logo { width: 12rem; }
    .floaty{ right: 30px; }
    .review-container { padding-bottom: 2rem }
    .review-body{
        line-height: 1.6;
        padding: 0 28px 28px;
    }
    .review-head{
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 28px;
    }
    .review-head .avatar{
        width: 36px; height: 36px; flex:0 0 36px;
    }
    /*.review-head .meta{ display:flex; gap:6px; align-items: baseline; }*/
    .review-head .meta strong{ font-weight:700; color:#1e293b; }
    .review-head .meta span{ font-size: 14px; }
    .review-cta { gap: 10px; }

}

@media (max-width: 400px){
    .phone{ width: clamp(260px, 70%, 260px) }
    .phone-screen {
        width: clamp(390px, 100%, 400px);
        left: unset;
        bottom: 11%;
        overflow: visible;
    }
    /*.phone{ width: min(94vw, 500px); }*/
    /*.phone-screen .swiper-slide{width: 350px;}*/
}