/**
 * 이노릭스 커스텀 CSS
 *
 * 이 파일은 기존 innorix.css를 오버라이드하기 위한 커스텀 스타일입니다.
 * 기존 innorix.css 다음에 로드되어 스타일을 덮어씁니다.
 *
 * 사용 방법:
 * - 필요한 스타일만 여기에 추가하세요
 * - 특정도(specificity)가 충분하지 않으면 !important를 사용할 수 있습니다
 * - 변경사항을 추적하기 쉽도록 주석을 추가하세요
 */

/* 예시: 이노릭스 영역 커스텀 스타일 */
/* .innorix_base {
 *   예시 스타일
 * }
 */
 .innorix_basic {
  border: 1px solid #b6b6b6;
}
.innorix_basic div.irx_filetree.empty-uploader {
  background: #fff url("/bo-ui-fe/img/component/icon/ico_fileupload.svg") no-repeat center calc(50% - 2rem);
  background-size: auto 20%;
  position: relative;
  isolation: isolate;
}

.innorix_basic div.irx_filetree.empty-uploader::before {
  content: "파일 첨부 버튼을 클릭 또는 파일을 드래그 하세요";
  font: 14px 'Pretendard GOV', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  position: absolute;
  top: calc(50% + 2rem);
  left: 50%;
  transform: translate(-50%, -50%);
  font: 14px 'Pretendard GOV';

  /* 글자 색은 투명 처리 */
  color: transparent;
  -webkit-text-fill-color: transparent;

  /* 텍스트 전체를 그라디언트로 칠함 */
  background:
    linear-gradient(
      to right,
      /* 기본 색(#1e2124) 구간 */
      #1e2124 0%,
      #1e2124 var(--click-start),

      /* "버튼을 클릭" 강조 구간 */
      #256ef4 var(--click-start),
      #256ef4 var(--click-end),

      /* 다시 기본 색 */
      #1e2124 var(--click-end),
      #1e2124 var(--drag-start),

      /* "파일을 드래그" 강조 구간 */
      #256ef4 var(--drag-start),
      #256ef4 var(--drag-end),

      /* 나머지 기본 색 */
      #1e2124 var(--drag-end),
      #1e2124 100%
    );
  -webkit-background-clip: text;
  background-clip: text;

  /* 위치는 그대로 조정 값 유지 */
  --click-start: 22%;
  --click-end: 46%;
  --drag-start: 55%;
  --drag-end: 84%;
  width:29rem;
  text-align: center;
}

.innorix_basic div.irx_filetree.empty-uploader::after {
  content: '';
  position: absolute;
  background: white;
  z-index: -1;
  inset: 0;
  opacity: 0.3;
}