/* 모든 요소에 NanumSquare 폰트 적용 */
html, body {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    overflow-x: hidden;
    font-family: 'NanumSquare', sans-serif;
    overscroll-behavior-y: contain; /* 당길 때 레이아웃 튐 완화 */
}
* {
    font-family: inherit;
    box-sizing: border-box;
    text-decoration-line: none;
}
/* 헤더(60px) 제외한 본문 높이를 '보이는 화면'에 정확히 맞춤 */
/*.app-body {*/
/*    min-height: calc(100svh - 60px);*/
/*    position: relative;*/
/*    box-sizing: border-box;*/
/*}*/

/*body.sidebar-open {*/
/*    overflow: hidden;*/
/*}*/
/*.main-content {*/
/*    min-height: calc(100vh - 60px);  !* 화면 전체 높이에서 헤더 빼기 *!*/
/*    background-image: url("../../images/background/img_1.png");*/
/*    width: 100%;*/
/*    background-repeat: no-repeat;*/
/*    background-size: cover;*/
/*    position: relative;*/

/*}*/

html,
body {
    position: relative;
}

body {
    font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
    font-size: 14px;
    color: #fff;
    background: url("../../images/background/img_1.png") no-repeat center center ;
    background-size: cover;
    margin: 0;
    padding: 0;
    height: 100svh;
}

main{
    min-height: calc(100svh - 60px);
    width: 100%;
    background: transparent; /* 배경 제거 */


}

.main-content { flex: 1 1 auto; min-width: 0; }

.swiper {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 170px;
    padding-bottom: 100px;
    overflow: hidden;
}

.swiper-slide {
    display: flex;
    align-items: center;

    justify-content: center;
    height: auto    ;
    background: transparent !important;

}
.swiper-wrapper{
    border-radius: 24px;
    width: 300px;
    .swiper-slide{
        height: auto;
        transition: transform .5s;
        &.swiper-slide-next {
            transform: scale(1.4);
            z-index: 1;
        }
    }
}

.swiper-slide .card {
    width: 300px;
    height: 370px;
    padding: 32px 28px 36px;
    border-radius: 15px;
    background: #ffffff;
    box-shadow:
            0 22px 50px rgba(27, 23, 78, 0.25),
            inset 0 0 0 1px rgba(255,255,255,0.6);
    text-align: center;
    color: #2b2f39;
    position: relative;
    padding-bottom: 20px;
}

.card .icon {
    width: 84px;
    height: 84px;
    margin: 6px auto 18px;
    border-radius: 22px;
    display: grid;
    place-items: center;
    font-size: 40px;           /* 이모지 사용 시 */
    line-height: 1;
    color: #0b2a16;
    box-shadow:
            0 10px 20px rgba(26, 166, 95, 0.35),
            inset 0 2px 8px rgba(255,255,255,0.45);
}
.card h1 {
    margin: 6px 0 8px;
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
}
.card p {
    margin: 0;
    font-size: 14px;
    color: #6b7280; /* 중간 회색 */
}
.card p + p { margin-top: 2px; }

.yellow-gradation{
    background: linear-gradient(135deg, #F87171 0%, #FBBF24 100%);
}
.blue-gradation{
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}
.puple-gradation{
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
}
.green-gradation{
    background: linear-gradient(135deg, #22C55E 0%, #16A34A 100%);
}
/* 시작하기 버튼 — 초록 캡슐, 그림자 */
.card button,
.card .btn-start {
    margin-top: 22px;
    padding: 12px 22px;
    border: 0;
    border-radius: 999px;
    font-weight: 800;
    font-size: 15px;
    color: #fff;
    box-shadow: 0 10px 20px rgba(30, 161, 89, 0.35);
    cursor: pointer;
    transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.card button:hover,
.card .btn-start:hover {
    transform: translateY(-1px);
    box-shadow: 0 14px 26px rgba(30, 161, 89, 0.45);
    filter: brightness(1.02);
}
.card button:active,
.card .btn-start:active {
    transform: translateY(0);
    box-shadow: 0 8px 18px rgba(30, 161, 89, 0.35);
}

/* 부드러운 가장자리 하이라이트 (옵션) */
.card::after{
    content:"";
    position:absolute; inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 1px 12px rgba(255,255,255,.65);
    pointer-events:none;
}
element.style {
    width: 300px;
}