.prepayment-qnas {
    margin: 0 auto;
    padding: clamp(69px, 4.5vw, 103px) 0;
    width: 88vw;
    display: flex;
    gap: clamp(130px, 9.7vw, 242px);
}

.prepayment-qnas__column {
    height: clamp(460px, 30.1vw, 680px);
    display: flex;
    flex-direction: column;
    gap: clamp(36px, 2.4vw, 54px);
    position: relative;
}

.qna__title {
    color: #212121;
    font-style: normal;
    font-weight: 600;
    line-height: 160%;
}

.qna__description {
    color: #212121;
    font-style: normal;
    font-weight: 400;
    line-height: 160%;
}

.qna__nav {
    display: flex;
    gap: clamp(43px, 2.8vw, 64px);
}

.qna__nav-btn {
    width: clamp(12px, 0.8vw, 18px);
    height: clamp(20px, 1.3vw, 30px);
    cursor: pointer;
    fill: #212121;
    transition: all 0.3s ease;
}
.qna__nav-btn:hover {
    opacity: 0.7;
}
.qna__nav-btn:active {
    transform: scale(0.95);
}

.qna-section__btn {
    margin-top: auto;
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.qna-section__btn:hover {
    opacity: 0.7;
}

.qna-section__btn-text {
    position: relative;
    z-index: 2;
    color: #555;
    text-align: right;
    font-style: normal;
    font-weight: 500;
    line-height: 145%;
}

.qna-section__btn-arrow {
    position: absolute;
    right: clamp(-42px, -2vw, -34px);
    bottom: clamp(-7px, -0.3vw, -5px);
    z-index: 1;
    pointer-events: none;
}

.prepayment-qnas__carousel {
    flex: 1;
    position: relative;
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.carousel-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
}

.carousel-track {
    display: flex;
    gap: clamp(32px, 2.1vw, 48px);
    position: relative;
    align-items: flex-end;
    will-change: transform;
    transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.qna {
    padding: clamp(23px, 1.5vw, 35px);
    border-radius: clamp(4px, 0.3vw, 6px);
    width: clamp(330px, 21.5vw, 496px);
    height: clamp(424px, 27.7vw, 636px);
    display: flex;
    flex-direction: column;
    box-shadow: 6px 2px 10px 0 #E2E4EA;
    flex-shrink: 0;
    position: relative;
    
    /* 기본: 아래 위치 */
    margin-top: clamp(36px, 2.4vw, 44px);
    will-change: transform, margin-top;
    transition: transform 0.3s ease, margin-top 0.3s ease;
}

.qna::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(1px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 3;
    border-radius: clamp(4px, 0.3vw, 6px);
}

.qna.overlay::before {
    opacity: 1;
}

/* up 클래스: 위로 올라감 */
.qna.up {
    margin-top: 0;
    transform: translateY(clamp(-36px, -2.4vw, -44px));
}

/* .qna--card-1 { background: #012EA2; }
.qna--card-2 { background: #E4EAFE; }
.qna--card-3 { background: #6F88CA; } */
.qna--card-1, .qna--card-2, .qna--card-3 { background: #DEE1EA; }

.qna__question-1, .qna__question-2, .qna__question-3 {
    width: clamp(230px, 15vw, 346px);
    height: clamp(124px, 8.1vw, 186px);
    position: relative;
    border-radius: clamp(12px, 0.8vw, 18px);
    padding: clamp(12px, 0.8vw, 18px) clamp(24px, 1.6vw, 36px);
    margin-bottom: clamp(46px, 3vw, 70px);
    z-index: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* .qna__question-1 { background: #6F88CA; color: #FFF; }
.qna__question-2 { background: #395EC0; color: #FFF; }
.qna__question-3 { background: #FFF; color: #012EA2; } */
.qna[data-position="1"] .qna__question-1,
.qna[data-position="1"] .qna__question-2,
.qna[data-position="1"] .qna__question-3 {
    background: #347BE5;
    color: #FFF;
}
.qna:not([data-position="1"]) .qna__question-1,
.qna:not([data-position="1"]) .qna__question-2,
.qna:not([data-position="1"]) .qna__question-3 {
    background: #FFF;
    color: #212121;
}

.qna__question-1::after, .qna__question-2::after, .qna__question-3::after {
    content: '';
    position: absolute;
    bottom: clamp(-33px, -2.6vw, -49px);
    left: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: clamp(49px, 3.2vw, 73px) clamp(47px, 3.1vw, 71px) 0 0px;
    z-index: -1;
}

/* .qna__question-1::after { border-color: #6F88CA transparent transparent transparent; }
.qna__question-2::after { border-color: #395EC0 transparent transparent transparent; }
.qna__question-3::after { border-color: #FFF transparent transparent transparent; } */
.qna[data-position="1"] .qna__question-1::after,
.qna[data-position="1"] .qna__question-2::after,
.qna[data-position="1"] .qna__question-3::after {
    border-color: #347BE5 transparent transparent transparent;
}
.qna:not([data-position="1"]) .qna__question-1::after,
.qna:not([data-position="1"]) .qna__question-2::after,
.qna:not([data-position="1"]) .qna__question-3::after {
    border-color: #FFF transparent transparent transparent;
}

.qna__q-num {
    display: block;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    flex-shrink: 0;
}

.qna__q-title {
    display: block;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    word-break: keep-all;
    overflow-wrap: break-word;
}

.qna__answer-1, .qna__answer-2, .qna__answer-3 {
    margin-left: auto;
    width: clamp(261px, 17vw, 391px);
    height: clamp(173px, 11.3vw, 259px);
    position: relative;
    border-radius: clamp(12px, 0.8vw, 18px);
    padding: clamp(12px, 0.8vw, 18px) clamp(24px, 1.6vw, 36px);
    z-index: 0;
    display: flex;
    flex-direction: column;
}

/* .qna__answer-1 { background: #FFF; color: #012EA2; }
.qna__answer-2 { background: #C1CDEF; color: #012EA2; }
.qna__answer-3 { background: #012EA2; color: #FFF; } */
.qna[data-position="1"] .qna__answer-1,
.qna[data-position="1"] .qna__answer-2,
.qna[data-position="1"] .qna__answer-3 {
    background: #FFF;
    color: #212121;
}
.qna:not([data-position="1"]) .qna__answer-1,
.qna:not([data-position="1"]) .qna__answer-2,
.qna:not([data-position="1"]) .qna__answer-3 {
    background: #347BE5;
    color: #FFF;
}

.qna__answer-1::after, .qna__answer-2::after, .qna__answer-3::after {
    content: '';
    position: absolute;
    bottom: clamp(-33px, -2.6vw, -49px);
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: clamp(49px, 3.2vw, 73px) 0px 0px clamp(47px, 3.1vw, 71px);
    z-index: -1;
}

/* .qna__answer-1::after { border-color: #FFF transparent transparent transparent; }
.qna__answer-2::after { border-color: #C1CDEF transparent transparent transparent; }
.qna__answer-3::after { border-color: #012EA2 transparent transparent transparent; } */
.qna[data-position="1"] .qna__answer-1::after,
.qna[data-position="1"] .qna__answer-2::after,
.qna[data-position="1"] .qna__answer-3::after {
    border-color: #FFF transparent transparent transparent;
}
.qna:not([data-position="1"]) .qna__answer-1::after,
.qna:not([data-position="1"]) .qna__answer-2::after,
.qna:not([data-position="1"]) .qna__answer-3::after {
    border-color: #347BE5 transparent transparent transparent;
}

.qna__a {
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    flex-shrink: 0;
}

.qna__a-content {
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    margin: 0;
    
    /* 말줄임표 적용 */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: keep-all;
    white-space: normal;
}

.qna__arrow-1, .qna__arrow-2, .qna__arrow-3 {
    margin-top: auto;
    transition: transform 0.3s ease;
}

.qna__arrow-1:hover, .qna__arrow-2:hover, .qna__arrow-3:hover {
    transform: translate(3px, -3px);
}

.qna__arrow-1 svg, .qna__arrow-2 svg, .qna__arrow-3 svg {
    width: 25px;
    height: 25px;
}

.qna__arrow-1 { fill: #6F88CA; }
.qna__arrow-2 { fill: #6F88CA; }
.qna__arrow-3 { fill: #C1CDEF; }


/* 모바일 환경 최적화 */
body.mobile .prepayment-qnas__column,
body[data-mobile="true"] .prepayment-qnas__column {
  height: auto;
}

body.mobile .qna__nav,
body[data-mobile="true"] .qna__nav {
  margin-bottom: clamp(55px, 3.6vw, 83px);
}

body.mobile .prepayment-qnas,
body[data-mobile="true"] .prepayment-qnas {
  flex-direction: column;
  gap: 20px;
}