@charset "utf-8";
@import 'reset.css';
@import 'fonts.css';

:root {

    /* color */
    --color-002555: #002555;
    --color-4968BD: #4968BD;
    --color-3E6AFC: #3E6AFC;
    --color-76B5FF: #76B5FF;
    --color-FFBA5C: #FFBA5C;
    --color-EB5757: #FF4757;
    --color-78D197: #78D197;
    --color-928DFC: #928DFC;

    --color-white: #ffffff;
    --color-F7F7F7: #F7F7F7;
    --color-F4F8FF: #F4F8FF;
    --color-F3F3F3: #F3F3F3;
    --color-E9F1FB: #E9F1FB;
    --color-E5E5E5: #E5E5E5;
    --color-EaEaEa: #EaEaEa;
    --color-d6d6d6: #d6d6d6;
    --color-CCCCCC: #CCCCCC;
    --color-B9BDC5: #B9BDC5;
    --color-8C8C8C: #8C8C8C;
    --color-AAAAAA: #AAAAAA;
    --color-999999: #999999;
    --color-777777: #777777;
    --color-666666: #666666;
    --color-2D3436: #2D3436;
    --color-111111: #111111;
    --color-black: #000000;
    

    /* table */
    --color-th_level1: #F3F3F3;
    --color-th_level2: #F7F7F7;
    --color-line: #E5E5E5;
    --color-line_top: #AAAAAA;;

    /* height */
    --vh-100: 100%;

    /* font Size */
    --fs-11: 0.6875rem;
    --fs-12: 0.75rem;
    --fs-13: 0.8125rem;
    --fs-14: 0.875rem;
    --fs-15: 0.9375rem;
    --fs-16: 1rem;
    --fs-17: 1.0625rem;
    --fs-18: 1.125rem;
    --fs-19: 1.1875rem;
    --fs-20: 1.25rem;
    --fs-21: 1.3125rem;
    --fs-22: 1.375rem;
    --fs-23: 1.438rem;
    --fs-24: 1.5rem;
    --fs-25: 1.563rem;
    --fs-26: 1.625rem;
    --fs-27: 1.688rem;
    --fs-28: 1.75rem;
    --fs-29: 1.813rem;
    --fs-30: 1.875rem;
    --fs-31: 1.938rem;
    --fs-32: 2rem;
    --fs-33: 2.063rem;
    --fs-34: 2.125rem;
    --fs-35: 2.188rem;
    --fs-36: 2.25rem;
    --fs-37: 2.313rem;
    --fs-38: 2.375rem;
    --fs-40: 2.5rem;
    --fs-48: 3rem;

    /* font Weight */
    --fw-100: 100;
    --fw-200: 200;
    --fw-300: 300;
    --fw-400: 400;
    --fw-500: 500;
    --fw-600: 600;
    --fw-700: 700;
    --fw-800: 800;
    --fw-900: 900;
}

/* 공통 */
html {}

body {}

.blind {
    visibility: hidden; 
    overflow: hidden; 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 0; 
    height: 0; 
    font-size: 0; 
    line-height: 0
}

.ht-20 {height: 20px !important;}
.pt-10 {padding-top: 10px !important;}
.pt-16 {padding-top: 16px !important;}
.pt-20 {padding-top: 20px !important;}
.pt-30 {padding-top: 30px !important;}
.pt-46 {padding-top: 46px !important;}
.pb-120 {padding-bottom: 120px !important;}
.pw-26 {padding: 0 26px !important;}

.mt-30 {margin-top: 30px !important;}
.mt-20 {margin-top: 20px !important;}
.mt-26 {margin-top: 26px !important;}
.mt-16 {margin-top: 16px !important;}
.mt-10 {margin-top: 10px !important;}
.mb-10 {margin-bottom: 10px !important;}
.mb-16 {margin-bottom: 16px !important;}
.mb-20 {margin-bottom: 20px !important;}
.mb-30 {margin-bottom: 30px !important;}

.mr-0 {margin-right: 0px !important;}
.mr-10 {margin-right: 10px !important;}
.mr-26 {margin-right: 26px !important;}
.max-70 {max-width: 70% !important;}
.wid-100 {
    width: 100% !important;
}

.align-right {
    text-align: right;
}

.flex-1 {flex: 1; min-width: inherit !important;}
.flex-2 {flex: 2; min-width: inherit !important;}
.flex-3 {flex: 3; min-width: inherit !important;}
.flex-4 {flex: 4; min-width: inherit !important;}


/* layout */

/* header */

header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background-color: var(--color-white);
    z-index: 1000;
}

.wrapper.bg-blue {
    background: var(--color-F4F8FF);
}

.wrapper.bg-blue header {
    background: transparent;
}

.wrapper.bg-blue header .heading-select {
    background: transparent;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    padding: 0 16px;
    box-sizing: border-box;
}

.header-content.sub {
    border-bottom: 1px solid #e6e6e6;
}

.header-left {
    display: flex;
    align-items: center;
    position: absolute;
    left: 10px;
}

.header-center {
    display: flex;
    margin: 0 auto;
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
}

.app-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-700);
    color: var(--color-002555);
    margin: 0;
}

.header-right {
    display: flex;
    align-items: center;
    gap: 12px;
    position: absolute;
    right: 10px;
}

.header-btn {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    transition: all 0.3s ease;
}

.header-btn:active {
    background-color: var(--color-F7F7F7);
}

.notification-icon, .profile-icon {
    font-size: 20px;
}

.notification-badge {
    position: absolute;
    top: 8px;
    right: 6px;
    width: 8px;
    height: 8px;
    background-color: #ff4757;
    border-radius: 50%;
    border: 2px solid var(--color-white);
    z-index: 100;
}

main {
    display: flex;
    padding-top: 50px; /* 헤더 높이만큼 패딩 조정 */
    box-sizing: border-box;
    height: 100vh;
    padding-bottom: 70px; /* 하단 탭바 공간 확보 */
}

main.pop, main.pb-0 {
    padding-bottom: 0 !important;
}

main.full-height {
    padding-bottom: 0 !important;
}

.lnb {
    display: flexbox;
    height: 100%;
    background-color: #fff;
}

.content {
    position: relative;
    display: flexbox;
    flex: auto;
    background-color: #f7f7f7;
    overflow-y: auto;
}

.content-container {
    min-height: calc(100vh - 172px);
    padding: 1.875rem 100px 1.875rem 1.875rem;
 }

footer {
    width: 100%;
    height: 99px;
    background-color: var(--color-white);
}

/* 하단 탭바 스타일 */

.bottom-tabbar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 70px;
    background-color: var(--color-white);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000;
}

.tab-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 20%;
    height: 100%;
    background: none;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 8px 4px;
    box-sizing: border-box;
}

.tab-button:hover {
}

.tab-button.active {
    color: var(--color-4968BD);
}

.tab-button.active .tab-icon {
    transform: scale(1.1);
}

.tab-icon {
    font-size: 24px;
    margin-bottom: 6px;
    transition: transform 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-icon-img {
    width: 24px;
    height: 24px;
    transition: all 0.3s ease;
}

/* active 상태에서 아이콘 변경 */
.tab-button.active .tab-icon::before {
    content: attr(data-active-icon);
}

.tab-button:not(.active) .tab-icon::before {
    content: attr(data-inactive-icon);
}

.tab-text {
    font-size: var(--fs-12);
    font-weight: var(--fw-500);
    color: #B3B8CE;
    transition: color 0.3s ease;
}

.tab-button.active .tab-text {
    color: #3E6AFC;
    font-weight: var(--fw-700);
}

/* 탭 컨텐츠 스타일 */
.tab-content {
    width: 100%;
    height: 100%;
    overflow-y: auto;
}

.tab-content.blue {
    background: #F4F8FF;
}

main.pb-0 .tab-pane {
    min-height: inherit;
}

.tab-pane {
    position: relative;
    display: none;
    padding: 1rem;
    min-height: calc(100vh - 120px);
    box-sizing: border-box;
}

.tab-pane.sub {
    padding-bottom: 60px !important;
}

.tab-pane.active {
    display: block;
}

.tab-pane h2 {
    font-size: var(--fs-24);
    font-weight: var(--fw-700);
    color: var(--color-111111);
    margin-bottom: 16px;
}

.tab-pane p {
    font-size: var(--fs-16);
    color: var(--color-666666);
    line-height: 1.6;
}

/* 스와이퍼 UI 스타일 */
.swiper-wrapper {
    display: flex;
    gap: 9px;
    padding-bottom: 1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* Internet Explorer 10+ */
}

.flex-wrap {
    flex-wrap: wrap;
}

.swiper-wrapper::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.swiper-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    cursor: pointer;
    transition: transform 0.3s ease;
    flex-shrink: 0;
    scroll-snap-align: start;
    min-width: 80px;
}

.swiper-item:hover {
    transform: scale(1.05);
}

.swiper-icon {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.swiper-text {
    font-size: var(--fs-14);
    font-weight: var(--fw-400);
    color: var(--color-111111);
    text-align: center;
}


/* 추가 아이콘 */
.add-icon {
    background: white;
    border: 2px dashed #3E6AFC;
    border-radius: 8px;
}

.add-square {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.add-square::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 2px dashed #3E6AFC;
    border-radius: 6px;
}

.plus-symbol {
    color: #3E6AFC;
    font-size: 24px;
    font-weight: bold;
    z-index: 1;
    position: relative;
}

/* day-status 스타일 */
.day-status {
    margin-top: 20px;
}

.day-tab {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.day-tab > div:first-child {
    font-size: var(--fs-16);
    font-weight: var(--fw-600);
    color: var(--color-111111);
}

.day-tab > div:last-child {
    display: flex;
    gap: 0;
    background: var(--color-white);
}

.day-tab-btn {
    padding: 2px 16px;
    background: var(--color-white);
    color: #999;
    border-radius: 6px;
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    cursor: pointer;
    transition: all 0.16s ease;
}

.day-tab-btn:hover {
    background: var(--color-F7F7F7);
}

.day-tab-btn.active {
    background: #3E6AFC;
    color: var(--color-white);
    border-color: #3E6AFC;
}

.con-box {
    display: none;
    border-radius: 8px;
    min-height: 200px;
}

.con-box.active {
    display: block;
}

.box-wrap {
    background: var(--color-white);
    margin-bottom: 1rem;
    padding: 1.625rem 1rem;
    border-radius: 0.75rem;
}

.today-sales {
    position: relative;
    font-size: var(--fs-20);
    font-weight: var(--fw-700);
    color: #000;
    margin-top: 16px;
}

.won01 {
    height: 20px;
    padding-left: 28px;
    background: url("../images/ico_won.svg") no-repeat left 0 center;
}

.won02 {
    height: 20px;
    padding-left: 28px;
    background: url("../images/ico_pie.svg") no-repeat left 0 center;
}

.per {
    font-size: var(--fs-15);
    font-weight: var(--fw-400);
    margin-left: 5px;
}
.per.minus {
    color: #3E6AFC;
}

.per.plus {
    color: #EB5757;
}

.arrow {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-block;
    width: 24px;
    height: 22px;
}

.dales-detail {
    margin-top: 1rem;
    margin-left: 4px;
    margin-right: 4px;
}

.dales-detail li {
    display: inline-block;
    font-size: var(--fs-15);
    margin-right: 30px;
}

.dales-detail li:last-child {
    margin-right: 0;
}

.dales-detail li strong {
    font-weight: var(--fw-600);
}

.approve::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 9px;
    background: #3E6AFC;
    margin-right: 10px;
}

.cancel::before {
    content: '';
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 9px;
    background: #C6C6C6;
    margin-right: 10px;
}

/* Heading */

h3 {
    font-size: var(--fs-20);
    font-weight: var(--fw-700);
    color: var(--color-111111);
}

h4 {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-111111);
}

/* input */

[tabindex='-1'], [tabindex='0'] {
    outline: none;
}

input {
    -webkit-appearance : none;
    -moz-appearance:none;
    appearance:none;
    height: 40px;
    font-size: var(--fs-15);
    color: var(--color-2D3436);
    border: none;
    outline: 1px solid rgba(217, 217, 217, 1);
    padding: 6px 12px;
    box-sizing: border-box;
    border-radius: 8px;
    border: none;
    transition: all .2s;
}
input.error {
    outline: 1px solid rgba(255, 71, 87, 1);
}

input:focus, input:active, input:hover {
    border: none;
}

input[type=number] {
    -moz-appearance: textfield;
}

input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
}

input::-ms-clear {
    display: none;
}

input:invalid {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none;
}

:-moz-submit-invalid {
    -moz-box-shadow: none;
    box-shadow: none;
}

:-moz-ui-invalid {
    -moz-box-shadow: none;
    box-shadow: none;
}

input:focus-within {
    outline: 1px solid var(--color-111111);
}

input:disabled {
    color: #bebebe;
    background: #f5f5f5;
}

input:disabled + button img {opacity: .3;}

input[readonly] {
    color: var(--color-2D3436);
    background: #f5f5f5;
}

input[readonly] + button.date-btn {
    opacity: .3;
}

input::placeholder {
    color: #999
}

*::placeholder {
    font-weight: var(--fw-300);
}

input[type="password"] {
    letter-spacing: 1px;
}

/* input with clear button */
.input-wrapper {
    position: relative;
    display: inline-block;
}

.input-with-clear {
    padding-right: 35px;
}

.clear-btn {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all 0.2s ease;
}

.clear-btn:hover {
    background-color: #f0f0f0;
    color: #666;
}

.clear-btn.visible {
    opacity: 1;
}

input.id[type="text"] {
    font-size: var(--fs-18);
    font-weight: 700;
}

input.big[type="password"] {
    letter-spacing: -5px;
    font-size: var(--fs-30)
}
.date-btn {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #999;
    font-size: 14px;
    cursor: pointer;
    padding: 4px;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}

/* textarea */

textarea {
    width: 100%;
    padding: var(--input-padding);
    border: 1px solid var(--input-border);
    border-radius: var(--input-radius);
    background-color: var(--input-bg);
    color: var(--input-text);
    font-size: 1rem;
    line-height: 1.4;
    box-sizing: border-box;
    transition: border-color 150ms ease, box-shadow 150ms ease;
}

textarea:focus {
    outline: 1px solid var(--color-111111);
}

textarea[disabled] {
    background-color: #f5f5f5;
    color: #999;
    cursor: not-allowed;
}

textarea::placeholder {
    color: var(--color-8C8C8C);
}
textarea {
    min-height: 100px;
    resize: vertical;
}  

/* select */

select {
    -webkit-appearance: none;
    -moz-appearance:none;
    appearance:none;
}

select:disabled {
    opacity: 0.6;
}

select::-ms-expand {
    display:none;
}

select {
    height: 40px;
    padding: 6px 35px 6px 12px;
    border: 0;
    border: 1px solid var(--color-CCCCCC);
    color: var(--color-2D3436);
    font-size: var(--fs-15);
    border-radius: 8px;
    -moz-border-radius: 6px;
    outline: 0;
    box-sizing: border-box;
    background: url('../images/select_arrow.svg') no-repeat center right 12px var(--color-white);
    transition: all .2s;
}

select:focus-within, 
select:active {
    border: 1px solid var(--color-111111);
}

select.heading-select:focus-within, 
select.heading-select:active {
    border: 0;
}

select:disabled {
    background-color: #f5f5f5;
}

/* link */

a {
    color: var(--color-111111);
    text-decoration: none;
    cursor: pointer;
    transition: color var(--link-transition);
}
  
a:visited {
    color: var(--color-111111);
}

a:hover,
a:active {
    color: var(--color-4968BD);
}

a:focus {
    outline: none;
    box-shadow: 0 0 0 var(--link-focus-ring) rgba(11, 102, 195, 0.3);
    border-radius: 4px;
}

a[aria-disabled="true"],
a.disabled {
    color: #9aa0a6;
    pointer-events: none;
    cursor: default;
}

/* button */

button {
    cursor: pointer;
    background-color: #fff;
}

a:active, button:active {
    opacity: .75;
}

button:disabled {
    opacity: 0.3;
}

.button-group {
    text-align: center;
    margin-top: 60px;
}

.btn-36 {
    min-width: 100px;
    width: 100%;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    padding: 0 16px;
    height: 36px;
    line-height: 36px;
    border-radius: 8px;
}

.btn-40 {
    min-width: 100px;
    width: 100%;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    padding: 0 16px;
    height: 40px;
    line-height: 40px;
    border-radius: 8px;
}

.btn-44 {
    min-width: 140px;
    font-size: var(--fs-17);
    font-weight: var(--fw-600);
    padding: 0 16px;
    height: 44px;
    line-height: 44px;
    border-radius: 8px;
}

.btn-50 {
    min-width: 140px;
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
    padding: 0 16px;
    height: 50px;
    line-height: 50px;
    border-radius: 8px;
}

.btn-darkblue {
    background: var(--color-002555);
    color: var(--color-white);
}

.btn-blue {
    background: var(--color-3E6AFC);
    color: var(--color-white);
}
.btn-blue[disabled], .btn-darkgray[disabled] {
    background: #D9D9D9;
    color: var(--color-white);
    opacity: 1;
}

.btn-darkgray {
    background: #999;
    color: var(--color-white);
}

.btn-white {
    background: var(--color-white);
    color: var(--color-111111);
    border: 1px solid #999;
}

/* checkbox */

.check_box {
    position: relative;
    padding-left: 30px;
    padding-right: 30px;
    font-size: var(--fs-17);
    font-weight: 400;
}

.check_box label {
    position: absolute;
    left: 0;
    top: 2px;
    cursor: pointer;
}

input[type="checkbox"] + label {
    position: absolute;
    display: block;
    width: 18px;
    height: 18px;
    padding-left: 30px;
    cursor: pointer;
    background: url('../images/chk_off.svg') no-repeat 0 0 / contain;
}

input[type='checkbox']:checked + label {
    background: url('../images/chk_on.svg') no-repeat 0 0 / contain;
}

input[type="checkbox"] {
    display: none;
}

.check_box_scrap {
    position: relative;
    width: 24px;
    height: 24px;
}

.check_box_scrap label {
    position: absolute;
    left: 0;
    top: 1px;
    cursor: pointer;
}

.check_box_scrap input[type="checkbox"] + label {
    position: absolute;
    display: block;
    width: 24px;
    height: 24px;
    cursor: pointer;
    background: url('../images/chk_scrap_off.svg') no-repeat 0 0 / contain;
}

.check_box_scrap input[type='checkbox']:checked + label {
    background: url('../images/chk_scrap_on.svg') no-repeat 0 0 / contain;
}

/* radiobox */

.radio_box {
    position: relative;
    padding-left: 25px;
    padding-right: 30px;
    font-size: var(--fs-14);
    font-weight: 400;
}

.radio_box label {
    position: absolute;
    left: 0;
    top: 1px;
    cursor: pointer;
}

input[type="radio"] + label {
    position: absolute;
    display: block;
    width: 20px;
    height: 20px;
    background: url("../images/radio_off.svg") no-repeat 0 0;
}

input[type='radio']:checked + label {
    background: url("../images/radio_on.svg") no-repeat 0 0;
}

input[type="radio"] {
    display: none;
}

/* header */

.heading-select {
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
    border: 0;
    padding: 0 30px 0 5px;
}
.notification-btn {
    background: url("../images/alarm.svg") no-repeat center center;
}


/* dashboard */

/* 진행률 표시줄 스타일 */

.issue-progress {
    margin-top: 10px;
}

.progressbar {
    width: 100%;
    padding: 1rem 0 0 0;
}

.progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.progress-title {
    font-size: var(--fs-15);
    font-weight: var(--fw-700);
    color: #3E6AFC;
}

.progress-remaining {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: #3E6AFC;
}

.progress-container {
    width: 100%;
}

.progress-bar {
    width: 100%;
    height: 12px;
    background: #ECF1FA;
    border-radius: 6px;
    overflow: hidden;
    position: relative;
}

.progress-fill {
    height: 100%;
    background: #3E6AFC;
    border-radius: 6px;
    transition: width 0.3s ease;
    position: relative;
}

.progress-fill::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 6px;
    height: 100%;
    background: #3E6AFC;
    border-radius: 0 6px 6px 0;
}

.remain-limit {
    font-size: var(--fs-14);
    color: var(--color-111111);
    font-weight: var(--fw-400);
    margin-top: 12px;
    text-align: right;
}

.remain-limit strong {
    font-weight: var(--fw-600);
}

/* 배너 스와이퍼 스타일 */
.swiper-banner {
    position: relative;
    overflow: hidden;
    padding-bottom: 5px;
}

.banner-wrapper {
    position: relative;
    width: 100%;
    height: 110px;
    cursor: grab;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.banner-wrapper:active {
    cursor: grabbing;
}

.banner-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: translateX(100%);
    transition: all 0.3s ease-in-out;
}

.banner-slide.active {
    opacity: 1;
    transform: translateX(0);
}

.banner-slide.prev {
    transform: translateX(-100%);
}

.banner-content {
    height: 100%;
    width: 100%;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
}

.banner-content img {
    width: 100%;
    height: auto;
    border-radius: 0.75rem;
}

.banner-pagination {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
}

.banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-CCCCCC);
    cursor: pointer;
    transition: all 0.2s ease;
}

.banner-dot.active {
    background: var(--color-4968BD);
    /* transform: scale(1.2); */
}

/* 공지사항 목록 스타일 */
.notice-list {
    border-radius: 0.75rem;
    margin-top: 1.625rem;
    overflow: hidden;
}

.notice-box {
    background: var(--color-white);
    padding-bottom: 1rem;
    border-radius: 12px;
}

.box-wrap.notice-list {
    padding-top: 4px;
    padding-bottom: 4px;
}

.notice-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.188rem 1rem;
    border-bottom: 1px solid #eaeaea;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.notice-item:last-child {
    border-bottom: none;
}

.notice-item:active {
    background-color: #f8f9fa;
}

.notice-content {
    flex: 1;
    margin-right: 1rem;
}

.notice-title {
    position: relative;
    font-size: var(--fs-17);
    font-weight: 400;
    color: var(--color-111111);
    margin-bottom: 4px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.notice-title.unread::after {
    content: '';
    position: relative;
    bottom: 2px;
    left: 5px;
    display: inline-block;
    width: 6px;
    height: 6px;
    background-color: var(--color-EB5757);
    border-radius: 50%;
    margin-left: 4px;
}

.notice-meta {
    font-size: var(--fs-14);
    color: #999;
}

.notice-meta strong {
    color: var(--color-3E6AFC);
}

.notice-meta span::before {
    content: '';
    display: inline-block;
    width: 1px;
    height: 10px;
    background-color: #999;
    margin: 0 8px 0 10px;
}

.notice-arrow {
    position: relative;
}

/* 섹션 헤더 스타일 */
.section-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.6rem;
    margin-top: 1.625rem;
}

.section-header h3 {
    margin: 0;
}

.section-header p {
    margin: 0;
    font-size: var(--fs-14);
    color: var(--color-111111);
    font-weight: var(--fw-400);
}

.today-sales.mt-sty {
    margin-top: 0.7rem !important;
}

.two-account {
    font-size: var(--fs-18);
    font-weight: var(--fw-700);
    color: #000;
    margin-top: 0.5rem;
}

.two-sales h4 {
    font-weight: var(--fw-400);
}

.img-customer {
    background: url("../images/img_customer.svg") no-repeat right 1.625rem bottom 1rem var(--color-white);
}

.img-states {
    background: url("../images/img_states.svg") no-repeat right 1.625rem bottom 1rem var(--color-white);
}

.ranking h4 {
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
}

.ranking ul {
    display: block;
    margin-top: 12px;
}

.ranking ul li {
    display: flex;
    align-items: center;
    font-size: var(--fs-15);
    padding: 3px 0;
    justify-content: space-between;
}

.ranking ul li span:nth-child(2) {
    flex: 1;
    margin-left: 5px;
}

.ranking-num-01, .ranking-num-ot {
    display: inline-block;
    width: 18px;
    height: 18px;
    font-size: var(--fs-14);
    color: var(--color-white);
    font-weight: var(--fw-700);
    border-radius: 4px;
    text-align: center;
    line-height: 18px;
    margin-right: 5px;
}

.ranking-num-01 {
    background: #3E6AFC;
}

.ranking-num-ot {
    background: #3EC1F3;
}

.last-per-01, .last-per-ot {
    font-weight: var(--fw-700);
}
.last-per-01 {
    color: #3E6AFC;
}
.last-per-ot {
    color: #3EC1F3;
}

/* 전체메뉴 */
.full-menu-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 2000;
    display: none;
    overflow-y: auto;
}

.full-menu-container {
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* 헤더 */
.full-menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    border-bottom: 0;
    background: #fff;
    position: sticky;
    top: 0;
    height: 50px;
    z-index: 10;
}

.full-menu-header.pop {
    border-bottom: 0;
}

.full-menu-title {
    font-size: var(--fs-17);
    font-weight: 700;
    color: #000;
}

.full-menu-title.center {
    margin: 0 auto;
}

.beetween {
    padding: 0 6px;
}

.option-list {
    padding: 0 10px 10px 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.option-list.no-padding {
    gap: 26px
}

.option-list-nopadding {
    position: relative;
    padding: 0 10px;
}

.no-padding .opt-field { 
    padding: 0;
    gap: 10px;

}

.opt-field { 
    display: grid; 
    grid-template-columns: 83px 1fr; 
    align-items: start; 
    gap: 4px;
    padding: 0 16px;
}
.opt-field.horizon { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    gap: 10px;
    padding: 0;
}

.opt-field.no-padding {
    padding: 0;
}

.opt-field.mt_top {
    margin-top: -10px;
}

.opt-label { 
    font-size: var(--fs-16); 
    font-weight: var(--fw-500);
    color: var(--color-2D3436); 
    margin-bottom: 0;
    height: 40px;
    display: flex;
    align-items: center;
}

.opt-controls { 
    display: flex; 
    align-items: center; 
    gap: 12px; 
    flex-wrap: nowrap;
}

.opt-controls.gap-six { 
    gap: 8px; 
}

.opt-controls.col { 
    flex-direction: column; 
    align-items: flex-start; 
    gap: 16px; 
}

.opt-controls.below { 
    grid-column: 1 / -1; 
}
.opt-controls.below.h36 span,
.opt-controls.below.h50 span {
    font-size: var(--fs-15);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.3;
    border-color: #999;
}

.opt-controls.below.h36 span {
    height: 36px;
}

.opt-controls.below.h50 span {
    height: 50px;
}

/* Ensure inputs wrap under controls and fill available width */
.option-list .opt-controls .flex-1,
.option-list .opt-controls input[type="text"],
.option-list .opt-controls input[type="number"],
.option-list .opt-controls input[type="search"] {
    flex: 1 1 100%;
    width: 100%;
    min-width: 0;
}

/* Keep compact elements at natural width */
.option-list .opt-controls select,
.option-list .opt-controls .w-110,
.option-list .opt-controls .w-120,
.option-list .opt-controls .w-140,
.option-list .opt-controls .tilde {
    flex: 0 0 auto;
}

.flex-1 { 
    flex: 1; 
}
.flex-2 { 
    flex: 2; 
}

.w-110 { 
    width: 110px; 
}

.w-120 { 
    width: 120px; 
}

.w-130 { 
    width: 125px; 
}

.w-140 { 
    width: 140px; 
}

.w-160 { 
    width: 160px; 
}

.tilde { 
    padding: 0 8px; 
    color: #999; 
}

.chip-row { 
    display: flex; 
    gap: 10px; 
    width: 100%;
}

.chip-row .keyword-tag, .opt-controls .keyword-tag {
    border-radius: 6px !important; 
}

.opt-controls .keyword-tag {
    padding: 0 6px;
}

.range-row { 
    display: flex; 
    align-items: center; 
}

.full-menu-title span {
    font-size: var(--fs-17);
    font-weight: 400;
    color: #000;
}

.full-menu-actions {
    display: flex;
    gap: 0.625rem;
    align-items: center;
    position: absolute;
    right: 10px;
}

.full-menu-settings {
    background: none;
    border: none;
    cursor: pointer;
    height: 1.5rem;
}

.full-menu-settings img {
    width: 1.5rem;
    height: 1.5rem;
}

.full-menu-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    font-weight: 300;
    color: #666;
    cursor: pointer;
    padding: 0.25rem;
    line-height: 1;
}

/* 상단 네비게이션 */
.full-menu-top-nav {
    display: flex;
    justify-content: space-around;
    padding: 1rem;
    background: #fff;
    border-bottom: 1px solid #e6e6e6;
}

.full-menu-top-nav .swiper-wrapper {
    padding-bottom: 0.5rem !important;
}

.btn_delect {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2000;
}

.top-nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
}

.top-nav-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
}

.won-icon {
    background: #4CAF50;
}

.chart-icon {
    background: #9C27B0;
}

.chart-icon img {
    width: 1.5rem;
    height: 1.5rem;
    filter: brightness(0) invert(1);
}

.calendar-icon {
    background: #2196F3;
    font-size: 1rem;
    font-weight: 700;
}

.edit-icon {
    background: #fff;
    border: 2px dashed #ccc;
    color: #666;
    font-size: 1.5rem;
    font-weight: 300;
}

.top-nav-item span {
    font-size: 0.75rem;
    color: #333;
    text-align: center;
}

/* 인기 키워드 */
.full-menu-keywords {
    display: flex;
    gap: 6px;
    padding: 1rem 1.625rem;
    background: #fff;
    overflow-x: auto;
    overflow-y: hidden;
    flex-wrap: nowrap;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}
.full-menu-keywords.no-padding {
    padding: 0;
}
.full-menu-keywords::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.keyword-tag {
    display: inline-block;
    background: var(--color-white);
    border: 1px solid var(--color-999999);
    height: 36px;
    line-height: 35px;
    border-radius: 36px;
    padding: 0 0.9rem;
    font-size: var(--fs-15);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    white-space: nowrap;
    text-align: center;
    cursor: pointer;
    user-select: none;
    flex: 1;
}

.keyword-tag.active {
    background: #3E6AFC;
    color: #fff;
    border-color: #3E6AFC !important;
}

/* 메뉴 리스트 */
.full-menu-list {
    flex: 1;
    padding: 0 1rem 1rem;
    margin-top: 1rem;
}

.menu-category {
    background: #fff;
    border-radius: 0.75rem;
    margin-bottom: 1rem;
    overflow: hidden;
}

.category-header {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 1rem 10px;
}

.category-icon {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    color: #fff;
}

.transaction-icon, .settlement-icon, .merchant-icon, .payment-icon, .account-icon, .vat-icon, .service-icon, .support-icon {
    position: relative;
}

.transaction-icon::before, .settlement-icon::before, .merchant-icon::before, .payment-icon::before, .account-icon::before, .vat-icon::before, .service-icon::before, .support-icon::before {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
}

.transaction-icon::before {
    background: url("../images/ico_menu01.svg") no-repeat center;
    top: 0;
    right: 0.25rem;
}

.settlement-icon::before {
    background: url("../images/ico_menu02.svg") no-repeat center;
    top: 0;
    right: 0.25rem;
}

.merchant-icon::before {
    background: url("../images/ico_menu03.svg") no-repeat center;
    top: 0;
    right: 0.25rem;
}

.payment-icon::before {
    background: url("../images/ico_menu04.svg") no-repeat center;
    top: 0;
    right: 0.25rem;
}

.account-icon::before {
    background: url("../images/ico_menu05.svg") no-repeat center;
    top: 0;
    right: 0.25rem;
}

.vat-icon::before {
    background: url("../images/ico_menu06.svg") no-repeat center;
    top: 0;
    right: 0.25rem;
}

.service-icon::before {
    background: url("../images/ico_menu07.svg") no-repeat center;
    top: 0;
    right: 0.25rem;
}

.support-icon::before {
    background: url("../images/ico_menu08.svg") no-repeat center;
    top: 0; 
    right: 0.25rem;
}

.category-header span {
    font-size: 1rem;
    font-weight: 700;
    color: #999;
}

.category-items {
    list-style: none;
    margin: 0;
    padding: 0;
}

.category-items li {
    padding: 0.5rem 0.5rem 0.5rem 1.8rem;
    font-size: var(--fs-17);
    color: var(--color-2D3436);
    position: relative;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
}

.category-items li:last-child {
    border-bottom: none;
}

.category-items li::before {
    content: '•';
    position: absolute;
    left: 0.8rem;
    color: var(--color-2D3436);
    font-size: 0.8rem;
    line-height: 2;
}

.category-items li:active {
    background: #f8f9fa;
    border-radius: 6px;
}

/* 요약 섹션 */
.summary-section {
    padding: 0 26px 30px 26px;
    margin-left: -16px;
    margin-right: -16px;
    border-bottom: 1px solid #e6e6e6;
}
.summary-section.no-border {
    border-bottom: 0;
    padding-bottom: 16px;
}

.summary-label {
    font-size: var(--fs-16);
    color: var(--color-111111);
    font-weight: var(--fw-700);
    margin-bottom: 1px;
}

.summary-label.label {
    margin-top: 25px;
}

/* subTab (정산달력/정산내역) */
.subTab {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    border-bottom: 1px solid #e6e6e6;
    width: calc(100% + 52px);
    max-width: 100vw;
    box-sizing: border-box;
}

.subTab.three {
    grid-template-columns: 1fr 1fr 1fr !important;
}

.subtab-btn {
    height: 46px;
    background: var(--color-white);
    border: none;
    font-size: var(--fs-15);
    color: var(--color-B9BDC5);
    font-weight: var(--fw-600);
}

.subtab-btn.active {
    color: var(--color-111111);
    border-bottom: 2px solid var(--color-111111);
}
.summary-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

/* Place button right next to amount-text for divTop variant */
.summary-amount.divTop {
    justify-content: flex-start;
    gap: 10px;
    margin-bottom: 0;
}

.summary-amount.divTop .amount-text {
    display: inline-block;
}

.summary-amount.divTop button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin: 0;
    background: transparent;
    border: 0;
}

.summary-extend {
    margin-top: 12px;
}

.amount-text {
    font-size: var(--fs-28);
    font-weight: var(--fw-700);
    color: var(--color-111111);
}

.amount-text.states {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-111111);
}
.amount-text.states-17 {
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
    color: var(--color-111111);
}

.summary-actions {
    display: flex;
    gap: 10px;
}

.filter-btn, .download-btn {
    width: 40px;
    height: 40px;
    background: #F4F8FF;
    border: none;
    cursor: pointer;
    padding: 8px;
    border-radius: 6px;
}

.summary-details {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 10px;
}

.detail-item {
    display: flex;
    justify-content: flex-start;
    font-size: var(--fs-14);
    gap: 16px;
    color: var(--color-777777);
}

/* 필터 및 정렬 */
.excrow {
    max-width: 67%;
    margin-right: -26px;
}

.filter-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    margin-bottom: 10px;
}

.sort-options {
    display: flex;
    align-items: center;
    gap: 10px;
}

.sort-btn {
    background: none;
    border: none;
    font-size: var(--fs-16);
    color: var(--color-666666);
    cursor: pointer;
}

.sort-btn.active {
    color: var(--color-black);
    font-weight: var(--fw-500);
}

.sort-divider {
    color: var(--color-d6d6d6);
    font-size: var(--fs-13);
}


/* 거래내역 리스트 */
.transaction-list {
    padding: 0 10px;
}

.date-group {
    margin-bottom: 30px;
}

.date-header {
    font-size: var(--fs-16);
    font-weight: var(--fw-600);
    color: var(--color-2D3436);
    padding: 16px 0 12px 0;
}

.line-one .transaction-item {
    padding: 14px 0 !important;
}

.line-one .date-header {
    margin-bottom: 2px;
}

.transaction-item {
    display: flex;
    align-items: flex-start;
    padding: 16px 0;
}

.transaction-item:last-child {
    border-bottom: none;
}

.transaction-status {
    margin-right: 10px;
    margin-top: 8px;
}

.status-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.status-dot.blue {
    background: var(--color-3E6AFC);
}

.status-dot.gray {
    background: var(--color-CCCCCC);
}

.transaction-content {
    flex: 1;
    min-width: 0;
}

.line-one .transaction-content .transaction-title {
    margin-bottom: 0;
}

.transaction-content .transaction-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-400);
    color: var(--color-2D3436);
    margin-bottom: 6px;
}

.transaction-details {
    font-size: var(--fs-14);
    color: var(--color-999999);
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    align-items: start;
    width: 100%;
    overflow-x: auto;
    width: calc(100vw - 90px);
}

.transaction-details .separator {
    position: relative;
    top: 1px;
    color: var(--color-d6d6d6);
    font-size: 13px;
    font-weight: 100;
    padding: 0 2px;
}

.transaction-amount {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    text-align: right;
    margin-left: 12px;
    white-space: nowrap;
}

.transaction-amount.two {
    display: flex;
    justify-content: space-between;
    flex-direction: column;
}

.transaction-amount.two .unit {
    font-size: var(--fs-14);
    color: var(--color-999999);
    margin-top: 3px;
}

.summary-box {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    flex: 1 0 0;
}

/* summary-credit (현금영수증 조회 상단 요약) */
.credit-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.credit-controls button {
    width: 36px;
    height: 36px;
    padding: 5px;
}

.credit-controls div {
    position: relative;
    display: flex;
    flex: 1;
    height: 36px;
    background-color: #f5f5f5;
    border-radius: 6px;
}

div .credit-period {
    flex: 1;
    border: 0;
    border-radius: 8px;
    font-size: var(--fs-15);
    color: var(--color-777777);
    background: none;
    height: 36px;
    outline: none;
}

.credit-controls div button {
    position: absolute;
    right: 0;
    top: 2px;
    background: transparent;
}

.credit-period[readonly] {
    cursor: default;
}

.credit-summary {
    margin-top: 26px;
}

.credit-summary .row {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: var(--fs-16);
    margin-bottom: 6px;
}

.credit-summary .label {
    font-size: var(--fs-16);
    color: var(--color-111111);
    font-weight: var(--fw-700);
}

.credit-summary .amount22 {
    font-size: var(--fs-22);
    font-weight: var(--fw-700);
}
.credit-summary .amount19 {
    font-size: var(--fs-19);
    font-weight: var(--fw-700);
}

.credit-summary .count {
    position: relative;
    left: -10px;
    color: var(--color-2D3436);
    font-size: var(--fs-15);
    font-weight: var(--fw-400);
}

.summary-extend .summary-segment {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
}

.summary-extend .segment-btn {
    height: 28px;
    padding: 0 12px;
    border-radius: 14px;
    border: 1px solid #e6e6e6;
    background: #fff;
    font-size: var(--fs-13);
}

.summary-extend .segment-btn.active {
    background: #3E6AFC;
    color: #fff;
    border-color: #3E6AFC;
}

.summary-extend .summary-amount-list {
    list-style: none;
    margin: 0;
    padding: 16px;
    background-color: var(--color-F4F8FF);
    border-radius: 6px;
}

.summary-extend .summary-amount-list .bdr-6 {
    border-radius: 6px;
}

.summary-extend .summary-amount-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 2px 0;
    font-size: var(--fs-15);
}

.summary-extend .summary-amount-item .label {
    font-size: var(--fs-16);
    color: var(--color-2D3436);
    font-weight: var(--fw-400);
}

.summary-extend .summary-amount-item .label::before {
    content: "·";
    display: inline-block;
    margin-right: 8px;
    position: relative;
    top: -1px;
}

.summary-extend .summary-amount-item .value {
    color: var(--color-2D3436);
    font-weight: var(--fw-500);
    font-size: var(--fs-16);
}

.summary-extend .summary-amount-item .value .unit {
    margin-left: 4px;
    font-weight: var(--fw-400);
}

.summary-extend .summary-amount-item .value.minus {
    color: var(--color-EB5757);
}

.summary-extend .summary-amount-item .value.link {
    color: var(--color-3E6AFC);
}
.apply-row {
    display: flex;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 20px 26px 16px 26px;
    z-index: 500;
    background: var(--color-white);
}

.apply-row.bottom-padding {
    bottom: 70px !important;
}

.apply-row.two-button button:first-child {
    margin-right: 10px;
    min-width: inherit !important;
} 

/* 알림함 */
.sub-wrap { 
    width: 100%;
    padding: 16px 26px; 
    overflow: auto;
}

.notice-tabs { 
    display: flex; 
    gap: 8px; 
    margin-bottom: 16px; 
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    /* hide scrollbar */
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
}
.notice-tabs.sub { 
    margin-bottom: 0; 
}

.notice-tabs::-webkit-scrollbar{ display:none; height:0; }

.tab36 { 
    height: 36px; 
    padding: 0 15px; 
    border-radius: 30px; 
    border: 1px solid #BEBEBE; 
    background: #fff; 
    font-size: var(--fs-16); 
    white-space: nowrap;
    flex: 0 0 auto;
    flex-shrink: 0;
    font-weight: var(--fw-500);
}

.tab36.on {
    background: var(--color-3E6AFC); 
    color: var(--color-white); 
    border-color: var(--color-3E6AFC); 
}

.notice-bottom { 
    display: flex; 
    justify-content: center; 
    padding: 14px 16px; 
    margin-top: 26px; 
    background: var(--color-F4F8FF); 
    border-radius: 8px; 
}

.notice-tip { 
    position: relative;
    font-size: var(--fs-14) !important; 
    color: var(--color-2D3436) !important; 
}

.notice-tip span {
    position: absolute;
    left: 0;
    top: 0;
}

.sub .notice-item {
    padding-left: 0;
    padding-right: 0;
}

/* 공지사항 상세 (Figma 1651:3135) */
.notice-detail {
    padding-top: 4px;
}

.notice-detail__title{
    font-size: var(--fs-20);
    font-weight: var(--fw-600);
    color: var(--color-2D3436);
    margin: 0 0 10px
}

.notice-detail__meta{
    font-size:var(--fs-17);
    color: var(--color-999999);
    margin-bottom: 20px
}

.notice-detail__meta span{
    display: inline-block;
    padding-right: 10px;
    padding-left: 10px;
}

.notice-detail__divider{
    height: 1px;
    background: var(--color-EaEaEa);
    margin-bottom: 30px
}

.notice-detail__body{
    white-space: pre-line;
    font-size: var(--fs-17);
    line-height: 1.3;
    color: var(--color-2D3436)
}
.notice-alert {
    padding: 14px 16px;
    background: var(--color-F4F8FF);
    font-size: var(--fs-14);
    color: var(--color-2D3436);
    margin-bottom: 26px;
}

/* 설정 (Figma 1651:3409) */
.settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.settings-divider {
    height: 1px;
    background: #eaeaea;
    margin: 28px 0;
}

.settings-section {
    padding-bottom: 16px;
}

.nopadding {
    padding-bottom: 0 !important;
}

.settings-section-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
    padding-bottom: 10px;
}

.settings-row {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

.settings-row.link {
    gap: 4px;
}

.settings-row.link .click {
    font-size: var(--fs-16);
    color: var(--color-2D3436);
    padding-right: 28px;
    background: url("../images/Forward.svg") no-repeat right center;
}

.bd-style {
    font-weight: var(--fw-700) !important;
}

.settings-switch {
    position: relative;
    display: inline-block;
    width: 52px;
    height: 28px;
}

.settings-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #BEBEBE;
    border-radius: 30px;
    transition: .2s;
}

.slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 3px;
    top: 3px;
    background: #fff;
    border-radius: 50%;
    transition: .2s;
}

.settings-switch input:checked + .slider {
    background: var(--color-3E6AFC);
}

.settings-switch input:checked + .slider:before {
    transform: translateX(24px);
}

/* 통합거래내역 상세 (Figma 1688:2974) */
.txn-num-group{
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 4px 0 0;
}

.txn-amount{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 0;

}

.txn-amount .value{
    font-size: 28px;
    font-weight: 700;
    color: #2D3436;
}

.txn-amount .value .unit{
    margin-left: 2px;
    font-weight: var(--fw-700)
}

.chip-btn{
    display: inline-flex;
    align-items: center;
    gap: 12px;
    height: 30px;
    padding: 0 10px;
    border-radius: 30px;
    background: var(--color-white);
    font-size: var(--fs-16);
    font-weight: var(--fw-600);
}

.txn-mid{
    display: flex;
    justify-content: left;
    align-items: center;
    gap: 10px;
    padding: 0;
}

.txn-mid .label{
    font-size: var(--fs-17);
    font-weight: var(--fw-600);
    color: var(--color-2D3436)
}

.txn-mid .value{
    font-size: var(--fs-17);
    font-weight: var(--fw-600);
    color: var(--color-999999)
}

.txn-doc{
    display: flex;
    align-items: center;
    padding: 30px 0 0;
    margin-bottom: 5px;
}

.doc-btn{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 13px 8px 43px;
    border-radius: 6px;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    background: url("../images/ico_download.svg") no-repeat left 10px center #F4F8FF;
}

.txn-divider{
    border-bottom: 1px solid #EAEAEA;
    margin-top: 16px;
}

.txn-divider.minus {
    margin-left: -26px;
    margin-right: -26px;
}

.section-title{
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
    padding: 20px 0;
}

.section-title .ic20.rot-180{
    transform: rotate(180deg)
}

.kv-list{
    list-style: none;
    margin: 0;
    padding: 0;
}

.kv-list.pb-ht .kv-row {
    padding-bottom: 15px !important;
}

.kv-row{
    display: flex;
    white-space: nowrap; 
    justify-content: space-between;
    align-items: start;
    gap: 0;
    padding: 0 0 19px;
    flex-wrap: wrap;
}

.kv-row:last-child {
    padding-bottom: 0 !important;
}

.gap-50 .kv-row {
    gap: 40px;
}

.kv-row .k{
    width: 100%;
    max-width: 38%;
    display: inline-block;
    font-size: var(--fs-17);
    color: var(--color-666666);
    white-space: normal;
    word-break: break-all;
}

.kv-row .k.wid-100 {
    max-width: 100%;
}

.kv-row.bolder .k{
    font-weight: var(--fw-700);
}

.kv-row.bolder .v{
    font-weight: var(--fw-700);
}

.kv-row .v{
    max-width: 60%;
    width: 100%;
    font-size: var(--fs-17);
    white-space: normal;
    word-break: break-all;
    color: var(--color-2D3436);
    font-weight: var(--fw-500);
    text-align: right;
    padding-left: 10px;
}

.amount-expand {
    background: var(--color-F4F8FF);
    border-radius: 6px;
    padding: 16px;
    margin: 10px 0 12px 0;
}

.amount-info {
    background: var(--color-F4F8FF);
    padding: 16px;
    border-radius: 6px;
}

.amount-list {
    list-style: none;
    margin: 0;
    padding: 0;
    border-radius: 6px;
}

.amount-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 30px;
}

.amount-item .label {
    font-size: var(--fs-16);
    color: var(--color-2D3436);
}

.amount-item .value {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    text-align: right;
}

.amount-item .value.minus {
    color: #000;
}

/* 토스트바 */
.toast-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 6%;
    display: flex;
    justify-content: center;
    pointer-events: none;
    z-index: 2100;
}
.toast-bar .toast {
    max-width: 358px;
    width: calc(100% - 32px);
    background: rgba(45, 52, 54, 0.8);
    border-radius: 8px;
    padding: 16px;
    display: flex;
    justify-content: center;
    align-items: center;
    pointer-events: auto;
}
.toast-bar .toast-text {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-white);
    text-align: center;
}

/* 바텀시트 이메일 선택  */
.bg-dim {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 17, 17, 0.5);
    z-index: 1000;
}

.bottomsheet {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: var(--color-white);
    border-radius: 16px 16px 0 0;
    padding: 26px;
    z-index: 1001;
    box-sizing: border-box;
}

.bottomsheet.banner {
    padding: 0;
    border-radius: 16px 16px 0 0;
    overflow: hidden;
}

.bottomsheet.banner .bottomsheet-content {
    margin-bottom: 0;
}

.bottomsheet.banner .bottomsheet-content img {
    width: 100%;
}

.bottomsheet-content.expand {
    margin-bottom: 0;
}

.bottom-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5px 26px 20px 26px;
}

.bottom-btn span {
    display: inline-block;
    font-size: var(--fs-15);
    font-weight: var(--fw-400);
    color: var(--color-2D3436);
}

.bottomsheet-header {
    margin-bottom: 30px;
}

.bottomsheet-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
}

.bottomsheet-title h2 {
    font-size: var(--fs-20);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
    margin: 0;
}

.bottom-section .fs16 {
    font-size: var(--fs-16);
}

.list-style-circle li {
    position: relative;
    padding-left: 16px;
}

.list-style-circle li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: -2px;
}

.list-style-circle.link li {
    padding-bottom: 16px;
    font-weight: 500;
}

.list-style-circle.link li::before {
    content: '•';
    position: absolute;
    left: 0;
    top: -2px;
}

.list-style-circle.link li.selected {
    color: var(--color-3E6AFC);
}

.list-style-circle.link li:last-child {
    padding-bottom: 0;
}

.close-btn {
    position: absolute;
    right: 0;
    top: 3px;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    cursor: pointer;
}

.close-btn img {
    width: 100%;
    height: 100%;
}

.bottomsheet-content {
    position: relative;
    margin-bottom: 30px;
}

.banner-page {
    position: absolute;
    right: 15px;
    top: 15px;
    height: 23px;
    line-height: 23px;
    font-size: var(--fs-15);
    color: var(--color-999999);
    padding: 0 10px;
    background: var(--color-white);
    border-radius: 15px;
    border: 1px solid var(--color-EaEaEa);
}

.banner-page .current {
    color: var(--color-3E6AFC);
}

.email-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.text-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    font-size: var(--fs-17);
}

.bottom-section {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding-bottom: 6px;
}
.bottom-section p, .bottom-section ul li {
    color: var(--color-2D3436);
    font-size: var(--fs-17);
}

.email-label {
    display: flex;
    align-items: center;
    gap: 10px;
}

.mail-icon {
    position: relative;
    width: 36px;
    height: 24px;
    border-radius: 4px;
}

.mail-icon svg {
    position: absolute;
    top: 0;
    left: 0;
}

.label-text {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
    line-height: 1.5;
    letter-spacing: -0.5%;
}

.email-select {
    width: 100%;
}

.select-wrapper {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.select-wrapper select {
    width: 100%;
}

.select-text {
    font-size: var(--fs-15);
    color: var(--color-2D3436);
    line-height: 1.5;
}

.select-arrow {
    width: 20px;
    height: 20px;
}

.error-message {
    margin-top: -5px;
}

.error-message p {
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    color: var(--color-EB5757);
    margin: 0;
}

.bottomsheet-footer {
    display: flex;
    gap: 10px;
}

.btn-secondary {
    width: 100%;
    height: 50px;
    background: #999999;
    color: var(--color-white);
    border: none;
    border-radius: 8px;
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    line-height: 1.35;
    cursor: pointer;
}

.home-indicator {
    position: fixed;
    bottom: 21px;
    left: 50%;
    transform: translateX(-50%);
    width: 139px;
    height: 5px;
    background: var(--color-2D3436);
    border-radius: 10px;
    z-index: 1002;
}

/* 거래 취소 전체/부분 */
.cancel-content {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
    box-sizing: border-box;
}

.cancel-list {

}

/* 거래취소 폼 스타일 */
.form-section {
    margin-top: 30px;
}

.form-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.form-group:last-child {
    margin-bottom: 0;
}

.form-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    width: 114px;
    min-width: 114px;
    flex-shrink: 0;
}

.form-input::placeholder {
    color: #999;
}

.input-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    min-width: 20px;
}

.error input {
    border-color: var(--color-EB5757);
}

.error-msg {
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    color: var(--color-EB5757);
    margin-top: -5px;
    margin-bottom: 20px;
    margin-left: 124px;
    line-height: 1.5;
    max-width: calc(100% - 124px);
    word-wrap: break-word;
    box-sizing: border-box;
}

.notice-text {
    margin-top: 26px;
    max-width: 100%;
    box-sizing: border-box;
    color: var(--color-2D3436);
}

.notice-text p {
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    color: var(--color-EB5757);
    line-height: 1.5;
    letter-spacing: -0.5%;
    margin: 0;
    word-wrap: break-word;
    max-width: 100%;
}

/* 부분취소 테이블 */
.tb_both {
    border-bottom: 1px solid #D9D9D9;
    margin-top: 16px;
    padding: 0 0 30px 0;
}
.partial-cancel-table {
    width: 100%;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    background: var(--color-white);
    margin-top: 10px;
    border-collapse: collapse;
    overflow: hidden;
}

.partial-cancel-table thead th {
    background: var(--color-white);
    padding: 5px 16px;
    font-size: var(--fs-15);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    line-height: 1.19;
    text-align: center;
    border: none;
}

.partial-cancel-table th.header-empty {
    width: 65px;
    color: var(--color-666666);
}

.partial-cancel-table th.header-balance {
    width: 116px;
    padding-right: 20px;
    padding-left: 0;
}

.partial-cancel-table th.header-cancel {
    width: 141px;
}

.partial-cancel-table tbody td {
    padding: 5px 0;
    border: none;
    vertical-align: middle;
}

.partial-cancel-table .row-label {
    width: 65px;
    font-size: var(--fs-15);
    font-weight: var(--fw-400);
    color: var(--color-777777);
    line-height: 1.19;
    text-align: left;
    padding-left: 10px;
}

.partial-cancel-table .row-balance {
    width: 116px;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    line-height: 1.19;
    text-align: right;
    padding-right: 20px;
}

.partial-cancel-table .row-cancel {
    width: 141px;
    text-align: center;
    padding-right: 1px;
}

.cancel-input {
    width: 100%;
    text-align: right;
}

.cancel-input:focus {
    outline: none;
    border-color: var(--color-3E6AFC);
}

/* 거래 취소 확인 팝업 (Figma 1740:3538) */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.popup-bg-dim {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 17, 17, 0.5);
    z-index: 2001;
}

.popup-container {
    position: relative;
    background: var(--color-white);
    border-radius: 16px;
    padding: 26px;
    z-index: 2002;
    box-sizing: border-box;
}

.popup-title {
    padding-bottom: 30px;
}

.popup-title p {
    font-size: var(--fs-17);
    font-weight: var(--fw-400);
    line-height: 1.5;
    letter-spacing: 0.05%;
    text-align: center;
    color: var(--color-2D3436);
    margin: 0;
}

.popup-btn-group {
    display: flex;
    gap: 10px;
}


/* 현금영수증 수기발행 1단계 (Figma 1752:3528) */
.issue-progress .bar {
    height: 16px;
    background: #D9D9D9;
    border-radius: 20px;
    overflow: hidden;
    margin-bottom: 26px;
}

.issue-progress .bar .fill {
    height: 16px;
    background: linear-gradient(90deg, #8DA7FF 0%, #3E6AFC 100%);
    border-radius: 20px;
}

.issue-title {
    font-size: var(--fs-20) !important;
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
    padding: 0 0 10px 0;
    margin-bottom: 0 !important;
}

.issue-form {
    padding: 0 0 30px;
}

.issue-row {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0;
    padding: 0 0 16px;
}

.issue-row.beetween {
    justify-content: space-between !important;
}

.issue-label {
    width: 95px;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.issue-label.wid-105 {
    width: 105px;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.issue-field {
    flex: 1;
    max-width: 100%;
    min-width: 0;
}

.issue-field.flex-auto {
    flex: auto;
    max-width: 100%;
    min-width: 0;
}

.issue-field input {
    flex: 1;
    font-size: 15px;
    width: 100%;
}
.seg-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.seg-buttons button {
    font-size: var(--fs-15);
    font-weight: var(--fw-700);
}   

.seg-buttons button.light {
    font-size: var(--fs-15);
    font-weight: var(--fw-400);
}  

.issue-help.error {
    padding: 0 0 16px 95px;
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    color: var(--color-EB5757);
    margin-top: -10px;
}

.issue-note {
    padding: 10px 0 0 0;
}

.issue-note.error {
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    color: var(--color-EB5757);
}

/* 빌링 결제신청 (Figma 1757:4252) */
.billing-title {
    font-size: var(--fs-20);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
    padding: 0 0 5px 0;
}

.billing-form {
    padding: 0 0 30px;
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.billing-form.no-padding {
    padding-bottom: 0;
}

.billing-form.gap-16 {
    gap: 16px;
}

.gap-16 {
    gap: 16px !important;
}

.gap-26 {
    gap: 26px !important;
}

.gap-30 {
    gap: 30px !important;
}

.billing-field, .billing-field-left {
    position: relative;
    flex: 1;
}

.billing-field input,
.billing-field select {
    width: 100%;
    height: 40px;
    font-size: var(--fs-15);
    text-align: right;
}

.billing-field .date input, 
.billing-field select {
    padding-right: 35px;
}

.billing-field-left input,
.billing-field-left select {
    width: 100%;
    height: 40px;
    font-size: var(--fs-15);
    text-align: left;
}

.billing-field-left .date input, 
.billing-field-left select {
    padding-right: inherit;
}

.billing-inline {
    display: grid;
    grid-template-columns: 1fr 40px;
    gap: 10px;
}

.calendar-btn .input-icon {
    width: 20px;
    height: 20px;
}


/* 정산달력 */

.calendar-wrap {
    padding: 0 10px 0 10px;
}

.top-select, .top-select select {
    width: 100%;
}

.top-select {
    padding-bottom: 26px;
}

span.complete, span.scheduled {
    font-weight: var(--fw-700);
}

span.complete {
    color: #00B894;
}

span.scheduled {
    color: var(--color-3E6AFC);
}

.calendar-wrap .month-group {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.calendar-wrap .month-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.calendar-wrap .month-btn {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-wrap .month-btn.disabled {
    opacity: 0.2;
    cursor: not-allowed;
}

.calendar-wrap .amount-group {
    padding: 16px 0 22px 0;
    border-bottom: 1px solid #eaeaea;
}

.calendar-wrap .amount-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.calendar-wrap .amount-row:last-child {
    margin-bottom: 0;
}

.calendar-wrap .amount-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-400);
    color: var(--color-2D3436);
}

.calendar-wrap .amount-value {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    text-align: right;
}

.calendar-wrap .legend-group {
    display: flex;
    gap: 20px;
    padding: 16px 0;
}

.calendar-wrap .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.calendar-wrap .legend-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
}

.calendar-wrap .legend-dot.complete {
    background: #00B894;
}

.calendar-wrap .legend-dot.scheduled {
    background: var(--color-3E6AFC);
}

.calendar-wrap .legend-text {
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
    color: var(--color-111111);
}

.calendar-wrap .calendar-grid {
    padding-bottom: 30px;
}

.calendar-wrap .weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
    padding-bottom: 12px;
}

.calendar-wrap .weekday {
    text-align: center;
    font-size: var(--fs-16);
    font-weight: var(--fw-400);
    color: var(--color-666666);
}

.calendar-wrap .weekday.sun {
    color: #FF0000;
}

.calendar-wrap .weekday.sat {
    color: var(--color-4968BD);
}

.calendar-wrap .days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 10px;
}

.calendar-wrap .day {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    font-size: 16px;
    font-weight: 400;
    color: var(--color-111111);
}

/* Weekend colors for day numbers (exclude status-styled days) */
.calendar-wrap .days .day:nth-child(7n+1):not(.complete):not(.scheduled) {
    color: #FF0000;
}
.calendar-wrap .days .day:nth-child(7n):not(.complete):not(.scheduled) {
    color: var(--color-4968BD);
}

.calendar-wrap .day.other {
    opacity: 0;
}

.calendar-wrap .day.today {
    border: 1px solid var(--color-111111);
    border-radius: 20px;
}

.calendar-wrap .day.complete {
    background: #00B894;
    color: var(--color-white);
    border-radius: 20px;
    font-weight: 700;
}

.calendar-wrap .day.scheduled {
    background: var(--color-3E6AFC);
    color: var(--color-white);
    border-radius: 20px;
    font-weight: 700;
}

.calendar-wrap .settlement-list {
    padding: 16px 0;
}

.calendar-wrap .settlement-item {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}

.calendar-wrap .settlement-item:last-child {
    margin-bottom: 0;
}

.calendar-wrap .settlement-tag {
    padding: 3px 12px;
    border-radius: 30px;
    font-size: var(--fs-14);
    font-weight: var(--fw-700);
}

.calendar-wrap .settlement-tag.scheduled {
    color: var(--color-3E6AFC);
    border: 1px solid var(--color-3E6AFC);
}

.calendar-wrap .settlement-tag.complete {
    color: #00B894;
    border: 1px solid #00B894;
}

.calendar-wrap .settlement-date {
    font-size: var(--fs-16);
    font-weight: var(--fw-400);
    color: var(--color-111111);
}

.calendar-wrap .settlement-amount {
    margin-left: auto;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-111111);
}


/* 부가서비스 소개 (option-list 하위 전용) */
.ing-list {
    padding: 10px; 
    display: flex; 
    flex-direction: column; 
    gap: 16px; 
}

.ing-list .top-select {
    padding-bottom: 0;
}

.ing-list .list-wrap01, .ing-list .list-wrap02 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 26px;
    border-radius: 1rem;
    box-shadow: 4px 4px 4px 0 rgba(0, 0, 0, 0.05);
}

.ing-list .list-wrap01 {
    background: var(--Background, #F4F8FF);
    gap: 50px;
}

.ing-list .list-wrap02 {
    background: var(--color-white);
    border: 1px solid #eaeaea;
    gap: 20px;
}

.ing-list .service-name {
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.ing-list .service-desc {
    margin-top: 6px;
    font-size: var(--fs-15);
    color: var(--color-666666);
    line-height: 1.4;
    white-space: pre-line;
}

.ing-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-700);
    margin-top: 16px;
}

/* 부가서비스_신용카드 ARS 결제_결제 신청 성공 */
.success-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 100vh;
    background: var(--color-white);
}

.success-body {
    width: 338px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    padding-top: 110px;
}

.success-icon {
    position: relative;
}

.success-icon::before {
    content: '';
    display: block;
    width: 90px;
    height: 90px;
    background: url("../images/ico_sucess.svg") no-repeat center center / contain;
}
.error-icon {
    position: relative;
}

.error-icon::before {
    content: '';
    display: block;
    width: 90px;
    height: 90px;
    background: url("../images/ico_error.svg") no-repeat center center / contain;
}

.success-title {
    width: 290px;
    text-align: center;
    font-size: 22px;
    font-weight: var(--fw-700);
    line-height: 1.4;
    color: var(--color-111111);
    margin: 0;
}

.success-result {
    width: 100%;
    background: #F5F5F5;
    border-radius: 8px;
    padding: 26px;
}
.success-result .result-text {
    font-size: var(--fs-17);
    color: var(--color-2D3436);
    margin: 0;
    text-align: center;
}

.success-actions {
    width: 390px;
    padding: 40px 26px 0 26px;
}

.txn-date {
    font-size: var(--fs-17);
    color: var(--color-999999);
    margin-top: 5px;
    margin-bottom: 40px;
    font-weight: var(--fw-600);
}

ul.txn-amount-detail {
    flex: 0 0 100%;
    white-space: normal;
}

ul.txn-amount-detail li {
    display: flex;
    white-space: nowrap; 
    justify-content: space-between;
    align-items: start;
    gap: 0;
    padding: 3px 0;
    flex-wrap: wrap;
}

ul.txn-amount-detail li span {
    display: inline-block;
    word-break: break-all;
    white-space: normal;
}

ul.txn-amount-detail li span:first-child {
    color: var(--color-777777);
    font-size: var(--fs-15);
    font-weight: var(--fw-400);
    width: 35%;
}

ul.txn-amount-detail li span:last-child {
    color: var(--color-666666);
    font-size: var(--fs-16);
    font-weight: var(--fw-400);
    width: 60%;
    text-align: right;
}

/* 결제 정보 > 서비스 이용, 수수료 및 정산주기 (ing-list 하위) */
.ing-card-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.ing-card {
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    padding: 16px;
    background: var(--color-white);
}

.ing-card-head {
    display: flex;
    gap: 6px;
}

.ing-card-name {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.ing-card-link {
    margin-top: 0;
    font-size: var(--fs-14);
    color: #999999;
}


/* bottomsheet: card-fee exact match */
.card-fee .desc {
    font-size: var(--fs-17);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    padding-bottom: 30px;
    padding-left: 15px;
}

.card-fee .desc::before {
    content: '●';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 5px;
}

.card-fee-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #F5F5F5;
    border-radius: 8px;
    margin-bottom: 8px;
    margin-top: 26px;
}

.card-fee-box .label {
    width: 133px;
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.card-fee-list {
    padding: 0 10px;
}

.card-fee-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 16px 0 10px;
    border-bottom: 1px solid #D9D9D9;
    margin-bottom: 10px;
}

.card-fee-list-header .th-left {
    font-size: var(--fs-15);
    color: var(--color-666666);
}

.card-fee-list-header .th-right {
    font-size: var(--fs-15);
    color: var(--color-666666);
    text-align: right;
}

.card-fee-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.card-fee-row span:first-child {
    font-size: var(--fs-17);
    color: var(--color-666666);
}

.card-fee-row span:last-child {
    font-size: var(--fs-17);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

/* ensure full width */
.card-fee,
.card-fee-box,
.card-fee-list {
    width: 100%;
}

.card-fee-box .field {
    flex: 1;
    width: 100%;
}

.card-fee-box .field select,
.card-fee-box select {
    width: 100%;
}

/* card-fee tabs full width and equal split */
.card-fee .notice-tabs {
    width: 100%;
    overflow: visible;
}

.card-fee .notice-tabs .tab36 {
    flex: 1 1 0;
    flex-shrink: 1;
    text-align: center;
    min-width: 0;
}

/* card-list (bottomsheet select list) */
.card-list {
    display: flex;
    flex-direction: column;
    margin-left: -26px;
    margin-right: -26px;
    max-height: 300px;
    overflow-y: auto;
}

.card-option {
    display: flex;
    justify-content: start;
    align-items: center;
    gap: 10px;
    padding: 10px 26px;
}

.card-option .name {
    font-size: var(--fs-17);
    color: var(--color-2D3436);
}

.card-option .check {
    width: 20px;
    height: 20px;
}

.card-option.selected {
    background: #F4F8FF;
    background: url('../images/ico_alone_check.svg') no-repeat right 26px center #F4F8FF;
}


/* fee-cycle (계좌 간편결제 수수료 및 정산주기) */

.fee-cycle {
    position: relative;
}

.fee-cycle .desc {
    font-size: var(--fs-17);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    padding-bottom: 10px;
}

.fee-cycle .desc + .desc {
    padding-bottom: 8px;
}

.fee-cycle .divider {
    height: 1px;
    background: #EAEAEA;
    margin: 8px 0 16px auto;
}

.fee-cycle .kv-list .kv-row {
    padding-bottom: 10px;
}

.fee-cycle .kv-list .k {
    color: #666666;
}

/* merchant free-interest detail (64_) */
.fee-cycle .card-fee-box {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #F5F5F5;
    border-radius: 8px;
    margin-bottom: 26px;
}

.fee-cycle .card-fee-box .label {
    width: 133px;
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.fee-cycle .desc {
    font-size: var(--fs-17);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    padding-bottom: 8x;
}

.desc.dot {
    padding-left: 15px;
}

.desc.dot::before {
    content: '●';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 5px;
}

.label.desc.dot {
    padding-left: 23px;
}

.label.desc.dot::before {
    left: 8px;
}

.kv-row.pl-10 {
    padding-left: 15px;
}

/* 결제데이터 통보 > 리스트 블록 (ing-list 하위) */
.notify-container {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 20px;
}
.notify-header {
    display: flex;
    justify-content: center;
    padding: 0 0 16px;
}
.notify-title {
    width: 100%;
    font-size: var(--fs-18);
    font-weight: var(--fw-700);
}
.notify-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.notify-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: 16px 0;
}
.notify-name {
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}
.notify-divider {
    width: 100%;
    height: 1px;
    background: var(--color-EaEaEa);
}
.notify-bar {
    width: 100%;
    padding: 16px 0;
    background: var(--color-F4F8FF);
    position: relative;
    border-radius: 8px;
}

.notify-bar span {
    display: block;
    width: 100%;
    padding: 0 16px 0 30px;
    font-size: var(--fs-14);
    color: var(--color-2D3436);
}

.notify-bar span::before {
    content: '●';
    display: block;
    position: absolute;
    left: 16px;
    right: 0;
    font-size: 4px;
}

.notify-detail-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.notify-content {
    position: relative;
    top: -8px;
}

.notify-detail-item {
    position: relative;
    font-size: var(--fs-17);
    color: var(--color-666666);
    line-height: 1.2;
    padding: 0 0 16px 20px;
}
.notify-detail-item a {
    text-decoration: underline;
    color: var(--color-666666);
}

.notify-detail-item::before {
    content: "";
    display: inline-block;
    width: 3px;
    height: 3px;
    background: var(--color-666666);
    border-radius: 3px;
    position: absolute;
    left: 5px;
    top: 8px;
}

.ic20.arrow-down {
    width: 20px;
    height: 20px;
    background: url('../images/select_arrow.svg') no-repeat center center;
}

/* 가맹점 정보 화면 전용 */
.merchant-info {
    padding: 0 10px;
}
.merchant-info .section + .section {
    margin-top: 10px; 
}

.merchant-info .section-title { 
    font-size: var(--fs-17); 
    font-weight: var(--fw-700); 
    padding: 2px 0 2px 0; 
    display: flex; 
    align-items: center; 
    gap: 6px;
    margin-bottom: 16px;
}

.merchant-info .kv-list {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0;
}

.merchant-info .kv-list .kv-row { 
    padding-bottom: 16px; 
    width: 100%;
    flex-wrap: nowrap;
}

.info-divider { 
    width: 100%; 
    height: 1px; 
    background: #EAEAEA; 
}

/* 비밀번호 관리 (ing-list 하위) */
.pwd-manage {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 16px;
}
.pwd-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-700);
}
.pwd-buttons {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
}
.pwd-btn {
    width: 100%;
    border: 1px solid #999999;
    font-size: var(--fs-15);
}

/* 사용자관리_로그인인증정보 */
.auth-list { 
    padding: 0 0 76px 0; 
}

.auth-item { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 16px 0;
    border-bottom: 1px solid #eaeaea;
}

.auth-item:last-child {
    border-bottom: 0;
}

.auth-item-left { 

    display: flex; 
    align-items: center; 
    gap: 10px; 
}

.tag-pill { 
    min-width: 60px;
    text-align: center;
    height: 28px; 
    line-height: 28px; 
    padding: 0 12px; 
    border: 1px solid #3E6AFC; 
    color: #3E6AFC;
    border-radius: 30px; 
    font-size: var(--fs-14); 
    font-weight: var(--fw-700); 
}

.tag-pill.red { 
    border-color: #FF4757; 
    color: #FF4757;
}

.auth-name { 
    font-size: var(--fs-17); 
    font-weight: var(--fw-500); 
    color: var(--color-2D3436); 
}

.auth-divider { 
    height: 1px; 
    background: #EAEAEA; 
}

.ic20.arrow-right { 
    width: 13px; 
    height: 13px; 
    background: url('../images/Forward.svg') no-repeat center center; 
}

.notice-bottom {
    display: flex;
    justify-content: left;
}

.notice-bottom.left-align {
    justify-content: flex-start;
}

/* 알림톡 결제 통보_서비스 설정 안내문구 보정 */
.service-tip {
    position: relative;
    font-size: var(--fs-15);
    color: var(--color-777777);
}

/* 사용자 설정_로그인 인증정보 */
.settings-login-auth {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.settings-login-auth .group {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.settings-login-auth .group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 16px 0;
}

.settings-login-auth .group-header .title {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.settings-login-auth .input-row {
    display: grid;
    grid-template-columns: 1fr 36px;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
}

.settings-login-auth .input-row:last-child {
    padding-bottom: 0;
}

.ic20.plus {
    width: 20px;
    height: 20px;
    background: url('../images/ico_menu_plus_no.svg') no-repeat center center;
}

.icon-btn.minus {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #F5F5F5 url('../images/ico_del_minus.svg') no-repeat center center;
}

.notice-bar {
    padding: 14px 16px;
    background: #F4F8FF;
    border-radius: 8px;
    font-size: var(--fs-14);
    color: var(--color-2D3436);
    margin-top: 10px;
}

/* 사용자관리_계정권한 */
.perm-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 0;
}

.perm-field {
    display: grid;
    grid-template-columns: 116px 1fr;
    align-items: center;
    gap: 10px;
}

.perm-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.perm-control select {
    width: 100%;
}

.perm-list {
    display: flex;
    flex-direction: column;
}

.perm-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 17px 0;
    border-bottom: 1px solid #EAEAEA;
}

.perm-item:last-child {
    border-bottom: 0;
}

.perm-name {
    font-size: var(--fs-17);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.pdw-16 {
    padding: 0 16px;
}

.pdw-16 .option-list {padding-top: 16px;}

.pdw-16 .full-menu-header {
    margin-left: -16px;
    margin-right: -16px;
}

.ing-list.pdtop {
    padding-top: 26px;
    gap: 10px;
}

.ing-title.fs18 {
    font-size: var(--fs-18);
}

.ing-list.sev {
    gap: 0;
}

.ing-list.sev div {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.ing-list.sev .settings-section.nopadding {
    margin-top: 16px;
}

.set-divider {
    height: 1px;
    background: #EAEAEA;
    margin: 8px 0;
}

.settings-row-title {
    color: var(--color-2D3436);
    font-size: var(--fs-16);
    font-weight: var(--fw-400);
}

.bd-sub.dot {
    padding-left: 10px;
}

.bd-sub.dot::before {
    content: '●';
    display: block;
    position: absolute;
    left: 0;
    right: 0;
    font-size: 4px;
}

/* 계정정보_사용자 추가 (74) */
.user-add {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* .user-add.gap-30 {
    gap: 30px
} */

.user-add.info {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.ua-row {
    display: grid;
    grid-template-columns: 116px 1fr;
    align-items: center;
    gap: 10px;
}

.ua-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.ua-label .red {
    color: var(--color-EB5757);
}

.ua-help {
    padding: 0 0 0 126px;
    font-size: var(--fs-14);
    font-weight: var(--fw-500);
}

.ua-help.error {
    color: var(--color-EB5757);
    margin-top: -20px;
}

.ua-desc .ua-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
    margin-bottom: 12px;
}

.ua-desc .ua-note {
    font-size: var(--fs-16);
    line-height: 1.35;
    color: var(--color-2D3436);
    margin: 0;
}

.ua-group-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 8px 16px 0;
}

.ua-group-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.ua-input-row {
    display: grid;
    grid-template-columns: 1fr 36px;
    align-items: center;
    gap: 16px;
    padding-bottom: 16px;
}

.ua-input-row:last-child {
    padding-bottom: 0;
}

.ing-list.add {
    gap: 40px;
}

/* 세금 계산서_리스트 (80) */
.ing-list.tax { 
    gap: 16px; 
}

.tax-tabs { 
    display: grid; 
    grid-template-columns: 1fr 1fr; 
    border-bottom: 1px solid #e6e6e6; 
    margin-left: -26px; 
    margin-right: -26px; 
    width: calc(100% + 52px); 
}

.tax-tab { 
    height: 46px; 
    background: #fff; 
    border: none; 
    font-size: var(--fs-15); 
    font-weight: var(--fw-600); 
    color: var(--color-B9BDC5); 
}

.tax-tab.active { 
    color: var(--color-111111); 
    border-bottom: 2px solid var(--color-111111); 
}

.tax-sort { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    gap: 48px; 
    padding: 0 16px 0 26px; 
}

.tax-sort-text { 
    font-size: var(--fs-16); 
    color: #000; 
}

.tax-filter-row { 
    display: grid; 
    grid-template-columns: 1fr 36px; 
    gap: 10px; 
    padding: 0 26px; 
}

.tax-chip {
    display: inline-flex;
    align-items: center;
    gap: 78px;
    height: 36px;
    padding: 0 0 0 10px;
    background: #F5F5F5;
    border-radius: 6px;
}
.transfer-filter { display:flex; align-items:center; gap:10px; padding:30px 26px 0; }

.icon-24.adjust {
    width: 24px;
    height: 24px;
    background: url('../images/ico_setting.svg') no-repeat center center;
}

.icon-24.download {
    width: 36px;
    height: 36px;
    border-radius: 6px;
    background: #F4F8FF url('../images/ico_download.svg') no-repeat center center;
}

.tax-month {
    padding-left: 26px;
    font-size: var(--fs-16);
    font-weight: var(--fw-600);
    color: var(--color-2D3436);
}

.tax-list {
    display: flex;
    flex-direction: column;
}

.tax-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 26px;
}

.tax-left {
    width: 100%;
    max-width: 338px;
}

.tax-name {
    font-size: var(--fs-16);
    color: var(--color-2D3436);
}

.tax-sub {
    font-size: var(--fs-14);
    color: var(--color-777777);
    margin-top: 6px;
}

.tax-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

.tax-amount {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.tax-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #3E6AFC;
}

/* arrow rotation utility used in expanded sections */
.ic20.rot-180 { transform: rotate(180deg); }

/* VAT success (83) */
.success-subtitle {
    font-size: var(--fs-18);
    font-weight: var(--fw-700);
    line-height: 1.4;
    color: var(--color-111111);
    margin: 0;
    text-align: center;
}

.success-note {
    position: relative;
    width: 100%;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    text-align: left;
    padding-left: 25px;
    top: -20px;
}

.success-note.dot::before {
    content: '●';
    display: block;
    position: absolute;
    left: 10px;
    right: 0;
    font-size: 4px;
}

/* VAT failure (84) */
.error-icon {
    position: relative;
    width: 90px;
    height: 90px;
}

.error-icon::before {
    content: '';
    display: block;
    width: 90px;
    height: 90px;
    background: url("../images/ico_error.svg") no-repeat center center / contain;
}

.result-text.align-left {
    text-align: left;
}

.position_label {
    position: relative;
    padding-left: 45px;
}

.position_label span:first-child {
    position: absolute;
    left: 0;
    right: 0;
}


/* 부가서비스_신용카드 ARS 결제 (91) */
.ars-list .date-header {
    padding-left: 26px;
}

.ars-list .transaction-item {
    border-bottom: 1px solid #EAEAEA;
}

.ars-list .transaction-item:last-child {
    border-bottom: none;
}

.ars-list .transaction-title {
    font-weight: var(--fw-500);
}

/* 부가서비스_신용카드 ARS 결제_결제 신청 (92) */
.seg-buttons .btn-white {
    border: 1px solid #999;
}

/* SMS 결제 통보 (94) - resend label color */
.resend-label {
    color: #3E6AFC;
    font-weight: var(--fw-500);
}

/* 알림톡 결제 통보 (97) */
.status-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
}

.status-label.success {
    color: #3E6AFC;
}

.status-label.fail {
    color: #999999;
}

.summary-section.no-border { /* ensure same as 94 page */
    border-bottom: 0;
    padding-bottom: 0;
}

/* 95_SMS 결제 통보_재발송 bottomsheet */
.resend-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 26px;
}

.resend-row {
    font-size: var(--fs-17);
    line-height: 1.5;
    color: var(--color-2D3436);
}

.resend-box {
    background: #F5F5F5;
    border-radius: 10px;
    padding: 16px;
    margin-bottom: 30px;
}

.resend-text {
    margin: 0;
    font-size: var(--fs-16);
    line-height: 1.5;
    color: var(--color-2D3436);
}

.keyword-tag.flex-1 {
    flex: 1;
    white-space: wrap;
    height: auto !important;
    padding: 5px 10px;
    text-align: center;
    line-height: 1.4 !important;
}

/* 98 알림톡 결제 통보_서비스 설정_토스트포함 */
.service-settings {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.service-notice {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-bottom: 40px;
}

.service-notice div {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    line-height: 1.35;
    color: #636E72;
}

.service-merchant {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 0;
}

.service-title {
    width: 105px;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.service-select {
    flex: 1;
    position: relative;
}

.service-select select {
    width: 100%;
    height: 40px;
    padding: 12px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}

.service-section {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.service-section {
    border-bottom: 1px solid #EAEAEA;
}

.service-section:last-child {
    border-bottom: 0;
}

.service-section-title {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
    padding-bottom: 16px;
    border-bottom: 1px solid #EAEAEA;
}

.service-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 13px 0;
}

.service-row.align-right {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 10px;
    padding: 20px 0 12px 0;
}

.service-row.align-right span {
    font-size: var(--fs-15);
    color: var(--color-666666);
    font-weight: var(--fw-500);
}

.service-row span {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.switch-group {
    display: flex;
    align-items: center;
    gap: 53px;
}

/* 100 링크결제_결제신청_1단계 */
.seg-buttons.grid-3 {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.link-apply-date {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-2D3436);
}

/* 101 링크결제_결제신청_2단계 */
.link-content input[type="text"] {
    width: 100%;
}

.gap-10 {
    gap: 10px;
}

.gap-20 {
    gap: 20px;
}

.item30 {
    flex-wrap: wrap; 
}

.item30 > span {
    flex: 1 0 calc(33.333% - 16px);
    margin-bottom: 6px;
}

/* 102 링크결제_발송내역_미리보기 */
.preview-body {
    width: 338px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 37px;
    padding-top: 60px;
    margin: 0 auto;
}

.attention-icon {
    position: relative;
    width: 90px;
    height: 90px;
}

.preview-title {
    width: 290px;
    text-align: center;
    font-size: 22px;
    font-weight: var(--fw-700);
    line-height: 1.4;
    color: var(--color-111111);
    margin: 0;
}

.preview-result {
    position: relative;
    width: 100%;
    background: #F5F5F5;
    border-radius: 8px;
    padding: 26px;
    max-height: 326px;
    overflow-y: auto;
    text-align: center;
}

.preview-text {
    font-size: var(--fs-17);
    color: var(--color-2D3436);
    margin: 0;
}

.preview-text b {
    font-weight: var(--fw-700);
}

.preview-scroll {
    position: absolute;
    right: 8px;
    top: 26px;
    width: 8px;
    height: 244px;
    border-radius: 10px;
    background: #CCCCCC;
}

/* 103 지급대행 - account summary block */
.account-frame .credit-summary {
    margin-top: 26px;
}

.account-frame .credit-summary .row {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    text-align: left;
    font-size: var(--fs-16);
    margin-bottom: 6px;
}

.account-frame .credit-summary .row > span {
    width: 100%;
    display: block;
}

.account-frame .credit-summary .row.horizontal > span {
    width: inherit;
}

.account-frame .credit-summary .label {
    font-size: var(--fs-16);
    color: var(--color-111111);
    font-weight: var(--fw-700);
}

.account-frame .credit-summary .amount22 {
    font-size: var(--fs-28);
    font-weight: var(--fw-700);
}

.account-frame .credit-summary .amount20 {
    font-size: var(--fs-22);
    font-weight: var(--fw-700);
}

.transaction-details.gap-0 {
    gap: 0;
}

/* 104 지급대행_상세 */
.pay-top {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 10px 10px 0;
}

.pay-top .num-amount .amount {
    font-size: var(--fs-28);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.pay-top .num-store {
    margin-top: 2px;
}

.pay-top .num-store, .pay-top .num-day {
    font-size: var(--fs-17);
    font-weight: 600;
    color: #999999;
}

.receipt-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 26px;
}

.receipt-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 10px;
    border-radius: 6px;
    background: #F4F8FF;
}

.detail-divider {
    height: 1px;
    background: #EAEAEA;
    margin: 20px -26px;
}

.pay-detail {
    padding: 0 10px;
}

.pay-detail .detail-title {
    font-size: var(--fs-17);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
    padding-bottom: 16px;
}

/* 105 알림톡 결제 통보 -> 지급대행 신청 폼 */
.billing-form.gap-16 { 
    gap: 16px; 
}

.billing-row { 
    display: flex; 
    align-items: center; 
    gap: 30px; 
    justify-content: space-between;
}

.billing-label {
    width: 80px;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.billing-label span {
    color: var(--color-EB5757);
}

.billing-field { 
    flex: 1; 
}

.billing-inline { 
    display: grid; 
    grid-template-columns: 1fr 40px; 
    gap: 10px; 
}

.calendar-btn { 
    background: none; 
    border: none; 
}
.notice-bar.style-note {
    background: none;
    padding: 0;
}

.notice-bar.style-note > span {
    position: relative;
    display: block;
    padding-left: 13px;
}
.notice-bar.style-note > span > span {
    position: absolute;
    left: 0;
    top: 0;
}
/* 107 자금이체_결과조회 */
/* Uses existing .summary-extend, .summary-amount-list styles from 106 */
/* 108 안면인증_리스트 */
.face-list { 
    padding: 0 10px; 
}

.face-item { 
    display:flex; 
    justify-content: space-between; 
    align-items: flex-start; 
    gap:10px; 
    padding:16px 0; 
    border-bottom:1px solid #EAEAEA; 
}

.face-item:last-child { 
    border-bottom:0; 
}

.face-txt { 
    flex:1; 
    min-width:0; 
}

.face-id { 
    font-size: var(--fs-16); 
    color: var(--color-2D3436); 
}

.face-msg { 
    font-size: var(--fs-14); 
    color: #777777; 
    margin-top: 6px; 
}

.face-status { 
    display: flex; 
    align-items: center; 
    gap: 6px; 
    white-space: nowrap; 
}

.face-status .dot { 
    width: 9px; 
    height: 9px; 
    border-radius: 50%; 
    display: inline-block; 
}

.face-status .dot.blue { 
    background:#3E6AFC; 
}

.face-status .dot.gray { 
    background:#C6C6C6; 
}

.face-status .status { 
    font-size: var(--fs-16); 
    font-weight: var(--fw-500); 
    color: #3E6AFC; 
}

.face-status .status.fail { color: #999999; }

/* 108 안면인증_리스트 - 두줄 말줄임 처리 */
.face-list .transaction-details span:last-child {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
}
/* 109 정산대행_정산대행관리_정산 데이터 펼침 */
/* Uses existing .summary-extend, .summary-amount-list, .notice-tabs, .tab36 styles */
.account-frame .credit-summary .row.horizontal {
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
}


/* 110 정산대행 관리_상세 - 상태 변경 이력 */
.sd-history {
    padding: 0 10px;
}
.sd-history-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    height: 70px;
}
.sd-history-item .left { width: 180px; }
.sd-history-item .right { width: 140px; text-align: right; }
.sd-history-item .name {
    font-size: 16px;
    font-weight: 400;
    color: var(--color-2D3436);
}
.sd-history-item .time {
    font-size: 14px;
    color: var(--color-777777);
}
.sd-history-item .reason {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-2D3436);
}

.detail-title.summary-amount.divTop {
    justify-content: space-between;
}

/* 111 bottomsheet 정산 동의/거절 */
.agree-section {
    padding: 0 0 0 0;
}
.agree-desc {
    font-size: var(--fs-17);
    color: var(--color-2D3436);
    padding-left: 22px;
}

.agree-desc::before {
    content: '●';
    display: block;
    position: absolute;
    left: 32px;
    right: 0;
    font-size: 5px;
}

.agree-desc.pb10 {
    padding-bottom: 10px;
}

.agree-desc.pb16 {
    padding-bottom: 16px;
}

.sheet-divider {
    width: 100%;
    height: 1px;
    background: #EAEAEA;
    display: block;
}

.sheet-divider.padded {
    margin: 10px 0;
    background: #EAEAEA;
}

.agree-radio-group {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 10px 26px 10px
}

/* 113 정산매장 */
.store-section {
    padding: 30px 10px 0 10px;
}

.store-filter {
    width: 100%;
    margin-bottom: 26px;
}

.store-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
}

.store-input input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: var(--color-2D3436);
    height: 38px;
}

/* 114 공지사항 */
.notice114 {
    padding: 0 10px;
}

.notice-controls {
    display: grid;
    gap: 16px;
}

.notice-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0;
}

.notice-search .ic16.search {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 16px;
    height: 16px;
    background: url('../images/ico_search_16.svg') no-repeat center center;
}

.notice-search .ic16.reset {
    position: absolute;
    right: 12px;
    top: 12px;
    width: 20px;
    height: 20px;
    background: url('../images/ico_input_del.svg') no-repeat center center;
}

.notice-search input {
    flex: 1;
    height: 40px;
    padding-left: 40px;
    background: transparent;
    font-size: 15px;
}

.notice-filter {
    display: flex;
    height: 40px;
}

.notice-list-114 {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 16px;
}

.notice-row-114 {
    display: flex;
    align-items: stretch;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-EaEaEa);
}

.notice-row-114:last-child {
    border-bottom: 0;
}

.notice-txt {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.notice-title-114 {
    font-size: var(--fs-17);
    color: var(--color-2D3436);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    white-space: normal;
}

.notice-meta-114 {
    font-size: var(--fs-14);
    color: var(--color-999999);
}

.store-list {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
}

.store-item {
    width: 100%;
}

.store-line {
    position: relative;
    width: 100%;
}

.store-line .dot {
    position: absolute;
    left: 0;
    top: 7px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-3E6AFC);
}

.store-name {
    padding-left: 20px;
    font-size: var(--fs-17);
    color: var(--color-2D3436);
}

.store-detail {
    display: flex;
    flex-direction: column;
    gap: 2px;
    font-size: var(--fs-14);
    padding-left: 20px;
    color: var(--color-777777);
    margin-top: 5px;
}

.store-detail .line {
    padding-left: 10px;
    position: relative;
}

.store-detail .line::before {
    content: "";
    display: inline-block;
    position: absolute;
    left: 0;
    top: 9px;
    width: 3px;
    height: 3px;
    border-radius: 3px;
    background: var(--color-777777);

}

.notice-meta-114 .blue, .notice-title-114 .blue {
    color: var(--color-3E6AFC);
}

/* 115 자주 묻는 질문 */
.faq-section {
    padding: 0 10px;
}
.faq-search {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;
    padding: 0;
}
.faq-search .ic16.search {
    position: absolute;
    left: 12px;
    top: 12px;
    width: 16px;
    height: 16px;
    background: url('../images/ico_search_16.svg') no-repeat center center;
}
.faq-search input {
    flex: 1;
    height: 40px;
    padding-left: 40px;
    background: transparent;
    font-size: 15px;
}
.faq-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    margin-top: 10px;
}
.faq-filter .text {
    font-size: 15px;
    color: var(--color-2D3436);
}
.faq-filter .ic20.arrow-down {
    width: 20px;
    height: 20px;
    background: url('../images/select_arrow.svg') no-repeat center center;
}
.faq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 16px;
}
.faq-row {
    display: flex;
    align-items: stretch;
    padding: 20px 0;
    border-bottom: 1px solid var(--color-EaEaEa);
}
.faq-row:last-child {
    border-bottom: 0;
}
.faq-txt {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.faq-title {
    font-size: var(--fs-17);
    color: var(--color-2D3436);
}
.faq-tag {
    font-size: var(--fs-14);
    color: var(--color-3E6AFC);
}

/* 116 자주 묻는 질문_상세 */
.faq-detail {
    padding: 0 10px;
}

.faq-detail__title {
    font-size: var(--fs-20);
    font-weight: var(--fw-600);
    line-height: 1.4;
    color: var(--color-2D3436);
}

.faq-detail__divider {
    height: 1px;
    background: #EAEAEA;
    margin: 30px 0;
}

.faq-detail__body {
    font-size: var(--fs-17);
    color: var(--color-2D3436);
}

/* 117 1:1 문의 */
.inq117 {
    padding: 0 10px;
}

.inq-merchant {
    display: grid;
    grid-template-columns: 80px 1fr;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
}

.inq-title {
    font-size: var(--fs-16);
    color: var(--color-2D3436);
}

.inq-input {
    position: relative;
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}

.inq-input input {
    flex: 1;
    border: 0;
    background: transparent;
    font-size: 15px;
    color: var(--color-2D3436);
    height: 38px;
}

.inq-filter {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 40px;
    padding: 0 12px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
}

.inq-filter .text {
    font-size: 15px;
    color: var(--color-2D3436);
}

.inq-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding-top: 20px;
}

.inq-item { height: 84px; }
.inq-line {
    position: relative;
    left: 0;
    top: 20px;
}

.inq-line .dot {
    position: absolute;
    left: 0;
    top: 8px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
}

.inq-line .dot.blue { background: #3E6AFC; }
.inq-line .dot.gray { background: #C6C6C6; }
.inq-title-text {
    position: absolute;
    left: 18px;
    top: 0;
    font-size: var(--fs-16);
    color: var(--color-2D3436);
}

.inq-meta {
    position: absolute;
    left: 18px;
    top: 27px;
    font-size: 14px;
    color: var(--color-999999);
}

.inq-meta span {
    display: inline-block;
    padding-left: 5px;
}

.sai {
    color: var(--color-d6d6d6);
}

/* 118 1:1 문의_상세 */
.inq-detail {
    padding: 0 10px;
}

.inq-detail__head {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inq-detail__row {
    display: grid;
    grid-template-columns: 60px 1fr;
    align-items: center;
    gap: 10px;
}

.inq-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 24px;
    padding: 0 16px;
    border-radius: 30px;
    background: #F4F8FF;
    font-size: var(--fs-14);
    color: var(--color-2D3436);
}

.inq-head-text {
    font-size: var(--fs-15);
    color: var(--color-2D3436);
}

.inq-head-text.bold {
    font-weight: var(--fw-700);
}

.inq-detail__divider {
    height: 1px;
    background: #EAEAEA;
    margin: 30px 0;
}

.inq-detail__section {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 30px;
}

.inq-detail__section-title {
    font-size: var(--fs-18);
    font-weight: var(--fw-700);
    color: var(--color-2D3436);
}

.inq-detail__body {
    white-space: pre-line;
    font-size: var(--fs-17);
    line-height: 1.4;
    color: var(--color-2D3436);
}

.inq-detail__box {
    background: #F5F5F5;
    border-radius: 8px;
    padding: 16px;
}

.inq-detail__kv {
    display: grid;
    /* grid-template-columns: 60px 1fr; */
    align-items: start;
    gap: 0;
}

.inq-detail__kv + .inq-detail__kv {
    margin-top: 10px;
}

.inq-detail__kv .k {
    font-weight: var(--fw-700);
}

.inq-detail__kv .k,
.inq-detail__kv .v {
    font-size: var(--fs-16);
    line-height: 1.4;
    color: var(--color-2D3436);
}

/* 119 1:1 문의하기 */
.inq-form {
    padding: 0 10px;
}

.inq-field {
    display: grid;
    grid-template-columns: 90px 1fr;
    align-items: center;
    gap: 10px;
    padding-bottom: 16px;
}

.inq-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.inq-label .red, .inq-text-label .red { color: var(--color-EB5757); }
.inq-control input,
.inq-control select {
    width: 100%;
    text-align: right;
}

.inq-text {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 0 30px 0;
    margin-top: 40px;
}

.inq-text-label {
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-2D3436);
}

.inq-text-body textarea {
    width: 100%;
    min-height: 150px;
    border: 1px solid #D9D9D9;
    border-radius: 8px;
    padding: 12px;
    box-sizing: border-box;
}

/* 82 bottomsheet - 세금 계산서 세부내역 조회 (아코디언 펼침) */
.bottomsheet .tax-detail-accordion {
    padding: 0;
}

.bottomsheet .tax-detail-accordion .summary {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 20px;
}

.bottomsheet .tax-detail-accordion .summary .row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.bottomsheet .tax-detail-accordion .summary .label {
    flex: 1 1 auto;
    color: var(--color-2D3436);
    letter-spacing: -0.5px;
}

.bottomsheet .tax-detail-accordion .summary .value {
    flex: 0 0 auto;
    font-family: Pretendard;
    font-weight: 500;
    font-size: 17px;
    line-height: 1.5;
    color: var(--color-2D3436);
}

.bottomsheet .tax-detail-accordion .list {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.bottomsheet .tax-detail-accordion .list-header {
    display: flex;
    gap: 10px;
    padding: 10px 0 6px 0;
    border-bottom: 1px solid #D9D9D9;
}

.bottomsheet .tax-detail-accordion .list-header .head-date {
    flex: 1 1 auto;
    font-size: 15px;
    color: #666;
}

.bottomsheet .tax-detail-accordion .list-header .head-amount {
    flex: 0 0 auto;
    font-size: 15px;
    color: #666;
    margin-left: auto;
}

.bottomsheet .tax-detail-accordion .item {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0 6px 6px;
}

.bottomsheet .tax-detail-accordion .item .dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-3E6AFC);
}

.bottomsheet .tax-detail-accordion .item .date {
    font-size: 17px;
    color: #666;
}

.bottomsheet .tax-detail-accordion .item .amount {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    height: 30px;
    padding-right: 30px;
}

.bottomsheet .tax-detail-accordion .item .amount .text {
    font-size: 17px;
    font-weight: 500;
    color: var(--color-2D3436);
}

.bottomsheet .tax-detail-accordion .item .amount .arrow {
    width: 25px;
    height: 25px;
    transform: rotate(90deg);
    top: 8px;
}

.bottomsheet .tax-detail-accordion .item .amount .arrow.up {
    transform: rotate(270deg);
}

.bottomsheet .tax-detail-accordion .item-detail {
    display: flex;
    flex-direction: column;
    gap: 6px;
    background: #F4F8FF;
    padding: 10px 0;
}

.bottomsheet .tax-detail-accordion .item-detail .labels,
.bottomsheet .tax-detail-accordion .item-detail .values {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-direction: row;
}

.bottomsheet .tax-detail-accordion .item-detail .labels span {
    display: inline-block;
    flex: 1;
    text-align: center;
    font-size: 15px;
    color: var(--color-2D3436);
}

.bottomsheet .tax-detail-accordion .item-detail .values span {
    flex: 1;
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    color: var(--color-2D3436);
}

/* 24_거래 취소_입금 후 취소 전용 */
.after-deposit-cancel .section-title {
    padding: 26px 0 10px;
    font-weight: var(--fw-600);
}
.after-deposit-cancel .kv-list {
    margin: 0;
}
.after-deposit-cancel .kv-row {
    padding: 0 0 6px !important;
}
.after-deposit-cancel .kv-row .k {
    color: var(--color-2D3436);
    font-size: var(--fs-16);
}
.after-deposit-cancel .kv-row .v {
    font-size: var(--fs-16);
}
.after-deposit-cancel .kv-row .k.red,
.after-deposit-cancel .kv-row .v.red {
    color: var(--color-EB5757);
}
.after-deposit-cancel .amount-info {
    background: var(--color-F4F8FF);
    border-radius: 6px;
    padding: 16px;
}
.after-deposit-cancel .guide-list .desc.dot::before {
    content: '●';
    font-size: 3px;
}
.after-deposit-cancel .guide-list .desc.dot {
    position: relative;
    padding-left: 15px;
    margin-bottom: 8px;
    color: var(--color-2D3436);
}
.after-deposit-cancel .guide-list .desc.dot:last-child {
    margin-bottom: 0;
}
.after-deposit-cancel .guide-list .link-blue {
    color: var(--color-4968BD);
    text-decoration: underline;
}

/* 토스트바 */
.toast-container {
    position: fixed;
    bottom: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 767px;
    padding: 0 26px;
    z-index: 2000;
}
.toast-item {
    background: rgba(45, 52, 54, 1);
    color: var(--color-white);
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-16);
    font-weight: var(--fw-500);
    color: var(--color-white);
    text-align: center;
    border-radius: 8px;
}
.toast-item p {
    padding: 10px 0;
}