main { height: auto; } .tab-pane { min-height: unset; } .full-menu-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #fff; z-index: 9999; display: unset; /* overflow-y: auto; */ overflow-y: scroll; -ms-overflow-style: none; scrollbar-width: none; } .tab-content{ overflow-y: unset; } .ic20.rot-180{ transform: rotate(180deg); } .pb-70 {padding-bottom: 70px !important;} /* calendar */ .react-calendar{ margin: 10% auto; } .kv-list{ padding-bottom: 20px; } .txn-divider{ margin-top: 0px; } header{ height: calc(50px + env(safe-area-inset-top)); padding-top: calc(env(safe-area-inset-top)); } main { padding-top: calc(50px + env(safe-area-inset-top)) !important; padding-bottom: env(safe-area-inset-bottom); } main.home-main{ padding-bottom: calc(70px + env(safe-area-inset-bottom)) !important; } .bottom-tabbar{ height: calc(70px + env(safe-area-inset-bottom)) !important; padding-bottom: env(safe-area-inset-bottom) !important; } .bottomsheet{ padding-bottom: calc(26px + env(safe-area-inset-bottom)); } .bottomsheet.banner{ padding-bottom: calc(0px + env(safe-area-inset-bottom)); } .apply-row.bottom-padding{ bottom: calc(70px + env(safe-area-inset-bottom)) !important; } .full-menu-modal{ padding-bottom: env(safe-area-inset-bottom); } .swiper-wrapper{ display: unset; gap: unset; padding-bottom: unset; overflow-x: unset; scroll-snap-type: unset; } .swiper.swiper-initialized{ width: 100%; height: 100%; } .tab-pane.sub { padding-bottom: unset !important; } .notice-box { margin-top: 1rem; } .menu-category:last-of-type{ padding-bottom: 15px; } .billing-label{ width: 85px; } .full-menu-container{ padding-top: 50px; } .full-menu-header{ position: fixed; z-index: 20; background-color: #ffffff; width: 100%; top: env(safe-area-inset-top); } .full-menu-top-nav{ position: fixed; top: calc(50px + env(safe-area-inset-top)); z-index: 20; width: 100%; background-color: #ffffff; height: 116px; } .full-menu-keywords-wrap{ position: fixed; top: calc(166px + env(safe-area-inset-top)); z-index: 20; width: 100%; background-color: #ffffff; padding: 1rem 1.625rem; } .full-menu-keywords{ padding: 0; } .full-menu-list{ position: relative; padding-top: 184px; top: calc(env(safe-area-inset-top)); margin-top: 0; width: 100%; overflow-y: auto; } .menu-category{ position: relative; } .date-group{ margin-bottom: 0; } .pb-86{ padding-bottom: 86px; } .bottom-tabbar{ transition: all 0.5s ease-out; } .inq-title-text{ text-overflow: ellipsis; overflow-x: hidden; width: calc(100% - 18px); } .separate-approval-main { position: fixed; top: 0; left: 0; right: 0; bottom: 0; width: 100%; height: 100%; } .separate-approval-main .tab-content { height: 100%; } .separate-approval-main .tab-pane.sub.active { height: 100%; display: flex; flex-direction: column; } .separate-approval-section { padding: 0; flex: 1; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; } .approval-cards-wrapper { display: flex; flex-direction: column; gap: 16px; padding: 16px; padding-bottom: 2px; } .separate-approval-main .apply-row.two-button { display: flex; gap: 8px; flex-shrink: 0; position: sticky; bottom: 0; background: white; z-index: 10; padding: 16px; } /* 분할승인 안내 박스 */ .approval-notice-box { background: var(--color-white); padding: 8px; margin-bottom: 16px; border-radius: 12px; flex-shrink: 0; } .approval-notice-box p { font-size: var(--fs-15); color: var(--color-666666); line-height: 1.5; margin: 0; } .approval-notice-box p + p { margin-top: 4px; } /* 분할승인 카드 */ .approval-card { position: relative; background: var(--color-white); border: 2px solid var(--color-d6d6d6); border-radius: 16px; padding: 16px; margin-bottom: 0; transition: all 0.3s ease; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); } .approval-card.selected { border-color: var(--color-3E6AFC); background: var(--color-F4F8FF); box-shadow: 0 4px 12px rgba(62, 106, 252, 0.2); } .approval-card .card-checkbox { display: block !important; position: absolute; top: 16px; left: 16px; width: 24px; height: 24px; margin: 0; padding: 0; appearance: none; border: 2px solid var(--color-d6d6d6); border-radius: 5px; background-color: var(--color-white); cursor: pointer; outline: none; box-sizing: border-box; z-index: 1; } .approval-card .card-checkbox:focus, .approval-card .card-checkbox:active { outline: none !important; box-shadow: none !important; border-color: var(--color-d6d6d6); } .approval-card .card-checkbox:checked { background-color: var(--color-3E6AFC); border-color: var(--color-3E6AFC); outline: none; } .approval-card .card-checkbox:checked::after { content: ''; position: absolute; left: 5px; top: 2px; width: 6px; height: 11px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); } /* 분할승인 카드 헤더 */ .approval-card .card-header { display: flex; align-items: center; gap: 8px; margin-bottom: 16px; padding-bottom: 12px; padding-left: 36px; border-bottom: 1px solid var(--color-E6E6E6); } .approval-card .card-tag { font-size: var(--fs-14); font-weight: var(--fw-700); padding: 2px 8px; border-radius: 4px; color: var(--color-666666); background: var(--color-F3F3F3); transition: all 0.4s ease; } .approval-card .card-tag.main-tag { color: var(--color-3E6AFC); background: var(--color-E9F1FB); } .approval-card.selected .card-tag { color: var(--color-3E6AFC); background: var(--color-E9F1FB); } .approval-card .card-tid { font-size: var(--fs-16); color: var(--color-2D3436); font-weight: var(--fw-500); } /* 분할승인 카드 바디 */ .approval-card .card-body { margin-bottom: 16px; } .approval-card .info-list { display: flex; flex-direction: column; list-style: none; padding: 0; margin: 0; gap: 8px; } .approval-card .info-list li { display: flex; align-items: center; font-size: var(--fs-14); color: var(--color-2D3436); } .approval-card .info-list .label { min-width: 85px; color: var(--color-666666); font-weight: var(--fw-400); } .approval-card .info-list .value { font-weight: var(--fw-500); } /* 분할승인 카드 푸터 */ .approval-card .card-footer { padding-top: 12px; border-top: 1px solid var(--color-E5E5E5); } .approval-card .period-selector { display: flex; align-items: center; gap: 12px; } .approval-card .period-selector label { font-size: var(--fs-14); color: var(--color-666666); font-weight: var(--fw-500); min-width: 60px; } .approval-card .period-selector select { flex: 1; height: 36px; font-size: var(--fs-14); padding: 6px 30px 6px 12px; border: 1px solid var(--color-d6d6d6); border-radius: 4px; background-color: var(--color-white); transition: all 0.2s ease; cursor: pointer; } /* Scrollbar hide utility class */ .scrollbar-hide::-webkit-scrollbar { display: none; /* Chrome, Safari, Opera */ } .unset-child-span > span { color: unset !important; font-size: unset !important; font-weight: unset !important; width: unset !important; text-align: unset !important; } .transaction-content > .transaction-title{ text-overflow: ellipsis; overflow-x: hidden; width: 100%; } .cancel-input{ width: calc(100% - 5px); }