/* 파일 미리보기 */
.file-preview-list { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.file-preview-item { position: relative; width: 100px; height: 100px; border-radius: 8px; overflow: hidden; border: 1px solid #E5E7EB; }
.file-preview-item img { width: 100%; height: 100%; object-fit: cover; }
.file-preview-item .file-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; background: #F8F9FB; font-size: 14px; color: #71727D; text-align: center; padding: 8px; word-break: break-all; }
.file-preview-item .remove-btn { position: absolute; top: 4px; right: 4px; width: 24px; height: 24px; background: rgba(0,0,0,0.6); border-radius: 50%; color: white; border: none; cursor: pointer; display: flex; align-items: center; justify-content: center; }

/* 은행 선택 */
.bank-select { width: 100%; padding: 16px; border: 1px solid #E5E7EB; border-radius: 12px; font-size: 16px; background: white; }

/* 약관 동의 */
.agreement-section { background: #F8F9FB; border-radius: 12px; padding: 20px; margin-bottom: 16px; }
.agreement-title { font-weight: 600; font-size: 16px; color: #1C1C1F; margin-bottom: 12px; }
.agreement-content { max-height: 150px; overflow-y: auto; font-size: 14px; color: #71727D; line-height: 1.6; background: white; padding: 12px; border-radius: 8px; border: 1px solid #E5E7EB; }

/* 메인 폼 레이아웃 */
.main-form {
    display: none;
    flex-direction: column;
    min-height: 100vh;
    background: white;
}
.main-form.show {
    display: flex;
}

/* 진행 표시줄 */
.step-indicator {
    flex: 1;
    height: 4px;
    background: #E5E7EB;
    border-radius: 2px;
    transition: background 0.3s ease;
}
.step-indicator.active {
    background: #144196;
}

/* 하단 버튼 영역 */
.form-footer {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    max-width: 480px;
    width: 100%;
    background: white;
    padding: 16px 20px;
    box-shadow: 0px -2px 10px rgba(0, 0, 0, 0.08);
    z-index: 100;
    display: flex;
    gap: 12px;
}

/* 이전 버튼 */
.prev-button {
    flex: 1;
    padding: 14px 24px;
    background: #F1F1F7;
    color: #1C1C1F;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-family: Pretendard;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.prev-button:active {
    transform: scale(0.98);
    background: #E5E5EB;
}

/* 다음/제출 버튼 */
.form-footer .next-button {
    flex: 2;
}

/* 완료 화면 */
#completionScreen {
    background: white;
}
#completionScreen .start-content {
    justify-content: center;
    min-height: 100vh;
}

/* 컨테이너 오버라이드 */
body {
    display: flex;
    justify-content: center;
    background: #f5f5f5;
}
body > #startScreen,
body > #completionScreen,
body > #mainForm {
    max-width: 480px;
    width: 100%;
    background: white;
    min-height: 100vh;
}

/* 모바일 메인 영역 */
.mobile-main {
    max-width: 100%;
    margin: 0;
    padding: 16px 20px;
    padding-bottom: 100px;
}

/* select 스타일 수정 */
select.new-form-input {
    padding: 12px 0;
    border: none;
    border-bottom: 1px solid #D5D5DE;
    border-radius: 0;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath fill='%23334155' d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0 center;
}
select.new-form-input:focus {
    outline: none;
    border-bottom-color: #144196;
}
