/* 타이머관련 css 시작 */
.input-group {
  position: relative;
}

.input-suffix-timer {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 4px;
}

.input-suffix-timer img {
  width: 16px;
  height: 16px;
}

#timer {
  color: #2f6bff;
  font-size: 13px;
  display: none;
  z-index: 10;
}

.input-group input {
  padding-right: 80px;
}
/* 타이머관련 css 끝 */


/* 번호인증관련 css 시작  */
#btnVerify.verified {
  background-color: #d1d5db;  
  border-color: #d1d5db;
  color: #6b7280;
  cursor: default;
}

#btnVerify:disabled {
  pointer-events: none;      
}
/* 번호인증관련 css 끝  */

/* 파일 미리보기 시작  */
.preview-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 12px;
}
/* 파일 미리보기 끝  */

/* 거래내역 화면 시작 */
.keyword-search-wrap {
    display: flex;
    align-items: center;
    gap: 0.8rem;
}

.keyword-input-group {
    min-width: 26rem;
}

#btnKeywordSearch {
    flex-shrink: 0;
}

/* 거래내역 화면 끝  */
/* 거래내역 상세 모달 시작 */

/* 취소금액 행: 줄바꿈 허용 + 레이아웃 안정 */
#orderDetailModal .key-value-item.odm-cancel-item{
  white-space: normal;
}

/* key 고정 */
#orderDetailModal .key-value-item.odm-cancel-item .key{
  flex: 0 0 auto;
}

/* value가 줄어들 수 있게 */
#orderDetailModal .key-value-item.odm-cancel-item .value{
  flex: 1 1 auto;
  min-width: 0;
}

/* input + 버튼 정렬 */
#orderDetailModal .odm-cancel-controls{
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  min-width: 0;
}

/* input */
#orderDetailModal .odm-cancel-controls #odmCancelAmtInput{
  flex: 1 1 auto;
  min-width: 0;

  height: 3.2rem !important;
  line-height: 3.2rem !important;
  padding: 0 1rem !important;
  box-sizing: border-box !important;

  font-size: 1.4rem !important;

  text-align: right !important;
  text-indent: 0 !important;
}

/* 버튼(전액/취소) */
#orderDetailModal .odm-cancel-controls #odmBtnCancelAll,
#orderDetailModal .odm-cancel-controls #odmBtnReqCancel{
  flex: 0 0 auto;

  height: 3.2rem !important;
  line-height: 3.2rem !important;
  padding: 0 1.2rem !important;

  white-space: nowrap;
  box-sizing: border-box;    
}

/* 취소금액 li: 라벨(.key)과 value를 수직 중앙 정렬 */
#orderDetailModal .key-value-item.odm-cancel-item{
  align-items: center !important;
}

/* 라벨 자체도 line-height를 input 높이에 맞춰 중앙처럼 보이게 */
#orderDetailModal .key-value-item.odm-cancel-item .key{
  line-height: 3.2rem !important; 
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* 거래내역 상세 모달 끝 */


/* focus일 때 아이콘 변경 막기 */
#autoAmt:focus {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23e0e0e0' d='M10 14 5 8h10z'/%3E%3C/svg%3E") !important;
}

/* 열림 상태일 때만 ▲ */
#autoAmt.open-arrow {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' viewBox='0 0 20 20'%3E%3Cpath fill='%23e0e0e0' d='m10 6 5 6H5z'/%3E%3C/svg%3E") !important;
}

.key-value-item .value {
    white-space: normal;
    word-break: break-all;
}

/* 푸시 로딩바였지만.. 공통으로 써버린..  */
#orderLoadingOverlay,
#payLoadingOverlay,
#pushLoadingOverlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.push-loading-box {
    background: #fff;
    padding: 24px 32px;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.push-spinner {
    width: 36px;
    height: 36px;
    border: 4px solid #e3e3e3;
    border-top: 4px solid #1a73e8;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin: 0 auto 12px;
}

@keyframes spin {
    100% { transform: rotate(360deg); }
}
/* 로딩바 끝  */