/* ===================================================================== 인증 화면 공용 디자인 (로그인·회원가입·아이디/비밀번호 찾기) — BYB 룩 --------------------------------------------------------------------- - .authb-* 클래스 전용. 각 인증 화면 에서만 로 로드한다 (user_head 전역 로드 아님) → body 규칙 포함해도 다른 화면 무영향. - 브랜드색: 아파트링크 로고색 #2A66D8. ===================================================================== */ html, body { margin: 0; } body { background: #F4F5F7; font-family: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif; color: #1B1C1E; } /* default.css 의 폰 프레임(그림자/흰배경) 제거 — 인증 화면은 풀블리드 */ #wrap, #wrap .container { max-width: 480px; margin: 0 auto; background: transparent; box-shadow: none; min-height: 0; } .authb-page { max-width: 480px; margin: 0 auto; min-height: 100vh; padding: 0 22px 40px; box-sizing: border-box; } .authb-page * { box-sizing: border-box; } /* ── 상단 뒤로가기 바 ── */ .authb-bar { height: 52px; display: flex; align-items: center; margin: 0 -8px; } .authb-bar a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; } .authb-bar img { height: 20px; width: auto; } /* ── 로고 + 헤딩 (로그인/가입) ── */ .authb-top { text-align: center; padding: 40px 2px 8px; } .authb-logo { height: 84px; width: auto; display: block; margin: 0 auto 20px; } .authb-hi { font-size: 22px; font-weight: 800; color: #1B1C1E; letter-spacing: -.02em; line-height: 1.35; margin: 0; } .authb-sub { font-size: 14px; color: #8A9099; margin: 7px 0 0; line-height: 1.55; } /* ── 페이지 제목 (찾기 화면 등) ── */ .authb-title { font-size: 21px; font-weight: 800; color: #1B1C1E; letter-spacing: -.02em; margin: 8px 0 6px; } .authb-desc { font-size: 14px; color: #8A9099; margin: 0; line-height: 1.6; } /* ── 세그먼트 탭 (아이디/비밀번호 찾기 전환) ── */ .authb-tabs { display: flex; background: #EDEFF3; border-radius: 12px; padding: 4px; margin: 6px 0 24px; } .authb-tabs a { flex: 1; text-align: center; height: 42px; line-height: 42px; border-radius: 9px; font-size: 14.5px; font-weight: 600; color: #8A9099; text-decoration: none; } .authb-tabs a.on { background: #fff; color: #1B1C1E; font-weight: 700; box-shadow: 0 1px 3px rgba(20,30,50,.08); } /* ── 폼 필드 ── */ .authb-form { margin-top: 26px; } .authb-field { margin-bottom: 15px; } .authb-field > label { display: block; font-size: 13px; font-weight: 600; color: #4B5159; margin-bottom: 7px; } .authb-field .hint { font-size: 12px; color: #A6ACB4; margin: 6px 2px 0; line-height: 1.5; } .authb-input { width: 100%; height: 52px; border: 1px solid #E3E6EA; border-radius: 12px; padding: 0 16px; font-size: 15px; background: #fff; -webkit-appearance: none; appearance: none; transition: border-color .12s, box-shadow .12s; font-family: inherit; } .authb-input::placeholder { color: #B6BBC2; } .authb-input:focus { outline: none; border-color: #2A66D8; box-shadow: 0 0 0 3px rgba(42,102,216,.12); } .authb-input:disabled { background: #F4F5F7; color: #9AA0A8; } textarea.authb-input { height: auto; padding: 14px 16px; line-height: 1.6; } .authb-row { display: flex; gap: 10px; } .authb-row > * { flex: 1; } /* select 화살표 */ select.authb-input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%238A9099' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 42px; } /* ── 버튼 ── */ .authb-btn { display: block; width: 100%; height: 54px; border: none; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; margin-top: 22px; background: #2A66D8; color: #fff; text-align: center; line-height: 54px; text-decoration: none; font-family: inherit; transition: background .12s, opacity .12s; } .authb-btn:active { background: #1e57c2; } .authb-btn:disabled, .authb-btn.loading { opacity: .55; cursor: default; } .authb-btn-ghost { background: #EEF1F5; color: #4B5159; } .authb-btn-ghost:active { background: #E2E6EC; } /* 로그인 게이트(유효 입력 전 회색) — login.js 가 .active 토글 */ .authb-btn.gate { background: #E9EBEF; color: #AEB4BC; } .authb-btn.gate.active { background: #2A66D8; color: #fff; } /* ── 카카오 ── */ .authb-kakao { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; height: 52px; margin-top: 12px; background: #FEE500; color: #191600; border-radius: 12px; font-weight: 700; text-decoration: none; font-size: 15px; } /* ── 하단 링크 ── */ .authb-links { display: flex; align-items: center; justify-content: center; margin-top: 26px; } .authb-links a { font-size: 13.5px; color: #5A616A; padding: 0 16px; text-decoration: none; font-weight: 500; } .authb-links .sep { width: 1px; height: 12px; background: #DDE1E6; } /* ── 메시지 ── */ .authb-err { color: #F0484A; font-size: 13px; margin: 8px 2px 0; line-height: 1.5; white-space: pre-line; } .authb-ok { color: #12A85B; font-size: 13px; margin: 8px 2px 0; line-height: 1.5; } /* ── 아이디 찾기 결과 ── */ .authb-result { margin-top: 22px; padding: 20px 16px; border-radius: 14px; background: #EEF4FF; text-align: center; } .authb-result .r-label { font-size: 13px; color: #5A616A; margin-bottom: 6px; } .authb-result .r-value { font-size: 18px; font-weight: 800; color: #2A66D8; word-break: break-all; line-height: 1.5; } /* ── 완료(성공) ── */ .authb-done { text-align: center; padding: 44px 0 8px; } .authb-done .chk { width: 64px; height: 64px; border-radius: 50%; background: #E7F7EE; color: #12A85B; font-size: 32px; display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; } .authb-done .d-title { font-size: 19px; font-weight: 800; margin: 0 0 6px; } .authb-done .d-sub { font-size: 14px; color: #8A9099; } /* ── 스텝(비밀번호 찾기 다단계) ── */ .authb-step { display: none; } .authb-step.active { display: block; } /* ── 섹션 구분 (회원가입) ── */ .authb-sec-title { font-size: 14px; font-weight: 800; color: #8A9099; margin: 26px 2px 12px; } .authb-req { color: #F0484A; margin-left: 2px; }