/* 로그인 / 회원가입 창 새 디자인 (2026-10-07)
   기존 창(#loginModal, #joinModal)의 입력 칸 id·동작은 그대로 두고 모양만 바꿈. rf2-auth.js 가 머리글·안내 문구·눈 모양 버튼을 붙임 */
html body :is(#loginModal,#joinModal).rf2-auth{--au-bg:#101826;--au-bg2:#0b111c;--au-line:#22314a;--au-field:#1a2333;--au-text:#f3f6fb;--au-muted:#93a3b8;--au-cyan:#22d3ee;--au-cyan2:#06b6d4;--au-pink:#ff3d7f}
html body :is(#loginModal,#joinModal).rf2-auth{backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);background:rgba(3,6,12,.62)!important}
html body :is(#loginModal,#joinModal).rf2-auth .modal-dialog{max-width:440px!important;width:calc(100% - 28px)!important;margin:6vh auto!important}
html body :is(#loginModal,#joinModal).rf2-auth .modal-content{position:relative;overflow:hidden;padding:0!important;font-family:Outfit,"Noto Sans KR","Malgun Gothic",Arial,sans-serif!important;border:1px solid var(--au-line)!important;border-radius:22px!important;background:linear-gradient(180deg,#131c2c 0%,var(--au-bg) 34%,var(--au-bg2) 100%)!important;box-shadow:0 30px 80px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04)!important;color:var(--au-text)!important}
html body :is(#loginModal,#joinModal).rf2-auth .modal-content:before{content:'';position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,var(--au-cyan) 0%,#38bdf8 38%,var(--au-pink) 70%,#a78bfa 100%);z-index:2}

/* 머리글 */
html body :is(#loginModal,#joinModal).rf2-auth .modal-header{display:block!important;position:relative;padding:28px 28px 22px!important;margin:0!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.07)!important;background:transparent!important;text-align:center}
html body :is(#loginModal,#joinModal).rf2-auth .modal-title{display:block!important;font-family:inherit!important;margin:0!important;padding:0!important;color:var(--au-text)!important;font-size:24px!important;font-weight:800!important;line-height:1.25!important;letter-spacing:-.3px;text-shadow:none!important}
html body :is(#loginModal,#joinModal).rf2-auth .modal-title>img:not(.au-logo),html body :is(#loginModal,#joinModal).rf2-auth .modal-title .modal-brand,html body :is(#loginModal,#joinModal).rf2-auth .modal-title .modal-caption{display:none!important}
html body :is(#loginModal,#joinModal).rf2-auth .au-logo{display:block;height:62px;max-width:230px;margin:0 auto;object-fit:contain;border-radius:8px}
html body :is(#loginModal,#joinModal).rf2-auth .au-sub{display:block;margin-top:6px;color:var(--au-muted);font-size:13.5px;font-weight:500}
html body :is(#loginModal,#joinModal).rf2-auth .modal-header .close{position:absolute!important;right:16px;top:16px;width:38px;height:38px;margin:0!important;padding:0!important;border:1px solid var(--au-line)!important;border-radius:11px!important;background:#0e1623!important;color:#c5d0df!important;opacity:1!important;display:flex!important;align-items:center;justify-content:center;transition:border-color .15s,color .15s;z-index:3;text-shadow:none!important}
html body :is(#loginModal,#joinModal).rf2-auth .modal-header .close:hover{border-color:var(--au-cyan)!important;color:#fff!important}
html body :is(#loginModal,#joinModal).rf2-auth .modal-header .close i{font-size:20px!important;color:inherit!important}
html body #joinModal.rf2-auth .modal-header{text-align:left;padding:26px 74px 18px 28px!important}

/* 본문·입력 칸 */
html body :is(#loginModal,#joinModal).rf2-auth .modal-body{padding:22px 24px 6px!important;background:transparent!important;border:0!important;max-height:none!important}
html body #joinModal.rf2-auth .modal-body{max-height:min(62vh,640px)!important;overflow-y:auto!important;scrollbar-width:thin;scrollbar-color:#1f6f8a transparent}
html body #joinModal.rf2-auth .modal-body::-webkit-scrollbar{width:6px}
html body #joinModal.rf2-auth .modal-body::-webkit-scrollbar-thumb{background:#1f6f8a;border-radius:6px}
html body :is(#loginModal,#joinModal).rf2-auth form.form{margin:0!important;padding:0!important;background:transparent!important}
html body :is(#loginModal,#joinModal).rf2-auth .form-group{margin:0 0 14px!important;padding:0!important;background:transparent!important;border:0!important}
html body :is(#loginModal,#joinModal).rf2-auth .input-group{display:block!important;position:relative;width:100%!important;margin:0!important;padding:0!important;background:transparent!important;border:0!important}
html body :is(#loginModal,#joinModal).rf2-auth .input-group-prepend{display:none!important}
html body :is(#loginModal,#joinModal).rf2-auth .au-label{display:block;font-family:inherit;margin:0 0 7px 2px;color:#d7e0ec;font-size:13px;font-weight:700;letter-spacing:-.1px}
html body :is(#loginModal,#joinModal).rf2-auth .au-label i{margin-left:3px;color:var(--au-pink);font-style:normal}
html body :is(#loginModal,#joinModal).rf2-auth input.form-control{display:block!important;width:100%!important;height:50px!important;margin:0!important;padding:0 16px!important;border:1px solid var(--au-line)!important;border-radius:12px!important;background:var(--au-field)!important;background-image:none!important;box-shadow:none!important;color:var(--au-text)!important;font-size:15.5px!important;font-weight:500!important;line-height:50px!important;transition:border-color .15s,box-shadow .15s,background .15s}
html body :is(#loginModal,#joinModal).rf2-auth input.form-control::placeholder{color:#8794a8!important;opacity:1!important;font-weight:500}
html body :is(#loginModal,#joinModal).rf2-auth input.form-control:focus{border-color:var(--au-cyan)!important;background:#1c2738!important;box-shadow:0 0 0 3px rgba(34,211,238,.16),0 0 18px rgba(34,211,238,.12)!important;outline:0!important}
html body :is(#loginModal,#joinModal).rf2-auth .au-has-eye input.form-control{padding-right:50px!important}
html body :is(#loginModal,#joinModal).rf2-auth .au-eye{position:absolute;right:6px;bottom:6px;width:38px;height:38px;border:0;border-radius:9px;background:transparent;color:#93a3b8;cursor:pointer;display:flex;align-items:center;justify-content:center;padding:0}
html body :is(#loginModal,#joinModal).rf2-auth .au-eye:hover{color:#fff;background:rgba(255,255,255,.06)}
html body :is(#loginModal,#joinModal).rf2-auth .au-eye i{font-size:21px}
html body :is(#loginModal,#joinModal).rf2-auth .au-hint{margin:7px 2px 0;color:var(--au-muted);font-size:12.5px;line-height:1.5}
html body :is(#loginModal,#joinModal).rf2-auth .au-hint a{color:var(--au-cyan);font-weight:700;text-decoration:underline}

/* 은행 선택 (bootstrap-select) */
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select{display:block!important;width:100%!important;margin:0!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select>.dropdown-toggle{display:flex!important;align-items:center;width:100%!important;height:50px!important;margin:0!important;padding:0 16px!important;border:1px solid var(--au-line)!important;border-radius:12px!important;background:var(--au-field)!important;box-shadow:none!important;color:var(--au-text)!important;font-size:15.5px!important;font-weight:500!important;text-transform:none!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select>.dropdown-toggle.bs-placeholder,html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select>.dropdown-toggle.bs-placeholder .filter-option-inner-inner{color:#8794a8!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select>.dropdown-toggle:focus,html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select.show>.dropdown-toggle{border-color:var(--au-cyan)!important;box-shadow:0 0 0 3px rgba(34,211,238,.16)!important;outline:0!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select .filter-option-inner-inner{color:inherit!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select .dropdown-menu{border:1px solid var(--au-line)!important;border-radius:12px!important;background:#141d2c!important;box-shadow:0 18px 40px rgba(0,0,0,.55)!important;padding:6px!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select .dropdown-menu .dropdown-item,html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select .dropdown-menu li a{color:#dbe4f0!important;border-radius:8px!important;padding:9px 12px!important;font-size:14.5px!important;background:transparent!important;box-shadow:none!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select .dropdown-menu li a:hover,html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select .dropdown-menu li.selected a,html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select .dropdown-menu li a.active{background:rgba(34,211,238,.14)!important;color:#fff!important}
html body :is(#loginModal,#joinModal).rf2-auth select.au-native{display:block!important;width:100%!important;height:50px!important;padding:0 14px!important;border:1px solid var(--au-line)!important;border-radius:12px!important;background:var(--au-field)!important;color:var(--au-text)!important;font-size:15.5px!important}

/* 버튼·아래 안내 */
html body :is(#loginModal,#joinModal).rf2-auth .modal-footer{display:block!important;padding:8px 24px 26px!important;margin:0!important;border:0!important;background:transparent!important;text-align:center}
html body :is(#loginModal,#joinModal).rf2-auth .modal-footer .btn{display:block!important;width:100%!important;height:54px!important;margin:0!important;padding:0!important;border:0!important;border-radius:13px!important;background:linear-gradient(90deg,#67e8f9 0%,#22d3ee 42%,#0ea5e9 100%)!important;box-shadow:0 10px 26px rgba(14,165,233,.35),inset 0 1px 0 rgba(255,255,255,.35)!important;color:#04121c!important;font-size:17px!important;font-weight:800!important;line-height:54px!important;letter-spacing:.2px;text-transform:none!important;transition:filter .15s,transform .1s}
html body :is(#loginModal,#joinModal).rf2-auth .modal-footer .btn:hover{filter:brightness(1.07);color:#04121c!important}
html body :is(#loginModal,#joinModal).rf2-auth .modal-footer .btn:active{transform:translateY(1px)}
html body :is(#loginModal,#joinModal).rf2-auth .au-foot{margin:16px 0 0;color:var(--au-muted);font-size:13.5px;line-height:1.6}
html body :is(#loginModal,#joinModal).rf2-auth .au-foot a{display:inline-block;margin-top:8px;color:#fff;font-size:14.5px;font-weight:800;text-decoration:none;border-bottom:2px solid var(--au-cyan);padding-bottom:1px}
html body :is(#loginModal,#joinModal).rf2-auth .au-foot a:hover{color:var(--au-cyan)}

@media(max-width:480px){
  html body :is(#loginModal,#joinModal).rf2-auth .modal-dialog{margin:3vh auto!important}
  html body :is(#loginModal,#joinModal).rf2-auth .modal-header{padding:24px 20px 18px!important}
  html body #joinModal.rf2-auth .modal-header{padding:22px 66px 16px 20px!important}
  html body :is(#loginModal,#joinModal).rf2-auth .modal-body{padding:18px 18px 4px!important}
  html body :is(#loginModal,#joinModal).rf2-auth .modal-footer{padding:8px 18px 22px!important}
  html body :is(#loginModal,#joinModal).rf2-auth .modal-title{font-size:21px!important}
  html body :is(#loginModal,#joinModal).rf2-auth .au-logo{height:52px}
  html body #joinModal.rf2-auth .modal-body{max-height:64vh!important}
}

/* 은행 선택 글자 세로 가운데 */
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select>.dropdown-toggle .filter-option{position:static!important;display:flex!important;align-items:center;flex:1 1 auto;height:100%!important;padding:0!important;text-align:left!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select>.dropdown-toggle .filter-option-inner,html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select>.dropdown-toggle .filter-option-inner-inner{padding:0!important;line-height:1.2!important;font-size:15.5px!important}
html body :is(#loginModal,#joinModal).rf2-auth .bootstrap-select>.dropdown-toggle:after{margin-left:auto!important;color:#93a3b8!important}
html body :is(#loginModal,#joinModal).rf2-auth input.form-control,html body :is(#loginModal,#joinModal).rf2-auth .btn,html body :is(#loginModal,#joinModal).rf2-auth .au-foot{font-family:inherit!important}

/* 버튼: 예전 스타일(#btnLogin 전용 규칙)보다 우선하도록 id 로 한 번 더 지정 */
html body #loginModal.rf2-auth #btnLogin,html body #joinModal.rf2-auth #usrjoin{display:block!important;width:100%!important;height:54px!important;margin:0!important;padding:0!important;border:0!important;border-radius:13px!important;background:linear-gradient(90deg,#67e8f9 0%,#22d3ee 42%,#0ea5e9 100%)!important;box-shadow:0 10px 26px rgba(14,165,233,.35),inset 0 1px 0 rgba(255,255,255,.35)!important;color:#04121c!important;font-size:17px!important;font-weight:800!important;line-height:54px!important;letter-spacing:.2px;text-transform:none!important}

/* 창 위치: 화면 세로 가운데보다 조금 위 (아래쪽 여백을 더 줘서 살짝 올림). 가입 창은 길어서 정가운데 */
html body :is(#loginModal,#joinModal).rf2-auth .modal-dialog{display:flex!important;align-items:center!important;min-height:calc(100% - 32px)!important;margin:16px auto!important;box-sizing:border-box}
html body :is(#loginModal,#joinModal).rf2-auth .modal-content{width:100%!important;flex:0 0 auto}
html body #loginModal.rf2-auth .modal-dialog{padding-bottom:12vh!important}
html body #joinModal.rf2-auth .modal-dialog{padding-bottom:0!important}
@media(max-width:480px){
  html body :is(#loginModal,#joinModal).rf2-auth .modal-dialog{min-height:calc(100% - 20px)!important;margin:10px auto!important}
  html body #loginModal.rf2-auth .modal-dialog{padding-bottom:16vh!important}
}
/* 낮은 화면에서도 가입 창이 화면 안에 들어오게: 입력 칸 영역만 줄이고 그 안에서 스크롤 */
html body #joinModal.rf2-auth .modal-body{max-height:min(640px,calc(100vh - 300px))!important}