/* style.css 최상단 */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;700&display=swap');
html, body {
    margin:0px; padding:0px;
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

[v-cloak] { display: none; }
/* [v-cloak] { visibility: hidden; } */

:root {
    --max-width: 480px;
    --loading-size: 36px;
    --thickness: 4px;
    --color: #0f1f34;
    --speed: .8s;
}

.main-container { --primary:#162B48; --muted:#667085; --text:#1A1A1A; --subtext:#505050; --hint:#A5ABB7; --border:#DEE1E7; --divider:#CCCFD4; --surface:#FFFFFF; --surface-2:#F7F8F9; --btn-gray:#EAECF0; color:var(--text); background:var(--surface); }
.main-container * { box-sizing: border-box; }

/* 로그인 레이아웃 모바일 크기 적용 */
.login_warp { width:100%; max-width:var(--max-width); margin:0 auto; padding:24px 16px; }

/* 각레이아웃에 모바일 크기 적용 */
.sub_header { width:100%; max-width:var(--max-width); margin:0 auto; padding:24px 16px; }
.main_header { width:100%; max-width:var(--max-width); margin:0 auto; padding:24px 16px; }

.container_wrap { width:100%; max-width:var(--max-width); margin:0 auto; padding:24px 16px; margin-bottom:80px; }

.tab-container { width:100%; max-width:var(--max-width); margin:0 auto; }


@media (max-width:420px){
    .main-container .auth__cta .btn {
        width:100%;
    }
}

.title_main { font-size:20px; }
.title_sub { font-size:14px; }

h3 { font-size:18px; }
p { font-size:14px; }

/* ===== Common Header Bar ===== */
.header-bar {
    display: flex;
    align-items: center;
    justify-content: center;       /* 타이틀 중앙 정렬 */
    height: 56px;
    padding: 0 16px;
    background: #fff;
    border-bottom: 1px solid #EAECF0; /* 필요 없으면 제거 */
    position: relative;            /* 좌측 아이콘의 기준점 */
}

/* 공통 서브 헤더 */
.sub_header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 56px;
    background: #fff;
    border-bottom: 0px solid #EAECF0;
    font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
}
.sub_header__title {
    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
    color: #1A1A1A;
    margin: 0;
    text-align: center;
    white-space: nowrap;
}

.sub_header__back {
    position: absolute;
    left: 16px;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    color: #1A1A1A;
}

.sub_header__back i {
    font-size: 28px;
    line-height: 1;
}

.sub_header--shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.06); border-bottom: 0; }
.sub_header--transparent { background: transparent; border-bottom: 0; }

.main_header {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    height: 56px;
    background: #fff;
    margin-top:10px;
}

.main_header img { width:110px; height:21px; vertical-align: middle; text-align: center; }

.top_section{align-self:stretch;display:inline-flex;flex-direction:column;justify-content:flex-start;align-items:flex-start;gap:2px}
.top_title01{align-self:stretch;color:#162B48;font-size:20px;font-weight:700;line-height:28px;word-wrap:break-word}
.top_title02{align-self:stretch;color:#667085;font-size:14px;margin-top:2px;font-weight:500;line-height:19.6px;word-wrap:break-word}


.input-wrapper {
    position: relative;
}

.toggle-password {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: #888;
}

.toggle-password:hover {
    color: #333;
}

/* Eye Icon */
.eye-icon {
    width: 20px;
    height: 20px;
}

/* 기본 버튼 (진한 네이비 계열) */
.btn01 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: #162B48;
    border-radius: 8px;
    outline: 1px solid #162B48;
    outline-offset: -1px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s ease, opacity 0.2s ease;
    text-align: center;
}

/* 버튼 텍스트 */
.btn01__text {
    flex: 1 1 0;
    text-align: center;
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 25.2px;
    word-wrap: break-word;
}

/* 인터랙션 상태 */
.btn01:hover {
    opacity: 0.9;
}
.btn01:active {
    opacity: 0.8;
}
.btn01:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Submit Button */
.stz-bottom-btn-wrap {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%); /* 가운데 정렬 */
    width: 100%;
    max-width: var(--max-width); /* 부모와 동일한 최대폭 */
    background: #fff;
    padding: 20px;
    display: flex;
    justify-content: center;
    z-index: 100;
}

.submit-button {
    width: 100%;
    padding: 12px;
    background:var(--btn-gray);
    color:#A5ABB7;
    border-color:var(--btn-gray);
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: not-allowed;
    transition: background-color 0.2s;
    margin-top: 0px;
}
.submit-button.active {
    background-color: #0f1f34;
    color:#fff;
    cursor: pointer;
}

.submit-button.active_ok {
    background-color: #7c27d3;
    color:#fff;
    cursor: pointer;
}

.submit-button.active:hover {
    background-color: #0f1f34;
}
.submit-button[disabled] { opacity:1.0; cursor:not-allowed; }

.bottom49 { padding:12px !important; }

/* Modal Styles */
.modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 2000;
    animation: fadeIn 0.3s;
}

.modal.show {
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-content {
    background-color: #ffffff;
    width: 90%;
    max-width: 400px;
    max-height: 80vh;
    border-radius: 16px;
    overflow: hidden;
    animation: slideUp 0.3s;
}

.modal-header {
    padding: 10px;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.modal-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.modal-close {
    background: none;
    border: none;
    font-size: 24px;
    color: #666;
    cursor: pointer;
    padding: 0;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(75vh - 140px);
}

.modal-footer {
    padding: 7px 7px;
    border-top: 1px solid #e0e0e0;
}

.modal-button {
    width: 100%;
    padding: 16px;
    background:#0f1f34;
    color:#fff;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
}

.modal-button:hover {
    background-color: #555;
}

.error-msg { display:block; color:#ef4444; font-size:12px; margin-top:6px; }
.form-input.is-invalid { border-color:#ef4444 !important; box-shadow:0 0 0 2px rgba(239,68,68,.12); }
.is-invalid { border-color: #e53e3e; }
.loading-bar { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; margin-bottom: 5px; }
.spinner{
    width: var(--loading-size);
    height: var(--loading-size);
    border-radius: 50%;
    border: var(--thickness) solid rgba(0,0,0,.1);
    border-top-color: var(--color);
    animation: spin var(--speed) linear infinite;
}
@keyframes spin{ to{ transform: rotate(360deg); } }

/* 접근성: 모션 최소화 설정 시 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce){
    .spinner{ animation: none; }
}





/* ===== 커스텀 레이어 팝업 ===== */
.customer_alert { position: fixed; inset: 0; z-index: 1000; display: none; }
.customer_alert.is_open { display: block; }
.customer__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.4); backdrop-filter: saturate(120%) blur(1px); }
.customer__dialog { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 80%; max-width: calc(100vw - 32px); background: #fff; border-radius: 8px; box-shadow: 0 4px 10px rgba(0,0,0,0.06); overflow: hidden; }
.customer__body { padding: 26px 20px 20px 20px; display: grid; gap: 10px; background: #fff; }
.customer__icon { width: 32px; height: 32px; justify-self: center; }
.icon-customer-info { position: relative; border-radius: 50%; background: #264B7E; }
.icon-customer-info.red { position: relative; border-radius: 50%; background: #ff0005; }
.icon-customer-info.info { position: relative; border-radius: 50%; background: #264B7E; }
.icon-customer-info::before, .icon-customer-info::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); background: #fff; border-radius: 1px; }
.icon-customer-info::before { top: 9.33px; width: 2.67px; height: 10.67px; }
.icon-customer-info::after { top: 21.33px; width: 2.67px; height: 2.67px; }
.customer__text { display: grid; gap: 2px; }
.customer__title { margin: 0; text-align: center; color: #1A1A1A; font-size: 16px; font-weight: 600; line-height: 22.4px; }
.customer__desc { margin: 0; text-align: center; color: #667085; font-size: 14px; font-weight: 400; line-height: 19.6px; }
.customer__actions { border-top: 1px solid #DEE1E7; background: #fff; height: 47px; display: grid; place-items: center; }
.customer__btn { appearance: none; border: 0; background: transparent; cursor: pointer; color: #162B48; font-size: 16px; font-weight: 600; line-height: 22.4px; padding: 0 12px; }
.customer__btn:focus-visible { outline: 2px solid rgba(22,43,72,.3); border-radius: 6px; }

#loading-popup { z-index : 1001 !important; }

.info_icon { position: relative; width: 100%; display: flex; justify-content: center; align-items: center; }


/* ✅ PC 화면(1024px 이상)일 때 고정 폭 */
@media (min-width: 1024px) {
    .customer__dialog {
        width: 380px;
        max-width: none; /* 필요 시 제한 해제 */
    }
}

.btn-verify[disabled] { opacity:1.0; cursor:not-allowed; }


/* 폼 컨테이너 */
.form-container {
    display: flex; /* inline-flex → flex */
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 16px;
    margin-top: 30px;
    width: 100%; /* 100% 폭 보장 */
}

/* 폼 그룹 */
.form-group {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    width: 100%;
}

.form-field-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
}

/* 레이블 */
.form-label {
    color: #505050;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
}

.required {
    color: #EE3030;
    font-size: 14px;
    font-weight: 500;
    line-height: 19.6px;
}

/* 입력 필드 컨테이너 */
.input-container {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 10px;
    align-self: stretch;
}

.input-row {
    display: inline-flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    align-self: stretch;
}

/* 입력 필드 */
.form-input {
    flex: 1 1 0;
    height: 48px;
    background: white;
    border: 1px solid #DEE1E7;
    border-radius: 8px;
    padding: 12px 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 22.4px;
    color: #000;
}

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

.form-input:focus {
    outline: 2px solid #007AFF;
    outline-offset: -1px;
    border-color: transparent;
}

/* 버튼 */
.btn-verify {
    width: 87px;
    height: 48px;
    background: #EAECF0;
    border: 1px solid #EAECF0;
    border-radius: 8px;
    color: #667085;
    font-size: 16px;
    font-weight: 500;
    line-height: 22.4px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-verify:hover {
    background: #D0D5DD;
}

.btn-verify:active {
    transform: scale(0.98);
}

.btn-verify.active {
    background: #0f1f34;
    border-color: #0f1f34;
    color: white;
}

.del_txt01 { color: #FF0517; font-size: 16px; font-weight: 500; text-decoration: none; }

.btncs01{ width:100%; text-align: center; margin-top:10px; }
.btn-type01 {
    width: 191px;
    height: 48px;
    background: #1d428d;
    border: 1px solid #EAECF0;
    border-radius: 8px;
    color: #ffffff;
    font-size: 16px;
    font-weight: 500;
    line-height: 22.4px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0;
}

.btn-del01 {
    width: 124px;
    height: 38px;
    background: #767aa5;
    border: 1px solid #EAECF0;
    border-radius: 8px;
    color: #ffffff;
    font-size: 15px;
    font-weight: 500;
    line-height: 21.4px;
    cursor: pointer;
    text-align: center;
}

.hide { display: none; }
.active { display: block; }
.sms-timer { color:#666; margin-left:8px; font-size:.875rem; }

.form-field-wrapper {
    width: 100%;
}
.input-wrapper {
    width: 100%;
}
.form-input {
    width: 100%;
}

.help01 {
    font-size: 14px;
    color:#264B7E;
    margin-top: 0px;
}
.help01.error {
    font-size: 14px;
    color: #ee3030;
}
.success {
    font-size: 14px;
    color: #0095f6;
}
.error {
    font-size: 14px;
    color: #ee3030;
}

.pointer { cursor: pointer; }
input.disabled { background-color: #F7F8F9 !important; }
.text-disable { color: #A5ABB7 !important; }

.info-box {
    width: 100%;
    margin-top: 5px;
    padding: 10px 16px;
    background: #F7F8F9;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #505050;
    font-size: 12px;
    font-family: Pretendard, sans-serif;
    font-weight: 400;
    line-height: 16.8px;
}
.btn-white { background-color: #fff; color:#000; border:1px solid #000; }

/* FOOTER 시작 */
footer .company__logo { width:100px; height:18px; }
footer .company__meta-item {
    color:#505050; font-size:14px; font-weight:400; line-height:19.60px; word-wrap:break-word;
}
footer .company__meta { justify-content:center; display:flex; flex-direction:column; align-items:center; gap:2px; }
footer .company__meta-row { justify-content:flex-start; align-items:flex-start; gap:8px; display:inline-flex; }
footer .support { align-self:stretch; justify-content:center; align-items:center; gap:6px; display:inline-flex; }
footer .support__label { color:#1A1A1A; font-size:16px; font-weight:500; line-height:22.40px; }
footer .support__phone { color:#1A1A1A; font-size:18px; font-weight:700; line-height:25.20px; }
footer .policies { justify-content:flex-start; align-items:center; gap:24px; display:inline-flex; }
footer .policies__link { color:#1A1A1A; font-size:14px; font-weight:600; line-height:19.60px; text-decoration:none; }
footer .policies__divider { width:1px; height:10px; background:#CCCFD4; }
footer .site-footer__section {
    align-self:stretch; padding:20px; background:#F7F8F9; overflow:hidden;
    flex-direction:column; justify-content:flex-start; align-items:center; gap:10px; display:flex;
}
footer .site-footer__policies {
    align-self:stretch; padding:20px; background:#F7F8F9; overflow:hidden;
    border-top:1px #EAECF0 solid; flex-direction:column; justify-content:flex-end; align-items:center; gap:10px; display:flex;
}
footer .company {
    align-self:stretch; flex-direction:column; justify-content:flex-start; align-items:center; gap:20px; display:flex;
}
footer .site-footer__wrap { align-self:stretch; flex-direction:column; justify-content:flex-start; align-items:flex-start; display:flex; }
footer .site-footer { width:100%; margin-top:5px; flex-direction:column; justify-content:flex-start; align-items:flex-start; display:inline-flex; }


.bottom-nav{position:fixed;bottom:0;left:0;right:0;background-color:#fff;border-top:1px solid #EAECF0;z-index:1000}
.nav-container{max-width:420px;margin:0 auto;display:flex;justify-content:space-around;align-items:center;padding:8px 0}
.nav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:8px 4px;text-decoration:none;color:#667085;transition:color .2s;cursor:pointer;background:none;border:none;font-family:Pretendard,sans-serif;font-size:12px;font-weight:500;z-index:9999}
.nav-item:hover{color:#162B48}
.nav-item.active{color:#162B48;font-weight:600}
.nav-icon{width:24px;height:24px;margin-bottom:4px;background-repeat:no-repeat;background-size:contain;background-position:center}
.nav-label{font-size:12px;line-height:12px;text-align:center;white-space:nowrap}

/* 개별 아이콘 (기본 off 상태) */
.nav-icon.home{background-image:url('/www/assets/images/home_off.png')}
.nav-icon.send{background-image:url('/www/assets/images/send_off.png')}
.nav-icon.apply{background-image:url('/www/assets/images/apply_off.png')}
.nav-icon.history{background-image:url('/www/assets/images/list_off.png')}
.nav-icon.mypage{background-image:url('/www/assets/images/mypage_off.png')}

/* 활성(on) 상태 */
.nav-item.active .nav-icon.home{background-image:url('/www/assets/images/home_on.png')}
.nav-item.active .nav-icon.send{background-image:url('/www/assets/images/send_on.png')}
.nav-item.active .nav-icon.apply{background-image:url('/www/assets/images/apply_on.png')}
.nav-item.active .nav-icon.history{background-image:url('/www/assets/images/list_on.png')}
.nav-item.active .nav-icon.mypage{background-image:url('/www/assets/images/mypage_on.png')}

.eye-icon {
    width: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    display: inline-block;
    cursor: pointer;
}

.eye-open {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url('/www/assets/images/icon/eye-outline.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.eye-close {
    width: 20px;
    height: 20px;
    display: inline-block;
    background-image: url('/www/assets/images/icon/eye-off-outline.png');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* 바텀시트 공통 */
.bottom-sheet{position:fixed;inset:0;display:none;z-index:999}
.bottom-sheet.is-open{display:block}
.bottom-sheet__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.4)}
.bottom-sheet__panel{position:absolute;left:50%;bottom:0;transform:translateX(-50%) translateY(100%);width:100%;max-width:480px;background:#fff;border-radius:8px 8px 0 0;box-shadow:0 -4px 12px rgba(0,0,0,.15);transition:transform .25s ease-out}
.bottom-sheet.is-open .bottom-sheet__panel{transform:translateX(-50%) translateY(0)}


/* 은행 모달 레이아웃 */
.bank-modal{position:relative;width:100%;height:416px;background:#fff;border-radius:8px 8px 0 0;overflow:hidden;font-family:Pretendard,sans-serif}
.bank-modal__header{position:relative;padding:16px 20px 8px;display:flex;align-items:center;justify-content:center}
.bank-modal__title{font-size:16px;font-weight:600;color:#1A1A1A}
.bank-modal__close{position:absolute;right:20px;top:32px;width:25px;height:25px;border:none;background:transparent;cursor:pointer}
.bank-modal__close::before,.bank-modal__close::after{content:"";position:absolute;left:5px;right:5px;top:11px;height:2px;background:#1A1A1A;border-radius:1px}
.bank-modal__close::before{transform:rotate(45deg)}
.bank-modal__close::after{transform:rotate(-45deg)}

/* 검색 영역 */
.bank-modal__search{padding:0 20px 8px}
.bank-modal__search-inner{width:100%;height:48px;background:#F7F8F9;border-radius:8px;border:1px solid #F7F8F9;display:flex;align-items:center;gap:10px;padding:0 16px}
.bank-modal__search-icon{
    width:20px;
    height:20px;
    border-radius:50%;

    background-image:url('/www/assets/images/icon/input_search.png');
    background-size:cover;   /* 또는 contain */
    background-position:center;
    background-repeat:no-repeat;
}
.bank-modal__search-input{flex:1;border:none;background:transparent;font-size:16px;color:#A5ABB7;outline:none}

/* 리스트 전체 영역 (스크롤) */
.bank-modal__list{position:absolute;left:20px;right:20px;top:80px;bottom:20px;margin-bottom:20px;overflow-y:auto;display:flex;flex-direction:column;gap:0}

/* 한 줄(2개 컬럼 컨테이너) */
.bank-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

/* 아이템(각 2칸 중 1개) */
.bank-item {
    flex: 0 0 48%;  /* 한 줄에 2개(약 50% - 여백) */
    padding: 8px 10px;
    background: #fff;
    border-radius: 8px;
    border: 0px solid #EEE;
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    text-align: left;
}

/* 아이콘 */
.bank-item__icon {
    width: 24px;
    height: 24px;
    border-radius: 9999px;
}

/* 텍스트 */
.bank-item__name {
    color: #505050;
    font-size: 14px;
    font-weight: 400;
    line-height: 19.6px;
    white-space: nowrap;
}

/* 아래 핸들 */
.bank-modal__handle {
    position: absolute;
    left: 50%;
    bottom: 8px;
    transform: translateX(-50%);
    width: 134px;
    height: 5px;
    border-radius: 100px;
    background: #1A1A1A;
}


.customer__actions {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: stretch;
    margin-top: 20px;
    border-radius: 10px;
    overflow: hidden; /* 둥근 모양 유지 */
}

/* 공통 버튼 스타일 */
.customer__btn {
    flex: 1;                      /* 버튼 50%씩 */
    padding: 14px 0;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
}

/* 확인 버튼 (강조) */
.btn-confirm {
    background: #162B48;
    color: #ffffff;
}

/* 취소 버튼 (중립 톤) */
.btn-cancel {
    background: #E5E7EB;
    color: #1F2937;
    border-left: 1px solid #D1D5DB; /* 경계선 */
}

/* 클릭 효과 */
.customer__btn:active {
    opacity: 0.85;
}

.btn-red { color:#de1010 }

.no-history {
    width: 100%;
    display: flex;
    justify-content: center;   /* 전체를 중앙으로 */
    align-items: center;       /* 세로 정렬 */
    gap: 8px;                  /* 아이콘-텍스트 간격 */
    padding: 10px 0;
    color: #667085;            /* 부드러운 회색 */
    font-size: 15px;
    font-family: Pretendard, sans-serif;
}

.no-history .customer__icon {
    width: 20px;
    height: 20px;
    background-size: cover;
}

.recipient-card {
    width: 100%;
}

.recipient-card-inner {
    width: 100%;
    padding: 16px;
    background: #F7F8F9;
    border-radius: 8px;
    outline: 1px solid #F7F8F9;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recipient-row-horizontal {
    width: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 16px;
}

.recipient-label {
    width: 100px;
    color: #667085;
    font-size: 14px;
    font-weight: 400;
}

.recipient-value {
    flex: 1;
    color: #1A1A1A;
    font-size: 14px;
    font-weight: 500;
}

*:disabled { background-color: #F7F8F9 !important; color: #A5ABB7; }

.text-light { color: #E5EEF9 !important;; }
.text-mid { color: #8DABCC !important;; }
.text-dark { color: #264B7E !important;; }
.text-red { color: #f51340 !important; }