@charset "UTF-8";
/* 고정 결제 */
.mo-fixed-bottom-wrap {display:flex;align-items:center;justify-content:center;flex-direction:column;}
.mo-fixed-btn-wrap {display:flex;align-items:center;gap:12px;margin-top:40px;}
.mo-fixed-bottom-wrap > .total-wrap {display:flex;align-items:center;justify-content:center;width:100%;padding:14px;border:1px solid var(--border-color);}
.mo-fixed-bottom-wrap.no-bt > .total-wrap{border-top:0;width:100%;}

@media (max-width:767px) {
    .mo-fixed-bottom-wrap {position:fixed;bottom:0;left:0;width:100%;background-color:var(--color-white);z-index:100;padding-bottom:env(safe-area-inset-bottom);}
    /* 고정바는 흐름에서 빠지므로 #wrap 하단에 그만큼 여백을 확보해야 푸터가 가려지지 않는다.
       실제 여백은 fixed_bottom_space.js 가 고정바 높이를 재서 #wrap 에 직접 적용한다.
       (fixed-wrap.css 를 로드하지 않는 화면도 있어 CSS 규칙에 의존하지 않는다) */
    .mo-fixed-bottom-wrap > .total-wrap {justify-content:space-between;}
    .mo-fixed-bottom-wrap > .total-wrap > .sum-wrap {width: 100%;justify-content:space-between;}

    .mo-fixed-bottom-wrap > .total-wrap > .sum-wrap > .flex-wrap {gap:4px;flex-wrap:wrap;text-align:right;}
    .mo-fixed-bottom-wrap > .total-wrap > .sum-wrap > .flex-wrap > span {text-align:right;}
    .mo-fixed-bottom-wrap.no-bt > .total-wrap {border-top:1px solid var(--border-color);}
    .mo-fixed-btn-wrap {padding:20px 12px;width:100%;margin-top:0;gap:8px;}
    .mo-fixed-btn-wrap > .btn.size-nm {min-width:0;flex:1;}
}

/* bottom sheet dim */
.bottom-sheet {position: fixed;inset: 0;z-index: 1000;display: none;align-items: flex-end;justify-content: center;}
.bottom-sheet.active {display: none!important;}

/* 열렸을 때 */
.bottom-sheet.active {
    display: flex;
}

/* bottom sheet 본체 */
.bottom-sheet-wrap {position: relative;width: 100%;max-width: 430px;background: var(--color-white);border-radius: 20px 20px 0 0;overflow: hidden;box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.12);padding-top: 17px;padding-bottom: calc(12px + env(safe-area-inset-bottom));}

/* 상단 회색 핸들 */
.bottom-sheet-wrap::before {content: "";position: absolute;top: 12px;left: 50%;width: 52px;height: 5px;border-radius: 999px;background: #efefef;transform: translateX(-50%);}

/* 상단 영역 */
.bottom-top {height: 64px;display: flex;justify-content: space-between;gap:12px;align-items: center;padding: 0 20px;box-sizing: border-box;}
.bottom-top p {margin: 0;font-size: 16px;font-weight: var(--fw-medium);color: var(--color-black);text-align: center;}

/* 본문 */
.bottom-body {padding: 8px 20px 8px;}
/* 하단 버튼 영역 */
.bottom-btn {padding: 12px 20px 8px;}
.bottom-btn > .btn {flex:1;}
@media (max-width:767px) {
    .bottom-sheet.active {display: flex!important;}
}