/* 배경 및 레이아웃 */
.login_body { background: #f8fafc; overflow-x: hidden; }
.bg_animation_wrap { position: fixed; inset: 0; z-index: -1; overflow: hidden; }
.bg_animation_wrap .bg_img { position: absolute; inset: 0; background: url('https://images.unsplash.com/photo-1610473068533-8743127814c1?q=80&w=2000') center/cover no-repeat; animation: slowZoom 30s infinite alternate ease-in-out; opacity: 0.1; }
.bg_animation_wrap .bg_overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,250,252,1) 100%); }
@keyframes slowZoom { from { transform: scale(1); } to { transform: scale(1.1); } }

.login_container { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2.5rem 1.25rem; }
.login_container #viewWrapper { min-width:460px; }

/* 공통 카드 스타일 (Profile 컨셉) */
.glass_card { background:rgba(255, 255, 255, 0.95); backdrop-filter:blur(20px); border:1px solid #fff; border-radius:2.5rem; box-shadow:0 40px 100px -20px rgba(0,0,0,0.08); padding: 3.5rem; width:100%; animation:fadeInUp 0.5s ease-out; }
.signup_card { min-width:620px; max-width:620px; background: #fff; padding: 4rem; }

/* 입력 필드 (Profile 스타일 통합) */
.f_row { margin-bottom: 1.25rem; }
.f_row .f_label { font-size: 0.75rem; font-weight: 800; color: #94A3B8; text-transform: uppercase; letter-spacing: 0.05em; display: block; margin-bottom: 0.5rem; padding-left: 2px; }
.f_row .field_h { width: 100%; height: 3.25rem; border: 1px solid #E2E8F0; border-radius: 0.875rem; padding: 0 1.25rem!important; font-size: 0.9375rem; font-weight: 600; background: #F8FAFC; transition: 0.2s; outline: none; }
.f_row .field_h:focus { border-color: #3B82F6; background: #fff; box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.05); }

/* 커스텀 셀렉트 스타일 (Profile 이식) */
.custom_select { width: 100%; background:#F8FAFC; height:3.25rem; border:1px solid #E2E8F0; border-radius:0.875rem; padding:0 1.25rem; font-size:0.9375rem; font-weight:600; color:#475569; position:relative; cursor:pointer; display:flex; align-items:center; justify-content:space-between; transition: 0.2s; }
.custom_select img { width: 16px; transform:rotate(90deg); transition: 0.2s; }
.custom_select.active { border-color: #3B82F6; background: #fff; }
.custom_select.active img { transform:rotate(-90deg); }
.custom_select .select_list { display:block; position:absolute; top:calc(100% + 6px); left:0; right:0; background:#fff; border:1px solid #F1F5F9; border-radius:0.875rem; box-shadow:0 10px 15px -3px rgba(0,0,0,0.1); z-index:1100; max-height:200px; overflow-y:auto; padding:0.5rem 0; animation:fadeIn 0.2s ease; }
.custom_select .select_list button { width:100%; text-align:left; padding:0.75rem 1.25rem; font-size:0.875rem; color:#64748B; font-weight:600; transition:0.2s; background:none; border:none; }
.custom_select .select_list button:hover { background:#F8FAFC; color:#3B82F6; }
.custom_select .select_list button.selected { background:#EFF6FF; color:#2563EB; font-weight:800; }
.custom_select.disabled { background:#F1F5F9; color:#94A3B8; cursor:not-allowed; pointer-events:none; }

/* 계정 찾기 탭 */
.tab_wrap { display: flex; background: #F1F5F9; padding: 4px; border-radius: 12px; margin-bottom: 2rem; }
.tab_wrap .tab_btn { flex: 1; height: 2.5rem; font-size: 0.875rem; font-weight: 800; color: #94A3B8; border-radius: 10px; transition: 0.2s; }
.tab_wrap .tab_btn.active { background: #fff; color: #3B82F6; box-shadow: 0 2px 8px rgba(0,0,0,0.05); }

/* 사이드 버튼 형태 */
.flex_row { display: flex; gap: 8px; }
.flex_row .side_btn { width: 110px; flex-shrink: 0; background: #0F172A; color: #fff; border-radius: 0.875rem; font-size: 0.8125rem; font-weight: 800; transition: 0.2s; }
.flex_row .side_btn:hover { background: #000; }
.flex_row .side_btn.blue { background: #3B82F6; }

/* 회원가입 단계 인디케이터 */
.step_indicator { position: relative; display: flex; justify-content: space-between; margin-bottom: 4rem; max-width: 600px; margin-left: auto; margin-right: auto; }
.step_indicator .step_line { position: absolute; top: 1.125rem; left: 0; width: 100%; height: 2px; background: #F1F5F9; z-index: 1; }
.step_indicator .step_fill { position: absolute; top: 1.125rem; left: 0; height: 2px; background: #3B82F6; z-index: 2; transition: 0.5s; }
.step_indicator .step_node { position: relative; z-index: 3; width: 2.25rem; height: 2.25rem; border-radius: 50%; background: #fff; border: 2px solid #F1F5F9; display: flex; align-items: center; justify-content: center; font-size: 0.8125rem; font-weight: 900; color: #CBD5E1; transition: 0.3s; }
.step_indicator .step_node.active { border-color: #3B82F6; background: #3B82F6; color: #fff; transform: scale(1.15); box-shadow: 0 10px 20px rgba(59, 130, 246, 0.2); }
.step_indicator .step_node.done { border-color: #3B82F6; background: #EFF6FF; color: #3B82F6; }
.step_indicator .step_node img { width:20px; }

/* 버튼 */
.btn_primary_full { height: 3.5rem; background: #3B82F6; color: #fff; border-radius: 1rem; font-size: 1rem; font-weight: 800; width: 100%; transition: 0.2s; border: none; cursor: pointer; }
.btn_primary_full:hover { background: #2563EB; transform: translateY(-2px); box-shadow: 0 10px 20px rgba(37, 99, 235, 0.2); }

/* 그리드 레이아웃 */
.f_grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.f_row_full { grid-column: 1 / -1; }
.f_grid .biz_type_item { padding: 1.5rem 1.25rem; border: 2px solid #F8FAFC; border-radius: 1.5rem; cursor: pointer; transition: 0.3s; display: flex; align-items: center; gap: 1rem; background: #F8FAFC; }
.f_grid .biz_type_item.active { border-color: #3B82F6; background: #EFF6FF; }
.f_grid .biz_type_item .icon_box { width: 3rem; height: 3rem; border-radius: 1rem; background: #fff; display: flex; align-items: center; justify-content: center; color: #94A3B8; flex-shrink: 0; }
.f_grid .biz_type_item.active .icon_box { color: #3B82F6; box-shadow: 0 8px 16px rgba(59, 130, 246, 0.1); }
.f_grid .biz_type_item .label { font-size: 1.125rem; font-weight: 900; color: #1E293B; white-space: nowrap; }
.f_grid .biz_type_item img { width:24px; }

@media (max-width: 768px) {
    .f_grid.no_mobile_grid { grid-template-columns: 1fr 1fr!important; gap: 0.5rem!important; }
}

/* 스타일 선택 */
.style_tag_grid { display: flex; flex-wrap: wrap; gap: 8px; }
.style_tag_grid .style_tag { padding: 0.75rem 1.25rem; border-radius: 1rem; border: 2px solid #F1F5F9; font-size: 0.875rem; font-weight: 800; color: #64748B; transition: 0.2s; background: #fff; }
.style_tag_grid .style_tag.active { background: #3B82F6; border-color: #3B82F6; color: #fff; box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2); }

/* 업로드 존 */
.upload_zone { border: 3px dashed #E2E8F0; border-radius: 2rem; padding: 4rem 2rem; text-align: center; background: #F8FAFC; cursor: pointer; transition: 0.2s; }
.upload_zone:hover { background: #EFF6FF; border-color: #3B82F6; }
.upload_zone img { }
.upload_zone h4 { font-size: 1.25rem; font-weight: 900; color: #1E293B; margin-bottom: 0.5rem; }
.upload_zone p { font-size: 0.875rem; color: #94A3B8; font-weight: 700; }
.upload_zone .btn_primary_full { max-width:200px; margin:2rem auto 0; height:3rem; font-size:0.875rem; }

.preview_zone { display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }
.preview_zone .image_frame { position: relative; width: 100%; border-radius: 1.5rem; overflow: hidden; border: 1px solid #E2E8F0; box-shadow: 0 10px 20px rgba(0,0,0,0.05); aspect-ratio: 4/3; background: #F8FAFC; }
.preview_zone .image_frame img { width: 100%; height: 100%; object-fit: contain; }
.preview_zone .remove_img_btn { position: absolute; top: 1rem; right: 1rem; width: 2.5rem; height: 2.5rem; background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(4px); color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: 0.2s; }
.preview_zone .remove_img_btn:hover { background: #EF4444; transform: scale(1.1); }
.preview_zone .remove_img_btn .material-symbols-outlined { color:#fff; }
.preview_zone .file_info { width: 100%; background: #F8FAFC; border: 1px solid #E2E8F0; border-radius: 1rem; padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between; }
.preview_zone .file_info .name { font-size: 0.875rem; font-weight: 700; color: #475569; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; }
.preview_zone .file_info .re_upload { font-size: 0.8125rem; font-weight: 800; color: #3B82F6; text-decoration: underline; }

/* 모달 커스텀 */
.modal_overlay { position:fixed; inset:0; background:rgba(30, 27, 75, 0.4); backdrop-filter:blur(4px); z-index:1000; display:none; align-items:center; justify-content:center; padding:1rem; animation:fadeIn 0.3s ease-out; }
.modal_overlay.active { display:flex; }
.modal_overlay .modal_box { background:#fff; border-radius:2rem; max-width:70%; min-width:40%; padding:2.5rem; box-shadow:0 20px 50px rgba(0,0,0,0.15); animation:scaleIn 0.3s ease-out; position:relative; text-align:center; }
.modal_overlay .modal_box .modal_icon_circle { width: 4.5rem; height: 4.5rem; background: #3B82F6; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; margin: 0 auto 1.5rem; }
.modal_overlay .modal_box .modal_icon_circle img { width:40px; }
.modal_overlay .modal_box h3 { font-size:1.5rem; font-weight:900; margin-bottom:1rem; }
.modal_overlay .modal_box .modal_content { font-size:1rem; color:#64748B; line-height:1.6; margin-bottom:2.5rem; }

/* 기타 버튼 및 아이콘 */
.back_btn { width:2.5rem; height:2.5rem; background:#fff; border:1px solid #E2E8F0; border-radius:0.75rem; display:flex; align-items:center; justify-content:center; color:#475569; }

/* 알림 토스트 */
.toast { position:fixed; bottom:50px; left:50%; transform:translateX(-50%); background:#0F172A; color:#fff; padding:12px 24px; border-radius:30px; font-size:0.875rem; font-weight:700; z-index:2000; opacity:0; pointer-events:none; transition:0.3s; }
.toast.show { opacity:1; transform:translateX(-50%) translateY(-10px); }

/* 커스텀 체크박스 (Profile 스타일 이식) */
.chk_custom_v2 { appearance: none; -webkit-appearance: none; width: 1.125rem; height: 1.125rem; background-color: #fff; border: 1.5px solid #CBD5E1; border-radius: 0.375rem; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); position: relative; vertical-align: middle; outline: none; flex-shrink: 0; }
.chk_custom_v2.active { background-color: #3B82F6; border-color: #3B82F6; }
.chk_custom_v2.active::after { content: ''; width: 0.35rem; height: 0.2rem; border-left: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(-45deg); margin-bottom: 2px; }
/* 전체동의용 화이트 체크박스 */
.chk_custom_v2.white { background-color: transparent; border-color: rgba(255,255,255,0.4); }
.chk_custom_v2.white.active { background-color: #fff; border-color: #fff; }
.chk_custom_v2.white.active::after { border-left-color: #3B82F6; border-bottom-color: #3B82F6; }

.signup_card { min-width:auto; }

/* 반응형 미디어 쿼리 */
@media (max-width: 768px) {
    .login_container { padding:0; }
    .login_container #viewWrapper { min-width:auto; width:100%; }
    .login_container #viewWrapper .glass_card { width:90%; margin-left:5%; padding: 2.5rem 1.5rem; border-radius: 1.5rem; }
    .login_container #viewWrapper .signup_card { width:100%; margin:0; padding: 2rem 1.25rem; border-radius: 0; min-height: 100vh; }
    .login_container #viewWrapper .f_grid { grid-template-columns: 1fr !important; gap:0.5rem; }
    .login_container #viewWrapper .f_grid.biz_type_grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; }
    .login_container #viewWrapper .f_grid.biz_type_grid .biz_type_item { padding: 1rem 0.75rem; gap: 0.75rem; }
    .login_container #viewWrapper .f_grid.biz_type_grid .biz_type_item .icon_box { width: 2.5rem; height: 2.5rem; }
    .login_container #viewWrapper .f_grid.biz_type_grid .biz_type_item .label { font-size: 0.9375rem; }
    .login_container #viewWrapper .f_grid.address_grid { grid-template-columns: 1fr 1fr; gap: 0.5rem; }
    .login_container #viewWrapper .flex_row .side_btn { width: 90px; font-size: 0.75rem; }
    .modal_overlay .modal_box { max-width:90%; }
}