/* ==========================================
   [Input Field 내부 버튼 컴포넌트]
   - input field의 테두리 내부 우측에 버튼이 배치되는 구조
   - 예시: 닉네임 변경, 인증번호 전송 등에서 사용
   - 작성일: 2024-07-18
    <div class="input-button-wrap">
        <input type="text" class="form-control" id="nicknameInput" value="내이름">
        <button type="button" class="btn btn-outline-primary btn-inside" id="changeBtn">변경하기</button>
    </div>
   ========================================== */

.input-button-wrap {
  position: relative;
  width: 100%;
  max-width: 400px; /* 필요시 100% 등으로 변경 */
}

/* input 오른쪽에 버튼이 들어갈 공간 확보 (padding-right) */
.input-button-wrap .form-control {
  width: 100%;
  padding-right: 70px; /* 버튼 폭+여유 */
  height: 42px;
  font-size: 1rem;
}

/* input 내부 버튼 스타일 */
.btn-inside {
  position: absolute;
  top: 50%;
  right: 12px; /* input 오른쪽과 버튼 사이 여백 */
  transform: translateY(-50%);
  height: 30px;
  padding: 0 13px;
  border-radius: 6px;
  font-size: 0.95rem;
  z-index: 2;
  /* 추가 스타일(색상, 배경 등)은 Bootstrap btn 클래스에 의해 결정 */
}