@import url("../css/roboto.css");

.btn-check:checked + .btn.btn-outline.btn-outline-dark,
.btn-check:active + .btn.btn-outline.btn-outline-dark,
.btn.btn-outline.btn-outline-dark:focus:not(.btn-active),
.btn.btn-outline.btn-outline-dark:hover:not(.btn-active),
.btn.btn-outline.btn-outline-dark:active:not(.btn-active),
.btn.btn-outline.btn-outline-dark.active,
.btn.btn-outline.btn-outline-dark.show,
.show > .btn.btn-outline.btn-outline-dark {
    --kt-dark-light: #000;
    color: #fff !important;
}

.form-label {
    font-size: 0.9rem !important;
    font-weight: 400 !important;
}

.nav-link {
    font-weight: 500 !important;
}

.dot {
    height: 0.8rem; /* 12px */
    width: 0.8rem; /* 12px */
    border-radius: 50%;
    display: inline-block;
}

.icon-add-brand-1 {
    background-image: url(/assets/images/icon/icon-add-duotone-brand-1.svg);
}
a:hover .icon-add-brand-1,
button:hover .icon-add-brand-1 {
    background-image: url(/assets/images/icon/icon-add-duotone-white.svg);
}

/* 가맹점 */
.icon-myinfo-shop {
    background-image: url(/assets/images/icon/my-info/icon-shop.svg);
}
/* a:hover .icon-myinfo-shop {
  background-image: url(/assets/images/icon/my-info/icon-shop-active.svg);
} */
/* 서류 및 인증 */
.icon-myinfo-document {
    background-image: url(/assets/images/icon/my-info/icon-document.svg);
}
/* a:hover .icon-myinfo-document {
  background-image: url(/assets/images/icon/my-info/icon-document-active.svg);
} */
/* 매출연결 */
.icon-myinfo-connect {
    background-image: url(/assets/images/icon/my-info/icon-connect.svg);
}
/* a:hover .icon-myinfo-connect {
  background-image: url(/assets/images/icon/my-info/icon-connect-active.svg);
} */
/* 공지 */
.icon-myinfo-notice {
    background-image: url(/assets/images/icon/my-info/icon-notice.svg);
}
/* a:hover .icon-myinfo-notice {
  background-image: url(/assets/images/icon/my-info/icon-notice-active.svg);
} */
/* 고객센터 */
.icon-myinfo-customer-service {
    background-image: url(/assets/images/icon/my-info/icon-customer-service.svg);
}
/* a:hover .icon-myinfo-customer-service {
  background-image: url(/assets/images/icon/my-info/icon-customer-service-active.svg);
} */
/* 약관 */
.icon-myinfo-terms {
    background-image: url(/assets/images/icon/my-info/icon-terms.svg);
}
/* a:hover .icon-myinfo-terms {
  background-image: url(/assets/images/icon/my-info/icon-terms-active.svg);
} */
/* 설정 */
.icon-myinfo-settings {
    background-image: url(/assets/images/icon/my-info/icon-settings.svg);
}
/* a:hover .icon-myinfo-settings {
  background-image: url(/assets/images/icon/my-info/icon-settings-active.svg);
} */

.icon-sales {
    background-image: url(/assets/images/sales-income.svg);
}
.icon-sales-exclude {
    background-image: url(/assets/images/sales-exclude.svg);
}
.icon-deduct {
    background-image: url(/assets/images/sales-deduct.svg);
}
.icon-prepay-total {
    background-image: url(/assets/images/prepay-total.svg);
}
.icon-prepay-refund {
    background-image: url(/assets/images/prepay-refund.svg);
}
.icon-prepay-refund-total {
    background-image: url(/assets/images/prepay-refund-total.svg);
}
.icon-prepay-discount {
    background-image: url(/assets/images/prepay-discount.svg);
}
.icon-adjustmment {
    background-image: url(/assets/images/sales-adjust.svg);
}
.icon-delivery {
    background-image: url(/assets/images/delivery.svg);
}

.fv-plugins-message-container {
    display: none !important;
}

#loginContainer {
    /* background: url('/assets/images/bg-login.svg'); */
}

.bottom-nav-item i,
.bottom-nav-item span {
    color: var(--kt-text-gray-600);
}

.bottom-nav-item.active i,
.bottom-nav-item.active span,
.bottom-nav-item:hover i,
.bottom-nav-item:hover span {
    color: var(--kt-brand-1);
}

.bottom-nav-item:hover .icon {
    animation: bounce-once 0.4s ease-in;
}
/* bounce 애니메이션 정의 */
@keyframes bounce-once {
    0%   { transform: translateY(0); }
    20%  { transform: translateY(-2.5px); }
    100% { transform: translateY(0); }
  }

.bottom-nav-item .icon-tab-1 {
    background-image: url(/assets/images/icon/tab-1.svg);
}
.bottom-nav-item:hover .icon-tab-1 {
    background-image: url(/assets/images/icon/tab-1-hover.svg);
}
.bottom-nav-item.active .icon-tab-1 {
    background-image: url(/assets/images/icon/tab-1-active.svg);
}
.bottom-nav-item .icon-tab-2 {
    background-image: url(/assets/images/icon/tab-2.svg);
}
.bottom-nav-item:hover .icon-tab-2 {
    background-image: url(/assets/images/icon/tab-2-hover.svg);
}
.bottom-nav-item.active .icon-tab-2 {
    background-image: url(/assets/images/icon/tab-2-active.svg);
}
.bottom-nav-item .icon-tab-3 {
    background-image: url(/assets/images/icon/tab-3.svg);
}
.bottom-nav-item:hover .icon-tab-3 {
    background-image: url(/assets/images/icon/tab-3-hover.svg);
}
.bottom-nav-item.active .icon-tab-3 {
    background-image: url(/assets/images/icon/tab-3-active.svg);
}
.bottom-nav-item .icon-tab-4 {
    background-image: url(/assets/images/icon/tab-4.svg);
}
.bottom-nav-item:hover .icon-tab-4 {
    background-image: url(/assets/images/icon/tab-4-hover.svg);
}
.bottom-nav-item.active .icon-tab-4 {
    background-image: url(/assets/images/icon/tab-4-active.svg);
}

.bg-brand-1-dark {
    background-color: #003a83 !important;
}

.text-hanabank {
    color: #069279;
}

.badge-light-hanabank {
    background-color: #e5f4f1 !important;
    color: #069279 !important;
    font-weight: 500 !important;
}

.badge-hanabank {
    color: #fff !important;
    background-color: #069279 !important;
    font-weight: 500 !important;
}

.drag-scroll {
    contain: layout paint;
}

.custom-list-counter {
    counter-reset: item; /* counter 초기화 */
    list-style-type: none; /* 기본 목록 스타일 제거 */
    padding-left: 0;
}

.custom-list-counter li {
    counter-increment: item; /* 항목에 대해 카운터 증가 */
    margin-bottom: 10px;
    position: relative;
    padding-left: 20px; /* 텍스트와 숫자 간격 */
}

.custom-list-counter li::before {
    content: counter(item); /* 카운터 값 출력 */
    background-color: black;
    color: white;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    display: inline-block;
    text-align: center;
    line-height: 16px;
    position: absolute;
    font-size: 10px;
    margin-top: 4px;
    left: 0;
    top: 0;
}

.btn-check:not(:checked):not(:active):not(:hover) + .btn-outline-brand-1 {
    border-color: var(--kt-dark) !important;
    color: var(--kt-dark) !important;
}

#chatInquiry {
    transition: transform 0.2s ease-in-out;
}

.chat-inquiry-btn {
    background-image: url(/assets/images/chat-btn.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.1)); /* 그림자 추가 */
}

.chat-inquiry-btn:hover,
.chat-inquiry-btn:active {
    background-image: url(/assets/images/chat-btn-hover.png);
}

.chat-inquiry-btn-sm {
    background-image: url(/assets/images/chat-btn-sm.png);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    filter: drop-shadow(0px 0px 15px rgba(0, 0, 0, 0.1)); /* 그림자 추가 */
}

.chat-inquiry-btn-sm:hover,
.chat-inquiry-btn-sm:active {
    background-image: url(/assets/images/chat-btn-sm-hover.png);
}

#bottomNavigation {
    transition: transform 0.2s ease-in-out; /* 부드러운 숨김/보임 애니메이션 */
    transform: translateY(0); /* 초기 상태 (보이는 상태) */
    z-index: 1041;
}

#bottomNavigation.hidden {
    transform: translateY(100%); /* 숨김 상태 */
}

/** ========================================================================
 *  Site Custom Styles
 *  ========================================================================== */

.faq-list-item[aria-expanded="true"] {
    background-color: var(--kt-light) !important;
}

/** ========================================================================
 *  Custom Accordion
 *  ========================================================================== */

.accordion-custom .accordion-button {
    padding: 0 !important;
    background-color: #fff;
    color: unset;
}

.accordion-custom .accordion-button:not(.collapsed) {
    color: unset !important;
    background-color: #fff;
    box-shadow: unset !important;
}

.accordion-custom .accordion-button:not(.collapsed)::after {
    background-image: var(--bs-accordion-btn-icon) !important;
}

/* =============================================================================
   숫자 표시와 관련된 부분
   ========================================================================== */

.price-big .number,
.price-xxl .number,
.price-xl .number,
.price-lg .number,
.price-md .number,
.price-sm .number,
.price-xs .number {
    font-family: "Roboto", sans-serif !important;
    line-height: 1.2;
}

.price-big .unit,
.price-xxl .unit,
.price-xl .unit,
.price-lg .unit,
.price-md .unit,
.price-sm .unit,
.price-xs .unit {
    margin-left: 1px;
    font-weight: 500;
}

.price-big,
.price-xxl,
.price-xl,
.price-lg,
.price-md,
.price-sm,
.price-xs {
    display: inline-flex;
    flex-direction: row;
    align-items: baseline;
}

.price-big .number {
    font-size: 3rem;
    font-weight: 500;
}

.price-xxl .number {
    font-size: 2.25rem;
    font-weight: 500;
}

.price-xl .number {
    font-size: 1.6rem;
    font-weight: 500;
}

.price-lg .number {
    font-size: 1.4rem;
    font-weight: 500;
}

.price-md .number {
    font-size: 1.1rem;
    font-weight: 500;
}

.price-sm .number {
    font-size: 1rem;
    font-weight: 500;
}

.price-xs .number {
    font-size: 0.9rem;
    font-weight: 500;
}

.price-big .unit {
    font-size: 1.75rem;
    margin-left: 2px;
}

.price-xxl .unit {
    font-size: 1.3125rem;
    margin-left: 2px;
}

.price-xl .unit {
    font-size: 1rem;
    margin-left: 2px;
}

.price-lg .unit {
    font-size: 0.9rem;
}

.price-md .unit {
    font-size: 0.75rem;
}

.price-sm .unit {
    font-size: 0.7rem;
}

.price-xs .unit {
    font-size: 0.6rem;
}

/* =============================================================================
   List Item
   ========================================================================== */

.list-item-sm {
    padding: 0.5rem 0.625rem;
    margin: 0 -0.625rem;
}
.list-item-md {
    padding: 0.625rem 0.75rem;
    margin: 0 -0.75rem;
}
.list-item-lg {
    padding: 0.85rem 0.9rem;
    margin: 0 -0.9rem;
}

/* =============================================================================
   Modal
   ========================================================================== */

.modal-fullscreen-custom .modal-content {
    border-top-left-radius: var(--bs-modal-border-radius) !important;
    border-top-right-radius: var(--bs-modal-border-radius) !important;
}
.modal-fullscreen-custom .modal-header {
    border-top-left-radius: var(--bs-modal-border-radius) !important;
    border-top-right-radius: var(--bs-modal-border-radius) !important;
}

.modal.fade .modal-dialog.modal-fullscreen-custom {
    transform: translate(0, 50px) !important;
}

.modal.show .modal-dialog.modal-fullscreen-custom {
    transform: none !important;
}

/* =============================================================================
   FullCalendar
   ========================================================================== */

#monthlySalesCalendar .fc-daygrid-event,
#monthlySalesCalendar .fc-event-title {
    margin-top: 0 !important;
    font-size: 0.7rem !important;
    padding: 0 !important;
    text-align: right;
}

#monthlySalesCalendar .fc-daygrid-day-events {
    margin-bottom: 0 !important;
    padding-left: 0.15vw !important;
    padding-right: 0.15vw !important;
    display: flex;
    flex-direction: column;
    align-items: center;
}

#monthlySalesCalendar .fc-daygrid-day-top {
    display: flex;
    justify-content: center;
}

#monthlySalesCalendar .fc-event-title-container {
    line-height: 1 !important;
}

.fc-day-today {
    background-color: unset !important;
}

.fc-day-today .fc-daygrid-day-number {
    background-color: var(--kt-brand-1) !important;
    text-align: center;
    vertical-align: middle;
    color: #fff !important;
    border-radius: 50%;
    height: 1.625rem;
    width: 1.625rem;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fc-day-today .fc-daygrid-day-number:hover {
    background-color: var(--kt-brand-1-active) !important;
    color: #fff !important;
}

.fc-col-header-cell-cushion {
    font-size: 0.8rem !important;
}

.fc-daygrid-day-number {
    font-size: 0.95rem !important;
}

.fc-day-sun .fc-daygrid-day-number,
.fc-day-sun .fc-col-header-cell-cushion {
    color: var(--kt-danger) !important;
}

.fc-day-sat .fc-daygrid-day-number,
.fc-day-sat .fc-col-header-cell-cushion {
    color: #007bff !important;
}

.fc-daygrid-day-top {
    justify-content: center;
}

.fc-scrollgrid,
.fc table,
.fc td,
.fc tr {
    border-left: 0 !important;
    border-right: 0 !important;
    border-bottom: 0 !important;
}

.fc th {
    border-left: 0 !important;
    border-right: 0 !important;
}

/* =============================================================================
    breadcrumb
    ========================================================================== */

.breadcrumb .breadcrumb-item:first-child:after {
    content: "/";
    padding-left: 0.25rem;
}

.breadcrumb .breadcrumb-item:after {
    content: "/";
    padding-left: 0.5rem;
}

.breadcrumb .breadcrumb-item,
.breadcrumb .breadcrumb-item a {
    color: var(--kt-text-gray-600) !important;
    font-weight: 500;
}

.breadcrumb .breadcrumb-item:last-child,
.breadcrumb .breadcrumb-item:last-child a {
    color: var(--kt-text-primary) !important;
    font-weight: 500;
}

.breadcrumb .breadcrumb-item:first-child a {
    display: inline;
    width: 24px;
    height: 24px;
    background-position: center;
    background-image: url("/assets/images/icon/icon-home.svg");
    background-size: contain;
    background-repeat: no-repeat;
}

.breadcrumb .breadcrumb-item:first-child a:hover {
    background-image: url("/assets/images/icon/icon-home-primary.svg");
}

/* =============================================================================
   Brand Page
   ========================================================================== */

#brandContainer {
    /* background: url('/assets/images/bg-login.svg') #F00F0F14 !important; */
}

#brandContainer #brandHeader {
    background-color: transparent;
    box-shadow: unset;
    z-index: 100;
    transition-duration: 100ms;
    transition-property: background-color;
    transition-timing-function: ease-in;
}

.brand-phrase {
    margin-top: 5px;
}

.bg-main-people {
    background: url("/assets/images/brand-main-1.svg") no-repeat;
    background-size: contain;
    background-position: center;
}

#brandContainer #section1 {
    background-color: #003a83 !important;
}

#brandContainer #section2 {
    background-color: #0070ff0f !important;
}

#brandContainer #section2 .step {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    height: 10rem;
}

#brandContainer #section2 .arrow {
    height: 10rem;
    width: 5rem;
    position: relative;
}

#brandContainer #section2 .arrow::after {
    content: "";
    position: absolute;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("/assets/images/brand-arrow.svg");
    height: 2.5rem;
    width: 2.5rem;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

#brandContainer #section2 #step1.step {
    background-image: url("/assets/images/brand-folder.png");
}

#brandContainer #section2 #step2.step {
    background-image: url("/assets/images/brand-apply.png");
}

#brandContainer #section2 #step3.step {
    background-image: url("/assets/images/brand-money.png");
}

#brandContainer #section4 {
    background-color: #0070ff0f !important;
}

.bg-main-sales {
    background: url("/assets/images/bg-brand-sales.png") no-repeat;
    background-size: contain;
    background-position: center;
}

.bg-main-flow {
    background: url("/assets/images/bg-brand-flow.png") no-repeat;
    background-size: contain;
    background-position: center;
}

.bg-main-event {
    background: url("/assets/images/bg-brand-event.png") no-repeat;
    background-size: contain;
    background-position: center;
}

#brandContainer .bg-brand-ai-reply-2 {
    background: url("/assets/images/bg-brand-ai-reply-2.svg") no-repeat;
    background-size: 55% 55%;
    background-position: center;
}

#brandContainer .bg-brand-ai-reply-3 {
    background: url("/assets/images/bg-brand-ai-reply-3.svg") no-repeat;
    background-size: contain;
    background-position: center;
}

#brandContainer #section6 {
    background-color: #0070ff0f !important;
    clip-path: polygon(0 0, 100% 0, 100% 85%, 0 100%); /* 하단 대각선 모양을 만듦 */
    padding-bottom: 75px !important;
}

#brandContainer #section7 {
    /* background-color: #0070ff0f !important; */
}

#brandContainer #section8 swiper-slide {
    text-align: center;
}

#brandContainer #section8 swiper-container {
    max-width: 900px;
    width: 85vw;
}

#brandFooter {
    background-color: #fafcfc;
}

.text-brand-1-dark {
    color: #003a83 !important;
}

.btn-white-30 {
    background-color: rgba(255, 255, 255, 0.3) !important;
    color: #fff !important;
}

.btn-white-30:hover {
    background-color: rgba(0, 0, 0, 0.3) !important;
}

#supportBanner {
    background: url("/assets/images/support-banner-1.png") no-repeat;
    background-size: auto 90%;
    background-position: 80% 100%;
    background-color: #e5f6ff;
}

/* =============================================================================
   Home
   ========================================================================== */

#contractProgressCard .background-image {
    background: url("/assets/images/bg-contract-progress.svg") no-repeat;
    background-size: cover;
}

#downloadAppBanner {
    top: calc(var(--kt-app-header-height) + 0.75rem);
    z-index: 100;
}

/* =============================================================================
   Progress Section
   ========================================================================== */

.progress-section ul {
    --progress-li-width: 5rem;      /* 항목의 너비 */
    --progress-li-gap: 0.5rem;      /* 항목 사이 여백 */
    --progress-li-padding: 0.5rem;
    --progress-dot-size: 0.5rem;    /* 점 크기 */
    --progress-image-size: 3rem;  /* 아이콘 크기 */
    --progress-line-width: calc(var(--progress-li-width) + var(--progress-li-gap)); /* 두 단계 사이 거리 */

    display: flex;
    align-items: start;
    gap: var(--progress-li-gap);
    padding: 0;
    margin: 0;
}

.progress-section li {
    position: relative;
    list-style: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--progress-li-padding);
    width: var(--progress-li-width);
}

.progress-section li:not(:first-child)::before {
    content: "";
    position: absolute;
    top: calc(var(--progress-image-size) + var(--progress-dot-size));
    left: 0;
    z-index: 0;  /* 선은 밑으로 */
    width: calc(var(--progress-line-width) + var(--progress-dot-size));
    height: var(--progress-dot-size);
    border-radius: var(--progress-dot-size);
    background-color: #B0B6BA;
    opacity: 0.25;
    transform: translate(
        calc(-100% + (var(--progress-li-width) / 2) + (var(--progress-dot-size) / 2)),
        var(--progress-li-padding)
    );
}
.progress-section li.success:not(:first-child)::before {
    background-color: var(--kt-success) !important;
    opacity: 0.75;
}
.progress-section li.danger:not(:first-child)::before {
    /* background-color: var(--kt-danger) !important; */
    background-color: var(--kt-success) !important;
    opacity: 0.75;
}

/* 실제 표시는 ::after에서 표시됨 */
.progress-dot {
    position: relative;
    margin: var(--progress-dot-size);
    height: var(--progress-dot-size);
    width: var(--progress-dot-size);
    /* background 삭제 */
    background: none;
}
.progress-dot::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    z-index: 2;  /* dot 은 선보다 위 */
    height: var(--progress-dot-size);
    width: var(--progress-dot-size);
    border-radius: 50%;
    background-color: #B0B6BA;
}

.progress-section li.success .progress-dot::after {
    background-color: var(--kt-success) !important;
}
.progress-section li.success .progress-dot::before {
    background-color: var(--kt-success) !important;
    opacity: 0.75;
}

.progress-section li.danger .progress-dot::after {
    /* background-color: var(--kt-danger) !important; */
    background-color: var(--kt-success) !important;
}
.progress-section li.danger .progress-dot::before {
    /* background-color: var(--kt-danger) !important; */
    background-color: var(--kt-success) !important;
    opacity: 0.75;
}

.progress-section li:first-child .progress-dot::before {
  display: none;
}

.progress-text {
    white-space: nowrap;
    flex: 0 0 auto;
}
.progress-section li.success .progress-text {
    color: var(--kt-success) !important;
}
.progress-section li.danger .progress-text {
    color: var(--kt-success) !important;
    /* color: var(--kt-danger) !important; */
}

.progress-image {
    height: var(--progress-image-size); 
    width: var(--progress-image-size);
}

.progress-section li .progress-sign {
    background: url("/assets/images/contract/progress-sign.svg") no-repeat;
    background-size: cover;
}
.progress-section li.success .progress-sign {
    background: url("/assets/images/contract/progress-sign-success.svg") no-repeat;
    background-size: cover;
}
.progress-section li .progress-review {
    background: url("/assets/images/contract/progress-review.svg") no-repeat;
    background-size: cover;
}
.progress-section li.success .progress-review {
    background: url("/assets/images/contract/progress-review-success.svg") no-repeat;
    background-size: cover;
}
.progress-section li.danger .progress-review {
    background: url("/assets/images/contract/progress-review-danger.svg") no-repeat;
    background-size: cover;
}
.progress-section li .progress-account {
    background: url("/assets/images/contract/progress-account.svg") no-repeat;
    background-size: cover;
}
.progress-section li.success .progress-account {
    background: url("/assets/images/contract/progress-account-success.svg") no-repeat;
    background-size: cover;
}
.progress-section li .progress-start {
    background: url("/assets/images/contract/progress-start.svg") no-repeat;
    background-size: cover;
}
.progress-section li.success .progress-start {
    background: url("/assets/images/contract/progress-start-success.svg") no-repeat;
    background-size: cover;
}

/* =============================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1400px) and (min-width: 1200px) {
    /* xxl */
    #brandContainer .bg-brand-ai-reply-2 {
        background-size: 75% 75% !important;
    }
}
@media (max-width: 1200px) and (min-width: 992px) {
    /* xl */
}
@media (max-width: 991px) and (min-width: 767px) {
    /* lg */
    #brandContainer #section2 .arrow {
        transform: rotate(90deg);
        height: 7rem;
    }
}
@media (max-width: 768px) and (min-width: 576px) {
    /* md */
    #brandContainer #section2 .arrow {
        transform: rotate(90deg);
        height: 7rem;
    }

    #brandContainer #section6 {
        background-color: #0070ff0f !important;
        clip-path: polygon(0 0, 100% 0, 100% 75.6%, 0 100%); /* 하단 대각선 모양을 만듦 */
        padding-bottom: 90px !important;
    }

}
@media (max-width: 576px) {
    /* sm */
    body,
    .app-default {
        background-color: #fff !important;
    }

    .app-header {
        padding: 1rem 0;
        box-shadow: unset !important;
    }

    #loginContainer {
        background: unset;
    }

    #loginContainer .card {
        box-shadow: none !important;
    }

    .breadcrumb {
        display: none !important;
    }

    #brandContainer #section2 .arrow {
        transform: rotate(90deg);
        height: 7rem;
    }

    #brandContainer #section6 {
        background-color: #0070ff0f !important;
        clip-path: polygon(0 0, 100% 0, 100% 81.6%, 0 100%); /* 하단 대각선 모양을 만듦 */
        padding-bottom: 75px !important;
    }

    .modal-fullscreen-custom.modal-dialog {
        height: calc(100% - 100px) !important;
        margin-top: 100px;
    }

    #monthlySalesCalendar .fc-daygrid-day-events {
        margin-bottom: 0 !important;
        padding: 0 !important;
        letter-spacing: -0.1px;
    }

    #loginContainer .card .card-body {
        /* padding: 0 !important; */
    }
}
@media (max-width: 376px) {
    #supportBanner {
        background-position: 100% 100%;
    }

    .progress-section ul {
        --progress-li-width: 4.3rem; /* 항목의 너비 */
    }
    
    #monthlySalesCalendar .fc-daygrid-day-events {
        letter-spacing: -0.3px;
    }
}

/** ========================================================================
 *  바다핀테크 브랜드페이지 용 스타일 정리
 *  (나중에 분리할 가능성 매우 높음)
 *  ========================================================================== */

#badaBrandContainer {
    font-family: "NanumSquare", sans-serif !important;
}

#badaBrandContainer #brandHeader {
    background-color: transparent;
    z-index: 100;
    transition: background-color 0.1s ease, padding 0.05s ease;
}

#badaBrandContainer #section1 {
    background: url("/assets/images/bada/bg-main-1.png") no-repeat;
    background-size: cover;
    background-color: #000;
    background-position: center;
}

/* Shortcut link with SVG background */
.bada-shortcut {
    width: 3rem;
    height: 3rem;
    display: block;
    background-position: center;
    background-size: 100%;
    background-repeat: no-repeat;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    transition: background-image 0.4s ease;
}

/* Default SVG background */
.bada-shortcut {
    background-image: url("/assets/images/bada/icon-shortcut.svg");
}

/* Hover SVG background */
.bada-shortcut:hover {
    background-image: url("/assets/images/bada/icon-shortcut-hover.svg");
}

#badaBrandContainer .stap-scroll-down {
    width: 5.5rem;
    height: 5.5rem;
    opacity: 1;
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    background-image: url("/assets/images/bada/icon-arrow-down.svg");
    cursor: pointer;
    transition: opacity 0.4s ease;
}

#badaBrandContainer .stap-scroll-down:hover {
    opacity: 0.8;
}

#badaBrandContainer #section3 {
    background-color: #753ae9 !important;
}

#badaBrandContainer #section4 {
    background-color: #10cb68 !important;
}

#badaBrandContainer #section5 {
    background-color: #00a1fe !important;
}

#badaBrandContainer #section6 swiper-slide {
    text-align: center;
}

#badaBrandContainer #section6 swiper-container {
    max-width: 900px;
    width: 80vw;
}

html:has(#badaBrandContainer) {
    scroll-snap-type: y mandatory;
}

#badaBrandContainer #section1,
#badaBrandContainer #section2,
#badaBrandContainer #section3,
#badaBrandContainer #section4,
#badaBrandContainer #section5,
#badaBrandContainer #section6 {
    scroll-snap-align: start;
}

#badaBrandContainer .bada-main-2 {
    background-image: url("/assets/images/bada/bada-main-2.svg");
    background-size: contain;
    background-repeat: no-repeat;
    width: 37.5vw;
    height: 37.5vw;
}

@media (max-width: 1200px) {
    #badaBrandContainer .bada-main-2 {
        width: 65vw;
        height: 65vw;
    }
}

@media (max-width: 767px) {
    #badaBrandContainer .bada-main-2 {
        width: 60vw;
        height: 60vw;
    }
}

@media (max-width: 562px) {
    #badaBrandContainer .bada-main-2 {
        width: 80vw;
        height: 80vw;
    }
}