/*
          [배경 그라디언트]
          - body에 적용된 클래스 .gradient-custom와 매칭.
          - 색상/방향 바꾸려면 rgba 값이나 to right 부분 수정.
        */
        .gradient-custom {
            background: #ffffff;
        }
        /*
          [비밀번호 입력 래퍼]
          - 토글 버튼을 입력 오른쪽에 겹치기 위한 상대 위치 컨테이너.
        */
        .password-wrapper {
            position: relative;
        }
        /*
          [입력 필드 우측 패딩]
          - 오른쪽에 토글 아이콘이 들어오므로 겹치지 않게 여백 확보.
          - 토글 버튼 크기를 바꾸면 이 값도 조정.
        */
        .password-wrapper .form-control {
            padding-right: 2.6rem;
        }
        /*
          [비밀번호 표시 토글 버튼]
          - 입력창 오른쪽 중앙에 절대 위치.
          - 색상/위치 변경 가능: right, color 등 조정.
        */
        .password-toggle {
            position: absolute;
            right: .65rem;
            top: 50%;
            transform: translateY(-50%);
            border: 0;
            background: transparent;
            color: #6c757d;
            cursor: pointer;
        }
        /* 아이콘 크기 */
        .password-toggle .bi { font-size: 1.1rem; }
        /* 로그인 카드 위 브랜드 영역 */
        .brand-hero {
            margin: 24px auto 8px;   /* 위쪽 여백, 가운데 정렬, 카드와 간격 */
        }
        .brand-hero img { height: 96px; width: auto; } /* 예: 96px로 확대 */

        /* 카드 자체를 조금 더 넓게 */
        .card.card-login {
            max-width: 560px;   /* 가로 길이 키우기: 필요시 600~680도 OK */
            width: 100%;
        }

        /* 두 인풋을 한 번 더 감싸는 외곽 박스 */
        .login-panel {
            /* border: 2px solid #808080; */
            background: #f8fbff;
            border-radius: 5px;
            padding: 10px;
            margin-bottom: 10px;
        }

        /* 인풋 높이/테두리 */
        /* 인풋 크기/테두리 */
        .form-control.form-lg{
            height:48px;
            border:2px solid #3e91b5;
            border-radius:10px;
        }

        /* 한 줄 래퍼: 아이콘들의 기준점 */
        .input-with-icon{
            position:relative;
        }

        /* 왼쪽 아이콘(사람/자물쇠)은 '직접 자식'만 잡아 충돌 방지 */
        .input-with-icon > .bi{
            position:absolute;
            left:12px;
            top:50%;
            transform:translateY(-50%);
            font-size:1.05rem;
            opacity:.7;
            pointer-events:none; /* 클릭 막기 */
        }

        /* 인풋 패딩: 왼쪽/오른쪽 아이콘 자리 비워주기 */
        .input-with-icon input.form-control{
            padding-left:40px;   /* 왼쪽 아이콘 공간 */
            padding-right:44px;  /* 오른쪽 토글 아이콘 공간 */
        }

        /* 오른쪽 비밀번호 토글 버튼 */
        .input-with-icon .password-toggle{
            position:absolute;
            right:12px;                 /* 10~16px로 미세조정 가능 */
            top:50%;
            transform:translateY(-50%);
            width:28px; height:28px;    /* 터치 영역 */
            display:flex; align-items:center; justify-content:center;
            border:0; background:transparent; color:#808080; cursor:pointer;
            z-index:2;                  /* 인풋 위로 */
        }

        /* 토글 아이콘 크기 */
        .input-with-icon .password-toggle .bi{
            font-size:1.1rem;
            opacity:.8;
        }