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

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

.logo-onecan {
    background-image: url(/assets/images/logo-sulbinet.png);
}
.logo-cleanpay {
    background-image: url(/assets/images/logo-cleanpay.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-confirm {
    background-image: url(/assets/images/sales-confirm.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-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);
}

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

.bg-main-light {
    background: #F8F8F8;
}

.bg-main-light-3 {
    background: #ECECEC;
}

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

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

#brandContainer #section2 .banner {
    background: #ECECEC;

    /* 오른쪽 위 모서리 자르기 */
    clip-path: polygon(
        0 0,
        calc(100% - 2rem) 0,
        100% 2rem,
        100% 100%,
        2rem 100%,
        0 calc(100% - 2rem)
    );
}

#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 #section8 {
    /* background-color: #0070ff0f !important; */
}

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

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


/* =============================================================================
   Hexagonal Grid (육각형 그리드)
   ========================================================================== */

.hex-grid {
  /* 설정값 */
  --hex-w:   15.625rem;
  --gap:     1.5rem;

  /* 파생값 – 수정 불필요 */
  --hex-h:   calc(var(--hex-w) * 0.9);
  --hex-cap: calc(var(--hex-h) * 0.25);
  --row-mt:  calc(-1 * var(--hex-cap) + var(--gap));
  --col-ml:  calc(var(--hex-w) * 0.5 + var(--gap) * 0.5);

  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.hex-row {
  display: flex;
  gap: var(--gap);
}
.hex-row + .hex-row      { margin-top: var(--row-mt); }
.hex-row:nth-child(even) { margin-left: var(--col-ml); }

.hex-item {
  width:  var(--hex-w);
  height: var(--hex-h);
}
.hex-body {
  width: 100%;
  height: 100%;
  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 30px 24px;
  text-align: center;
  transition: background 0.2s, transform 0.2s;
}
.hex-title { font-size: 1.05rem; font-weight: 700; color: #1a1a1a; margin-bottom: 10px; }
.hex-desc  { font-size: 0.8rem; color: #888; line-height: 1.85; white-space: pre-line; }
.hex-grid.row-start-right .hex-row:nth-child(odd)  { margin-left: var(--col-ml); }
.hex-grid.row-start-right .hex-row:nth-child(even) { margin-left: 0; }

@media (max-width: 480px) {
  .hex-grid {
    --gap:     1rem;
    align-items: center;
  }
  .hex-row {
    flex-direction: column;
    align-items: center;
  }
  .hex-body {
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  }
  .hex-row + .hex-row { margin-top: var(--gap); }
  .hex-row:nth-child(even),
  .hex-grid.row-start-right .hex-row:nth-child(odd) { margin-left: 0; }
}