/*
 * Dropzone 5.5.1(css/lib/dropzone.css) 위에 얹는 앱 수정분.
 * 원본 파일을 직접 고쳐 쓰던 것을 그대로 옮겼다. css/lib/dropzone.css 바로 다음에 로드한다(웹 head.jsp, 모바일 include.jsp).
 * 원본 규칙보다 뒤에 오므로, 원본에서 같은 명시도로 뒤에 있던 선언은 여기서 다시 적어 순서를 지킨다(주석 "순서 유지").
 * js/lib/dropzone/dropzone.min.js 는 안내 문구를 <button class="dz-button"> 으로 그리는 5.7 계열이다(문구도 한국어로 고쳐져 있다).
 */

/* 영역: 얇은 회색 테두리, 낮은 높이, 연회색 배경 */
.dropzone {
    min-height: 100px;
    border: 1px solid rgba(132, 132, 132, 0.3);
}

.dropzone.dz-clickable {
    background-color: #f8f8f8;
}

/* 안내 문구 가운데 정렬 */
.dropzone.dz-clickable .dz-message,
.dropzone.dz-clickable .dz-message * {
    display: flex;
    align-items: center;
    justify-content: center;
}

.dropzone .dz-message .dz-button {
    border: 0px none;
    color: #5387c3;
    font-size: 12px;
    background: transparent;
}

.dropzone.dz-started .dz-message {
    display: none; /* 순서 유지 — 위 display:flex 보다 뒤에 있던 원본 규칙. 파일을 넣은 뒤 안내 문구를 숨긴다 */
}

.dropzone .dz-message {
    margin: 0;
}

/* 삭제 버튼: 미리보기 오른쪽 위의 큰 빨간 × */
.dropzone .dz-preview .dz-remove {
    font-size: 36px;
    right: 11px;
    font-weight: 700;
    top: 1px;
    z-index: 48;
    position: absolute;
    padding: 0px;
    color: red;
    text-decoration: none !important;
    border-radius: 12px;
    text-align: inherit; /* 원본의 text-align:center 를 지워 쓰던 것 — 지운 상태(부모에서 상속)를 되살린다 */
}

.dropzone .dz-preview .dz-details {
    line-height: 200%;
}

.dropzone .dz-preview .dz-progress {
    margin-top: 40px;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    -webkit-transition: width 1000ms ease-in-out;
    -moz-transition: width 1000ms ease-in-out;
    -ms-transition: width 1000ms ease-in-out;
    -o-transition: width 1000ms ease-in-out;
    transition: width 1000ms ease-in-out;
}

/* 원본의 대기 중 진행바 pulse 애니메이션을 지워 쓰던 것 */
.dropzone .dz-preview:not(.dz-processing) .dz-progress {
    -webkit-animation: none;
    -moz-animation: none;
    -ms-animation: none;
    -o-animation: none;
    animation: none;
}

.dropzone {
    position: relative;
}

/* 미리보기 */
.dropzone .dz-preview {
    width: 120px;
    margin: 0.5em;
}

.dropzone .dz-preview .dz-progress {
    display: block;
    height: 10px;
    border: 1px solid #aaa;
}

.dropzone .dz-preview .dz-progress .dz-upload {
    display: block;
    height: 100%;
    background: green;
}

/* 성공·실패 표시: 평소에는 숨기고 상태 클래스가 붙을 때만 보인다 */
.dropzone .dz-preview.dz-error .dz-error-mark {
    display: block;
}

.dropzone .dz-preview.dz-success .dz-success-mark {
    display: block;
}

.dropzone .dz-preview .dz-success-mark,
.dropzone .dz-preview .dz-error-mark {
    display: none;
    top: 30px;
}

.dropzone .dz-preview .dz-error-mark,
.dropzone .dz-preview .dz-success-mark {
    width: 54px;
    height: 58px;
}