:root {
    --kb-accent:#f4d800;
    --kb-accent-hover: #eacf00;
    --kb-pink: #FFA4AE;
    --kb-yellow: #FFE300;
    --kb-yellow-hover: #F5D800;
    --kb-warm-grey: #C4BDAC;
    --kb-cool-grey: #dfe3e8;
    --kb-black: #1E1E1E;
}

.darkmode {
    --kb-accent: #d2b900;
    --kb-accent-hover: #c4ad00;
}

/* */
/* artboard */

.iphone-artboard {
    background-color: var(--systemBG-primary);
}


/* */
/* */

.app-top-bar-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: var(--systemSpacing-8) var(--systemSpacing-32) var(--systemSpacing-20) var(--systemSpacing-32);
}

.app-logo-wrp svg {
    display: block;
    fill: var(--systemPrimary);
}

.notification-setting-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
} 

.notification-svg-wrp svg, .setting-svg-wrp svg {
    display: block;
    fill: var(--systemQuaternary);
}

.notification-svg-wrp, .setting-svg-wrp {
    cursor: pointer;
    border-radius: var(--systemSpacing-12);
}


/* */
/* content card */

.content-card-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-8);
}


/* */
/* */

.ad-banner-ctnr {
    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-20);
    position: relative;
    margin: var(--systemSpacing-0) var(--systemSpacing-32);
    cursor: pointer;
}

.ad-banner-ctnr:active {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.ad-banner-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--systemSpacing-16);
    border-radius: var(--systemSpacing-20);
}

.ad-img-wrp {
    width: var(--systemSpacing-100);
    height: var(--systemSpacing-60);
}

.ad-img-wrp img {
    display: block;
}

.card-tl-subtl-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-2);
}

.card-subtl {
    font-size: var(--ch-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
}

.card-tl {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    white-space: nowrap;
}

.ad-txt {
    font-size: var(--c2-fontSize);
    color: var(--systemTertiary);
    padding: var(--systemSpacing-2) var(--systemSpacing-4);
    font-weight: 800;
    border: var(--systemSpacing-1) solid var(--systemTertiary);
    border-radius: var(--systemSpacing-4);


    position: absolute;
    right: var(--systemSpacing-12);
    bottom: var(--systemSpacing-12);
}


/* */
/* */

.asset-card-ctnr {
    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-20);
    position: relative;
    margin: var(--systemSpacing-0) var(--systemSpacing-32);
}

.asset-card-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-8);
    padding: var(--systemSpacing-8);
}

.total-asset-ctnr {
    border-radius: var(--systemSpacing-16);
}

.total-asset-ctnr:active {
    background-color: var(--systemBG-primary);
}

.total-asset-ctnr:active .total-asset-wrp {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.total-asset-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: var(--systemSpacing-8);
}

/* .total-asset-wrp:hover {
    background-color: var(--systemBG-primary);
} */

.total-asset-tl {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}

.chevron-wrp svg {
    display: block;
    fill: var(--systemTertiary);
}


/**/
/**/

.assets-ctnr {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-12);
}

.asset-ctnr {
    cursor: pointer;
    border-radius: var(--systemSpacing-16);
}

.asset-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    border-radius: var(--systemSpacing-16);
    padding: var(--systemSpacing-8) var(--systemSpacing-4);
}

.asset-ctnr:active .asset-wrp {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.asset-ctnr:active {
    background-color: var(--systemBG-primary);
}

.asset-logo-dsc-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-12);
}

.kb-logo-wrp {
    width: fit-content;
    border-radius: var(--systemSpacing-12);
}

.first-asset-wrp .kb-logo-wrp {
    background-color: var(--kb-pink);
}

.second-asset-wrp .kb-logo-wrp {
    background-color: var(--kb-warm-grey);
}

.third-asset-wrp .kb-logo-wrp {
    background-color: var(--kb-yellow);
}

.fourth-asset-wrp .kb-logo-wrp {
    background-color: var(--kb-cool-grey);
}

.kb-logo-wrp svg {
    display: block;
    fill: var(--kb-black);
}

.asset-dsc-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-2);
}

.asset-dsc {
    font-size: var(--ch-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
}

.asset-amount {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    white-space: nowrap;
}

.transfer-setting-btn-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-4);
}

.transfer-btn, .setting-btn {
    font-size: var(--ch-fontSize);
    color: var(--systemPrimary);
    padding: var(--systemSpacing-4) var(--systemSpacing-8);
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-8);
    cursor: pointer;
}


/* */
/* more asset */

.more-asset-ctnr:active {
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-16);
}

.more-asset-ctnr:active .more-asset-all-wrp {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.more-asset-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: var(--systemSpacing-8);
}

.more-asset-txt {
    font-size: var(--ch-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
}


/* */
/* ad second banner */

.ad-second-banner-ctnr {
    cursor: pointer;
    margin: var(--systemSpacing-0) var(--systemSpacing-32);
}

.ad-second-banner-all-wrp {
    border-radius: var(--systemSpacing-16);
    padding: var(--systemSpacing-8);
    background-color: var(--systemWhite);
}

.ad-second-banner-active-bg {
    border-radius: var(--systemSpacing-16);
}

.ad-second-banner-ctnr:active .ad-second-banner-active-bg {
    background-color: var(--systemBG-primary);
}

.ad-second-banner-ctnr:active .ad-second-banner-wrp {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.ad-second-banner-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--systemSpacing-8) var(--systemSpacing-4);
    border-radius: var(--systemSpacing-16);
}

.ad-second-banner-ctnr .kb-logo-wrp {
    background-color: var(--kb-yellow);
}

.ad-second-banner-ctnr .kb-logo-wrp svg {
    display:  block;
    fill: var(--kb-black);
}


/* */
/* bottom navigation */

.bot-nav-ctnr {
    position: absolute;
    width: 100%;
    bottom: 0;
    background-color: var(--systemWhite);
    z-index: 5;
    box-shadow: var(--systemSpacing-0) var(--negative-systemSpacing-4) var(--systemSpacing-12) var(--systemSpacing-0) var(--systemDim-10);
}

.bot-nav-all-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--systemSpacing-8) var(--systemSpacing-0) var(--systemSpacing-32) var(--systemSpacing-0);
    width: var(--systemSpacing-320);
    margin: var(--systemSpacing-0) auto;
}

.bot-nav-icon-txt-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-2);
    align-items: center;
    padding: var(--systemSpacing-4) var(--systemSpacing-8);
}

.bot-nav-wrp {
    border-radius: var(--systemSpacing-12);
    cursor: pointer;
}

.bot-nav-wrp:hover {
    background-color: var(--systemBG-primary);
}

.bot-nav-wrp:active .bot-nav-icon-txt-wrp {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.bot-nav-txt-home {
    font-size: var(--c1-fontSize);
    color: var(--systemPrimary);
    font-weight: 400;
}

.bot-nav-txt-product, .bot-nav-txt-hey, .bot-nav-txt-benefit, .bot-nav-txt-more {
    font-size: var(--c1-fontSize);
    color: var(--systemQuaternary);
    font-weight: 400;
} 

.home-svg {
    display: block;
    fill: var(--systemPrimary);
}

.benefit-svg, .product-svg, .ellipsis-svg {
    display: block;
    fill: var(--systemQuaternary);
}

.ai-svg {
    display: block;;
}


/* */
/* */

.make-asset-ctnr {
    margin: var(--systemSpacing-0) var(--systemSpacing-32);
    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-16);
    cursor: pointer;
}

.make-asset-ctnr:active {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.make-asset-all-wrp {
    width: 100%;
    height: var(--systemSpacing-60);
    display: flex;
    justify-content: center;
}

.make-asset-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--systemSpacing-4);
}

.make-asset-txt {
    font-size: var(--p-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
}

.make-asset-icon-wrp svg {
    display: block;
    fill: var(--systemSecondary);
}


/* */
/* */

.hey-kakao-dim {
    position: absolute;
    inset: 0;
    background-color: var(--systemDim-75);
    z-index: 6;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease-out;

    backdrop-filter: blur(var(--systemSpacing-4));
    background-blend-mode: color-dodge, normal;
    
}

.hey-kakao-dim.active {
    opacity: 1;
    pointer-events: auto;
}

.hey-kakao-ctnr {
    position: absolute;
    bottom: var(--systemSpacing-0);
    z-index: 8;
    width: 100%;
    display: none;
}

.hey-kakao-ctnr.active {
    display: block;
}

.hey-kakao-all-wrp {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
}

.ex-all-wrp {
    display: flex;
    flex-direction: row;
    gap: var(--systemSpacing-8);
    margin-bottom: var(--systemSpacing-12);
    padding: var(--systemSpacing-0) var(--systemSpacing-32);
    width: 100%;

    overflow: scroll;
    -ms-overflow-style: none;
    scrollbar-width: none;
}

.ex-wrp {
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-16);
    
    cursor: pointer;
}

.ex-wrp:hover {
    background-color: var(--systemBG-primary-hover);
}

.ex-wrp:active {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.ex-txt-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-2);
    padding: var(--systemSpacing-12) var(--systemSpacing-16);
}

.ex-tl {
    font-size: var(--ch-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    white-space: nowrap;
}

.ex-dsc {
    font-size: var(--c1-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
    white-space: nowrap;
}

.hey-kakao-header-prompt-all-wrp {
    background-color: var(--systemWhite);
    border-radius: var(--systemSpacing-40) var(--systemSpacing-40) var(--systemSpacing-0) var(--systemSpacing-0);
    box-shadow: var(--systemSpacing-0) var(--negative-systemSpacing-4) var(--systemSpacing-12) var(--systemSpacing-0) var(--systemDim-10);
}

.hey-kakao-header-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--systemSpacing-24) var(--systemSpacing-32) var(--systemSpacing-4) var(--systemSpacing-32);
}

.hey-kakao-prompt-logo-wrp svg {
    display: block;
    fill: var(--systemPrimary);
}

.cancel-btn {
    padding: var(--systemSpacing-2) var(--systemSpacing-4);
    color: var(--systemTertiary);
}

.cancel-btn:hover {
    opacity: 80%;
}

.prompt-all-wrp {
    display: flex;
    flex-direction: column;
    padding: var(--systemSpacing-4) var(--systemSpacing-32) var(--systemSpacing-0) var(--systemSpacing-32);
}

.prompt-input-wrp {
    width: 100%;
}


.prompt-input {
    font-size: var(--p-fontSize);
    color: var(--systemPrimary);
    padding: var(--systemSpacing-16) var(--systemSpacing-0);
    border: none;
    outline: none;
    width: 100%;
    word-break: break-all;
    background-color: var(--systemWhite);

    font-family: pretendard;
    resize: none;
    -ms-overflow-style: none;
    scrollbar-width: none;

    line-height: 135%;
}

.prompt-input::placeholder {
    color: var(--systemQuaternary);
    font-size: var(--p-fontSize);
}

.prompt-btn-all-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: var(--systemSpacing-16) var(--systemSpacing-0);
}

#plusBtn {
    padding: var(--systemSpacing-0);
    border-radius: var(--systemSpacing-9999);
    position: relative;
}

#plusBtn:hover {
    background-color: var(--systemBG-primary);
}

#plusBtn svg {
    display: block;
    fill: var(--systemPrimary);
}

#plusBtn.active {
    background-color: var(--systemBlack);
}

#plusBtn svg {
    transition: transform 0.3s ease;
}

#plusBtn.active svg {
    transform: rotate(45deg);
    fill: var(--systemWhite);
}

#cameraGalleryCtnr {
    position: absolute;

    display: flex;
    flex-direction: column;
    width: var(--systemSpacing-200);
    top: var(--systemSpacing-140);
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-12);
    padding: var(--systemSpacing-2);
    gap: var(--systemSpacing-2);
    box-shadow: var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-12) var(--systemSpacing-0) var(--systemDim-20);

    display: none;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}


#cameraGalleryCtnr.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
}

.camera-gallery-wrp {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    padding: var(--systemSpacing-8);
    border-radius: var(--systemSpacing-12);
    cursor: pointer;
}

.camera-gallery-wrp:hover {
    background-color: var(--systemBG-primary-hover);
}

.camera-gallery-icon-wrp svg {
    display: block;
    fill: var(--systemPrimary);
}

.prompt-btn-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
}

.voice-btn {
    padding: var(--systemSpacing-0);
    border-radius: var(--systemSpacing-9999);
}

.voice-btn {
    background-color: var(--systemPrimary);
}

.voice-btn svg, .return-btn svg {
    display: block;
}

.voice-btn svg {
    fill: var(--systemWhite);
}

.pause-btn {
    background-color: var(--systemPrimary);
    padding: var(--systemSpacing-0);
    border-radius: var(--systemSpacing-9999);
    display: none;
}

.pause-btn svg {
    display: block;
    fill: var(--systemWhite);
}

.return-btn {
    padding: var(--systemSpacing-0);
    border-radius: var(--systemSpacing-9999);
    cursor: auto;
}

.return-btn svg {
    fill: var(--systemQuaternary);
    transition: color 0.2s ease;
}

.return-btn.active svg {
    fill: var(--systemPrimary);
}

.return-btn.active:hover {
    background-color: var(--systemBG-primary);
    cursor: pointer
}

.keyboard-img-wrp img {
    display: block;
    max-width: 100%;
}


/* */
/* */


/* */
/* loading */

.loading-screen-img-txt-wrp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--systemSpacing-32);
    
    margin: var(--systemSpacing-60) var(--systemSpacing-48) var(--systemSpacing-0) var(--systemSpacing-48);
}

.loading-screen-img-wrp {
    margin-top: var(--systemSpacing-40);
}

.loading-screen-img-wrp img {
    display: block;
    max-width: 60%;
    margin: var(--systemSpacing-0) auto;
}

.loading-txt {
    font-size: var(--h6-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    line-height: 135%;
}


/**/
/**/

.next-btn-wrp {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: var(--systemSpacing-0);
    left: 50%;
    transform: translate(-50%, -30%);
    width: calc(100% - var(--systemSpacing-64));
    gap: var(--systemSpacing-8);
}

.next-btn {
    font-size: var(--p-fontSize);
    color: var(--menuCtnr-bg);
    font-weight: 400;
    width: 100%;
    height: var(--systemSpacing-48);
    background-color: var(--kb-accent);
    border-radius: var(--systemSpacing-12);
    padding: var(--systemSpacing-0);
}

.next-btn:hover {
    background-color: var(--kb-accent-hover);
}

.re-return-btn {
    font-size: var(--p-fontSize);
    font-weight: 400;
    width: 100%;
    border-radius: var(--systemSpacing-12);
    padding: var(--systemSpacing-0);
    color: var(--systemSecondary);
    background-color: transparent;
    height: var(--systemSpacing-48);
}

.re-return-btn:hover {
    background-color: var(--systemBG-secondary-hover);
}

/*
box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.04), 0px 3px 8px 0px rgba(0, 0, 0, 0.15), 0px 3px 1px 0px rgba(0, 0, 0, 0.06);
*/
/**/
/* */
/* transfer screen */

.transfer-all-wrp {
    display: flex;
    flex-direction: column;
    margin: var(--systemSpacing-0) var(--systemSpacing-32);
}

.transfer-header {
    display: flex;
    flex-direction: row;

    margin: var(--systemSpacing-20) var(--systemSpacing-0) var(--systemSpacing-32) auto;;
}

.transfer-cancel-btn, .confirm-cancel-btn, .final-check-cancel-btn {
    color: var(--systemTertiary);
    font-size: var(--p-fontSize);
    font-weight: 400;
    padding: var(--systemSpacing-4);
}

.transfer-sec-tl {
    font-size: var(--h6-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    line-height: 135%;
    margin-bottom: var(--systemSpacing-40);
}

.transfer-user-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-8);
}

.transfer-user-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    background-color: var(--systemWhite);
    padding: var(--systemSpacing-8) var(--systemSpacing-16);
    border-radius: var(--systemSpacing-16);
    cursor: pointer;
}

.transfer-user-wrp:has(input[type="radio"]:checked) {
    outline: var(--systemSpacing-1) solid var(--kb-accent);
}

.transfer-user-img-name-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-12);
}

.user-img-wrp {
    width: var(--systemSpacing-40);
    height: var(--systemSpacing-40);
}

.user-img-wrp img {
    display: block;
    max-width: 100%;
    border-radius: var(--systemSpacing-12);
}

.user-name {
    font-size: var(--ph-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}

.user-account {
    font-size: var(--ch-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
}

/**/
/**/

/* .transfer-info-edit-btn {
    font-size: var(--ch-fontSize);
    color: var(--systemPrimary);
    font-weight: 400;
    padding: var(--systemSpacing-4) var(--systemSpacing-8);
    background-color: var(--systemBG-primary);
    border-radius: var(--systemSpacing-8);
} */

.radio-btn-ctnr {
    display: inline-block;
    position: relative;
    padding-left: var(--systemSpacing-20);
    cursor: pointer;
    font-size: var(--p-fontSize);
    user-select: none;
}

.radio-btn-ctnr input[type="radio"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
}

.radio-checkmark {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    width: var(--systemSpacing-20);
    height: var(--systemSpacing-20);
    background-color: var(--systemWhite);
    border-radius: 50%;
    border: var(--systemSpacing-1) solid var(--systemQuinary);
    transition: all 0.2s ease-in-out;
}

.radio-btn-ctnr input:checked ~ .radio-checkmark {
    background-color: var(--kb-accent);
    border-color: var(--kb-accent);
}

.radio-checkmark::after {
    content: "";
    position: absolute;
    display: none;
}

.radio-btn-ctnr input:checked ~ .radio-checkmark::after {
    display: block;
}

.radio-btn-ctnr .radio-checkmark::after {
    top: 50%;
    left: 50%;
    width: var(--systemSpacing-8);
    height: var(--systemSpacing-8);
    border-radius: 50%;
    background-color: var(--systemWhite);
    transform: translate(-50%, -50%);
}


/* */
/* confirm screen */

.confirm-screen-all-wrp {
    display: flex;
    flex-direction: column;
    margin: var(--systemSpacing-0) var(--systemSpacing-32);
}

.confirm-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: var(--systemSpacing-20) var(--systemSpacing-0) var(--systemSpacing-32) var(--systemSpacing-0)
}

.left-chevron-wrp {
    padding: var(--systemSpacing-0);
}

.left-chevron-wrp svg {
    display: block;
    fill: var(--systemSecondary);
}


/* */
/* */

.from-to-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-20);
    margin-bottom: var(--systemSpacing-40);
}

.from-all-wrp, .to-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-4);
}

.from-tl, .to-tl {
    font-size: var(--p-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
    margin-bottom: var(--systemSpacing-4);
}

.from-content-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
    position: relative;
    z-index: 9;
    
}

.from-kb-name-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
    padding: var(--systemSpacing-4) var(--systemSpacing-8);
    background-color: var(--systemBG-secondary);
    border-radius: var(--systemSpacing-12);
    width: fit-content;
    cursor: pointer;
}

.from-kb-name-wrp:hover {
    background-color: var(--systemBG-secondary-hover);
}

#fromAccountBtn.active {
    background-color: var(--systemBG-secondary-hover);
}

#displayedAccountKBLogo {
    background-color: var(--kb-yellow);
    border-radius: var(--systemSpacing-12);
}

#displayedAccountKBLogo svg {
    display: block;
    fill: var(--kb-black);
}

.account-chevron-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-4);
}

.account-name, .to-user-name {
    font-size: var(--hl-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}

.chevron-down-wrp svg {
    display: block;
    fill: var(--systemSecondary);
}

#chevronDropdown {
    transform: scaleY(1);
    transition: transform 0.3s ease;
}

#chevronDropdown.flipped {
    transform: scaleY(-1);
}

.postposition-txt {
    font-size: var(--hl-fontSize);
    color: var(--systemSecondary);
    font-weight: 600;
}

.balance-amount, .user-real-name {
    font-size: var(--c1-fontSize);
    color: var(--systemSecondary);
    font-weight: 600;
    padding: var(--systemSpacing-4) var(--systemSpacing-8);
    background-color: var(--systemBG-secondary);
    border-radius: var(--systemSpacing-8);
    width: fit-content;
}


/* */
/* */

#otherAccountCtnr {
    background-color: var(--systemBG-secondary);
    border-radius: var(--systemSpacing-12);

    position: absolute;
    top: var(--systemSpacing-44);
    max-height: var(--systemSpacing-0);
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.3s ease, opacity 0.3s ease;
    border-radius: var(--systemSpacing-12);
    box-shadow: var(--systemSpacing-0) var(--systemSpacing-0) var(--systemSpacing-28) var(--systemSpacing-0) var(--systemDim-10);
}

.other-account-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-4);
    
    border-radius: var(--systemSpacing-12);
    padding: var(--systemSpacing-4);
}

#otherAccountCtnr.active {
    max-height: var(--systemSpacing-240);
    opacity: 1;
}

.other-account-wrp {
    padding: var(--systemSpacing-4) var(--systemSpacing-8);
    border-radius: var(--systemSpacing-12);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: var(--systemSpacing-60);

    background-color: transparent;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.other-account-wrp:hover {
    background-color: var(--systemBG-secondary-hover);
}

.other-account-wrp:active .other-account-kb-name-wrp {
    transform: scale(0.95);
    transition: transform 0.3s ease-in-out;
}

.other-account-wrp.selected {
    background-color: var(--systemBG-secondary-hover);
}

#firstAccount.selected {
    background-color: var(--systemBG-secondary-hover);
}

.other-account-kb-name-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
}

#firstAccountKBLogo {
    background-color: var(--kb-yellow);
    border-radius: var(--systemSpacing-12);
}

#secondAccountKBLogo {
    background-color: var(--kb-warm-grey);
    border-radius: var(--systemSpacing-12);
}

#thirdAccountKBLogo {
    background-color: var(--kb-pink);
    border-radius: var(--systemSpacing-12);
}

#fourthAccountKBLogo {
    background-color: var(--kb-cool-grey);
    border-radius: var(--systemSpacing-12);
}

.other-account-kb-icon-wrp svg {
    width: fit-content;
    fill: var(--kb-black);
    display: block;
}

.other-account-name-balance-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-2);
}

.other-account-name {
    font-size: var(--ph-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
}

.other-account-balance {
    font-size: var(--c1-fontSize);
    color: var(--systemSecondary);
    font-weight: 600;
}

/* #firstAccountCheckmark, #secondAccountCheckmark, #thirdAccountCheckmark, #fourthAccountCheckmark {
    display: block;
    fill: var(--systemQuinary);
} */

.checkmark-svg-wrp svg {
    display: block;
    fill: var(--systemQuinary);
}

.checkmark-svg-wrp svg.active {
    fill: var(--systemPrimary)
}

/* */
/* */

.to-content-all-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
}

.to-img-name-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-8);
    padding: var(--systemSpacing-4) var(--systemSpacing-8);
    background-color: var(--systemBG-secondary);
    border-radius: var(--systemSpacing-12);
    width: fit-content;
}

.to-img-wrp {
    width: var(--systemSpacing-32);
    height: var(--systemSpacing-32);
}

.to-img-wrp img {
    display: block;
    max-width: 100%;
    border-radius: var(--systemSpacing-12);
}

.amount-input-postposition-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.amount-input {
    font-size: var(--h3-fontSize);
    color: var(--systemSecondary);
    font-weight: 500;
    padding: var(--systemSpacing-0);
    min-width: var(--systemSpacing-120);
    width: auto;

    box-sizing: content-box;
    background-color: transparent;
    border: none;
    outline: none;
}

#amountInputMirror {
    font-size: var(--h3-fontSize);
    padding: var(--systemSpacing-0);
    min-width: var(--systemSpacing-120);

    position: absolute;
    visibility: hidden;
    white-space: pre;
    font-family: inherit;
    box-sizing: content-box;
}

.amount-input:focus {
    border-bottom: var(--systemSpacing-1) solid var(--kb-accent);
}

.amount-postposition-txt {
    font-size: var(--h3-fontSize);
    color: var(--systemSecondary);
    font-weight: 500;
}

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

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

.confirm-next-btn-wrp {
    position: absolute;
    bottom: var(--systemSpacing-0);
    left: 50%;
    transform: translate(-50%, -60%);
    width: calc(100% - var(--systemSpacing-64));
}

#confirmNextBtn {
    font-size: var(--p-fontSize);
    color: var(--menuCtnr-bg);
    font-weight: 400;
    width: 100%;
    height: var(--systemSpacing-48);
    background-color: var(--kb-accent);
    border-radius: var(--systemSpacing-12);
    padding: var(--systemSpacing-0);
}

#confirmNextBtn:hover {
    background-color: var(--kb-accent-hover);
}


/* */
/* */

.final-check-screen-all-wrp {
    display: flex;
    flex-direction: column;
    margin: var(--systemSpacing-0) var(--systemSpacing-32);
}

.final-check-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: var(--systemSpacing-20) var(--systemSpacing-0) var(--systemSpacing-32) var(--systemSpacing-0);
}

.info-display-highlight-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-4);
    justify-content: center;
    padding: var(--systemSpacing-36) var(--systemSpacing-0) var(--systemSpacing-60) var(--systemSpacing-0);
}

.info-display-highlight-txt {
    font-size: var(--h4-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    text-align: center;
}


/* */
/* */

.final-check-info-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-20);
    margin-top: var(--systemSpacing-40);
}

.from-to-account-info-all-wrp, .from-to-transfer-note-all-wrp {
    display: flex;
    flex-direction: column;
    gap: var(--systemSpacing-4);
}

.account-info-wrp, .transfer-note-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--systemSpacing-12) var(--systemSpacing-16);
    border-radius: var(--systemSpacing-12);
}

.account-info-wrp {
    background-color: var(--systemBG-secondary);
}

.transfer-note-ctnr {
    background-color: var(--systemWhite);
    cursor: pointer;
    border-radius: var(--systemSpacing-12);
}

.transfer-note-ctnr:active .transfer-note-wrp {
    transform: scale(0.98);
    transition: transform 0.3s ease-in-out;
}

.transfer-note-ctnr:hover {
    background-color: var(--systemBG-primary-hover);
}

.account-tl, .transfer-note-tl, .transfer-reservation-tl {
    font-size: var(--p-fontSize);
    color: var(--systemSecondary);
    font-weight: 400;
}

.bank-name, .transfer-note {
    font-size: var(--p-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
    margin-right: var(--systemSpacing-2);
}

.bank-account {
    font-size: var(--p-fontSize);
    color: var(--systemTertiary);
    font-weight: 400;
}

.transfer-note-detail-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: var(--systemSpacing-2);
}

.chevron-right-svg-wrp svg {
    display: block;
    fill: var(--systemTertiary);
}


/* */
/* */

.final-transfer-btn-wrp {
    display: flex;
    flex-direction: column;
    position: absolute;
    bottom: var(--systemSpacing-0);
    left: 50%;
    transform: translate(-50%, -30%);
    width: calc(100% - var(--systemSpacing-64));
    gap: var(--systemSpacing-8);
}

#finalTransferBtn {
    font-size: var(--p-fontSize);
    font-weight: 400;
    width: 100%;
    border-radius: var(--systemSpacing-12);
    padding: var(--systemSpacing-0);
    background-color: var(--kb-accent);
    color: var(--menuCtnr-bg);
    height: var(--systemSpacing-48);
}

#finalTransferBtn:hover {
    background-color: var(--kb-accent-hover);
}

.another-transfer-btn {
    font-size: var(--p-fontSize);
    font-weight: 400;
    width: 100%;
    border-radius: var(--systemSpacing-12);
    padding: var(--systemSpacing-0);
    color: var(--systemSecondary);
    background-color: transparent;
    height: var(--systemSpacing-48);
}

.another-transfer-btn:hover {
    background-color: var(--systemBG-secondary-hover);
}

.transfer-reservation-wrp {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: var(--systemSpacing-0) var(--systemSpacing-16);
    border-radius: var(--systemSpacing-12);
    background-color: var(--systemWhite);
    height: var(--systemSpacing-44);
}


/**/
/**/

.transfer-reservation-switch[type=checkbox]{
	height: 0;
	width: 0;
	visibility: hidden;
}

.transfer-reservation-label {
	cursor: pointer;
	text-indent: -9999px;
	width: var(--systemSpacing-48);
	height: var(--systemSpacing-32);
	background-color: var(--systemQuinary);
	display: block;
	border-radius: var(--systemSpacing-9999);
	position: relative;
}

.transfer-reservation-label:after {
	content: '';
	position: absolute;
	top: 50%;
	left: var(--systemSpacing-4);
    transform: translate(-0%, -50%);
	width: var(--systemSpacing-24);
	height: var(--systemSpacing-24);
	background-color: var(--systemWhite);
	border-radius: var(--systemSpacing-9999);
	transition: 0.3s;
}

.transfer-reservation-switch:checked + .transfer-reservation-label {
	background-color: var(--kb-accent);
}

.transfer-reservation-switch:checked + .transfer-reservation-label:after {
	transform: translate(65%, -50%);
}

.transfer-reservation-label:active:after {
	width: var(--systemSpacing-20);
}


/* */
/* */

/* .main-screen {
    display: none;
} */

/* */
/* 위에 삭제 */


.loading-screen, .transfer-screen, .confirm-screen, .final-check-screen, .final-loading-screen{
    display: none;
}

.final-loading-screen-img-txt-wrp {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: var(--systemSpacing-32);
    
    margin: var(--systemSpacing-60) var(--systemSpacing-48) var(--systemSpacing-0) var(--systemSpacing-48);
}

.final-loading-screen-img-wrp {
    margin-top: var(--systemSpacing-20);
}

.final-loading-screen-img-wrp img {
    display: block;
    max-width: 60%;
    margin: var(--systemSpacing-0) auto;
}

.loading-txt {
    font-size: var(--h6-fontSize);
    color: var(--systemPrimary);
    font-weight: 600;
    line-height: 135%;
}

.final-confirm-btn-wrp {
    position: absolute;
    bottom: var(--systemSpacing-0);
    left: 50%;
    transform: translate(-50%, -60%);
    width: calc(100% - var(--systemSpacing-64));
}

.final-confirm-btn {
    font-size: var(--p-fontSize);
    color: var(--menuCtnr-bg);
    font-weight: 400;
    width: 100%;
    height: var(--systemSpacing-48);
    background-color: var(--kb-accent);
    border-radius: var(--systemSpacing-12);
    padding: var(--systemSpacing-0);
    display: none;
}

.final-confirm-btn:hover {
    background-color: var(--kb-accent-hover);
}