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

/* ===== 바로메디 브랜드 컬러 (테마 --kt-brand-1 계열 오버라이드) =====
 * style.bundle.css(서드파티, 미수정) 기본값 #0070FF 를 baromedi #0593BE 로 교체.
 * html[data-theme=light] 로 특이도를 높여, 번들보다 먼저 로드돼도 이김.
 * site 포탈 전체(로그인·앱·랜딩) 적용. 관리자 포탈은 style-admin.bundle.css 별도라 영향 없음. */
html[data-theme=light] {
    --kt-brand-1: #0593BE;
    --kt-brand-1-active: #047EA1;
    --kt-brand-1-light: #D6F5FF;
    --kt-brand-1-rgb: 5, 147, 190;
    --kt-text-brand-1: #0593BE;
}


.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;
}

.inner-shadow {
    box-shadow: inset 0 0 8px #0000001F;
}

.shadow-logo {
    box-shadow: 0px 1px 4px #0000001F;
}

.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);
}

/* 서류 및 인증 */
.icon-myinfo-document {
    background-image: url(/assets/images/icon/my-info/icon-document.svg);
}

/* 매출연결 */
.icon-myinfo-connect {
    background-image: url(/assets/images/icon/my-info/icon-connect.svg);
}

/* 매출연결 */
.icon-myinfo-payment {
    background-image: url(/assets/images/icon/my-info/icon-payment.svg);
}

/* 공지 */
.icon-myinfo-notice {
    background-image: url(/assets/images/icon/my-info/icon-notice.svg);
}

/* 고객센터 */
.icon-myinfo-customer-service {
    background-image: url(/assets/images/icon/my-info/icon-customer-service.svg);
}

/* 약관 */
.icon-myinfo-terms {
    background-image: url(/assets/images/icon/my-info/icon-terms.svg);
}

/* 설정 */
.icon-myinfo-settings {
    background-image: url(/assets/images/icon/my-info/icon-settings.svg);
}

/* 문의 */
.icon-myinfo-qna {
    background-image: url(/assets/images/icon/my-info/icon-qna.svg);
}

/* FAQ */
.icon-myinfo-faq {
    background-image: url(/assets/images/icon/my-info/icon-faq.svg);
}

/* 배달앱 로고 */
.logo-delivery-1,
.logo-baemin {
    background-image: url(/assets/images/logo-baemin.png);
}
/* 국민건강보험 (배민 대체, 사용자 화면 전용) */
.logo-nhis {
    background-image: url(/assets/images/logo-nhis.svg);
}
.logo-delivery-2,
.logo-yogiyo {
    background-image: url(/assets/images/logo-yogiyo.png);
}
.logo-delivery-3,
.logo-coueats {
    background-image: url(/assets/images/logo-coueats.png);
}
.logo-delivery-4,
.logo-whee {
    background-image: url(/assets/images/logo-whee.png);
}

.icon-chef {
    background-image: url(/assets/images/icon/icon-chef.svg);
}

.icon-service-setting {
    background-image: url(/assets/images/icon/icon-service-setting.svg);
}
.icon-unsatisfied {
    background-image: url(/assets/images/icon/icon-unsatisfied.svg);
}
.icon-question {
    background-image: url(/assets/images/icon/icon-question.svg);
}
.icon-reply-response {
    background-image: url(/assets/images/icon/icon-reply-response.svg);
}
.icon-reply-response.active {
    background-image: url(/assets/images/icon/icon-reply-response-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);
}
.icon-credit-card {
    background-image: url(/assets/images/credit-card.svg);
}
.icon-ai-reply {
    background-image: url(/assets/images/icon/icon-ai-reply.svg);
}
.icon-ai-reply-dark {
    background-image: url(/assets/images/icon/icon-ai-reply-dark.svg);
}
.icon-avg-rate {
    background-image: url(/assets/images/icon/icon-review-score.svg);
}
.icon-customer-review {
    background-image: url(/assets/images/icon/icon-review-customer.svg);
}
.icon-review-reply {
    background-image: url(/assets/images/icon/icon-review-reply.svg);
}
.icon-reply-style {
    background-image: url(/assets/images/icon/icon-reply-style.svg);
}
.icon-review-no-reply {
    background-image: url(/assets/images/icon/icon-review-noreply.svg);
}

.icon-check-subscribe {
    background-color: var(--kt-text-gray-300);
    color: var(--kt-text-gray-400);
}

.selected .icon-check-subscribe {
    background-color: var(--kt-brand-1) !important;
    color: #fff !important;
}

.selected.product-row {
    border-color: var(--kt-brand-1) !important;
}

.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);
}
.bottom-nav-item .icon-tab-5 {
    background-image: url(/assets/images/icon/tab-5.svg);
}
.bottom-nav-item:hover .icon-tab-5 {
    background-image: url(/assets/images/icon/tab-5-hover.svg);
}
.bottom-nav-item.active .icon-tab-5 {
    background-image: url(/assets/images/icon/tab-5-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;
    display: none !important;   /* 하단 플로팅 채팅문의 미노출 (연결처가 쏜다 채널) */
}

.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: "Spoqa Han Sans Neo", 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;
}

/* 단위(원/건 등)는 숫자보다 약간 작게 — 숫자의 17/18(≈0.944)배 */
.price-big .unit {
    font-size: 2.833rem;
    margin-left: 2px;
}

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

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

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

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

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

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

/* price-big 모바일 축소 (≤576px) — 단위는 숫자의 17/18 비율 유지 */
@media (max-width: 576px) {
    .price-big .number {
        font-size: 2.25rem;
    }
    .price-big .unit {
        font-size: 2.125rem;
    }
}

/* 가운뎃점 구분자 — 빈 요소에 .mid-dot만 붙이면 점과 좌우 여백을 함께 처리 (mx-1보다 좁게, 색은 상속) */
.mid-dot::before {
    content: '·';
    margin: 0 0.125rem;
}

/* flex 자식이 콘텐츠보다 작게 줄어들 수 있게 (text-truncate 적응형 말줄임용) */
.min-w-0 {
    min-width: 0;
}

/* =============================================================================
   Guide Icon (? 아이콘) — 클릭 가능 힌트, 호버 시 강조
   ========================================================================== */

.show-guide-modal {
    cursor: pointer;
    transition: color 0.15s ease-in-out;
}
.show-guide-modal:hover {
    color: var(--kt-primary) !important;
}

/* =============================================================================
   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;
}

/* 화면 스택(isPageStack) 모달: 가로 슬라이드 — 열림 좌→우, 닫힘 우→좌 */
.modal.fade .modal-dialog.modal-slide-x {
    transform: translateX(-100%);
}
.modal.show .modal-dialog.modal-slide-x {
    transform: none;
}
/* 풀스크린(modal-fullscreen-custom)과 함께 쓰면 세로 transform보다 가로 슬라이드 우선 */
.modal.fade .modal-dialog.modal-fullscreen-custom.modal-slide-x {
    transform: translateX(-100%) !important;
}
.modal.show .modal-dialog.modal-fullscreen-custom.modal-slide-x {
    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
   ========================================================================== */

#brandFooter {
    background-color: #fafcfc;
}

.text-brand-1-dark {
    color: #003a83 !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: 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;
    }

    .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;
    }
}

/* 결제 방식 변경 진입 버튼 로딩 자리(스켈레톤) — 버튼(btn-sm)과 동일 높이로 레이아웃 시프트 방지 */
.change-pay-type-skeleton {
    width: 6.5rem;
    background-color: var(--kt-gray-200, #f1f1f4);
    border-color: transparent;
    pointer-events: none;
}

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

#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;
    }
}