/* ═══ login.css ══════════════════════════════════ * 로그인 / 회원가입 / 비밀번호 재설정 레이아웃 및 컴포넌트 * 스플릿 패널: 브랜드 패널(좌) + 폼 패널(우) * ════════════════════════════════════════════════ */ /* ─── 변수 ───────────────────────────────────── */ :root { --login-primary: #000000; --login-primary-hover: #333333; --login-primary-glow: rgba(0, 0, 0, 0.15); --login-brand-bg: #0b0d17; --login-form-bg: #f1f5f9; --login-card-bg: #ffffff; --login-text: #1e1b4b; --login-text-muted: #64748b; --login-border: #e2e8f0; --login-input-border: #cbd5e1; --login-danger: #dc2626; --login-success: #16a34a; --login-radius: 14px; --login-shadow: 0 4px 28px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04); } /* ─── 로그인 섹션 레이아웃 ───────────────────── * 기본 숨김 — FOUC 방지 (head 의 sync 스크립트가 를 세팅한 뒤 * data-auth="out" 일 때만 로그인 표시, "in" 일 때는 포털 표시). * 인증 상태 확인 후 JS 가 명시적으로 display:flex 를 설정하면 이 규칙을 덮어씀. * ─────────────────────────────────────────── */ #loginSection { display: none; min-height: 100vh; } html[data-auth="out"] #loginSection { display: flex; } /* ─── 브랜드 패널 (좌측) ─────────────────────── */ .login-brand { flex: 0 0 42%; background: var(--login-brand-bg); position: relative; overflow: hidden; display: flex; align-items: center; padding: 64px 56px; } /* 도트 그리드 패턴 */ .login-brand::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(255,255,255,0.05) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; } /* 우측 경계 페이드 */ .login-brand::after { content: ''; position: absolute; top: 0; right: 0; width: 80px; height: 100%; background: linear-gradient(to right, transparent, rgba(11,13,23,0.6)); pointer-events: none; } /* 인디고 글로우 오브 */ .login-brand__glow { position: absolute; bottom: -120px; right: -80px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.05) 45%, transparent 70%); pointer-events: none; animation: login-glow-pulse 4s ease-in-out infinite; } @keyframes login-glow-pulse { 0%, 100% { opacity: 0.8; transform: scale(1); } 50% { opacity: 1; transform: scale(1.08); } } .login-brand__content { position: relative; z-index: 1; } .login-brand__mark { width: 44px; height: 44px; margin-bottom: 44px; display: block; } .login-brand__mark svg { width: 100%; height: 100%; display: block; } .login-brand__headline { font-size: 2.875rem; font-weight: 900; color: #ffffff; line-height: 1.1; letter-spacing: -0.035em; margin: 0 0 20px; } .login-brand__tagline { font-size: 0.9375rem; color: rgba(255, 255, 255, 0.5); line-height: 1.75; margin: 0 0 44px; } .login-brand__features { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 13px; } .login-brand__feature { display: flex; align-items: center; gap: 11px; font-size: 0.875rem; color: rgba(255, 255, 255, 0.55); letter-spacing: 0.01em; } .login-brand__feature::before { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #000000; flex-shrink: 0; box-shadow: 0 0 6px rgba(0, 0, 0, 0.6); } /* ─── 폼 패널 (우측) ─────────────────────────── */ .login-forms { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--login-form-bg); min-height: 100vh; overflow-y: auto; padding: 40px 24px; } /* ─── 래퍼 (하위 호환) ───────────────────────── */ .login-wrapper { width: 100%; max-width: 420px; } /* ─── 뷰 전환 ────────────────────────────────── */ .login-view { display: none; width: 100%; max-width: 420px; } .login-view.active { display: block; } /* ─── 카드 ───────────────────────────────────── */ .login-card { width: 100%; background: var(--login-card-bg); border-radius: var(--login-radius); box-shadow: var(--login-shadow); padding: 44px 40px; border: 1px solid rgba(0, 0, 0, 0.04); } /* ─── 카드 헤더 ──────────────────────────────── */ .login-card__logo { margin-bottom: 30px; } .login-card__logo-icon { width: 46px; height: 46px; background: var(--login-primary); border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 18px; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25); } .login-card__logo-icon svg { width: 22px; height: 22px; fill: #fff; } .login-card__title { font-size: 1.5rem; font-weight: 700; color: var(--login-text); margin: 0 0 5px; letter-spacing: -0.025em; } .login-card__subtitle { font-size: 0.875rem; color: var(--login-text-muted); margin: 0; } /* ─── 폼 필드 ────────────────────────────────── */ .login-field { margin-bottom: 16px; } .login-field__label { display: block; font-size: 0.8125rem; font-weight: 600; color: #374151; margin-bottom: 7px; letter-spacing: 0.005em; } .login-field__input-group { display: flex; align-items: stretch; border: 1.5px solid var(--login-input-border); border-radius: 9px; overflow: hidden; background: #fff; transition: border-color 0.18s ease, box-shadow 0.18s ease; } .login-field__input-group:focus-within { box-shadow: 0 0 0 3px var(--login-primary-glow); } .login-field__icon { display: flex; align-items: center; justify-content: center; width: 40px; flex-shrink: 0; color: #9ca3af; border-right: 1.5px solid var(--login-border); background: #fafafa; } .login-field__icon svg { width: 16px; height: 16px; fill: currentColor; } .login-field__input { flex: 1; border: none; padding: 11px 13px; font-size: 0.9375rem; outline: none; background: transparent; color: var(--login-text); font-family: inherit; min-width: 0; } .login-field__input::placeholder { color: #b0bec5; font-size: 0.875rem; } .login-field__toggle { display: flex; align-items: center; justify-content: center; width: 42px; flex-shrink: 0; background: none; border: none; color: #9ca3af; cursor: pointer; transition: color 0.15s; } .login-field__toggle:hover { color: var(--login-text); } .login-field__toggle svg { width: 16px; height: 16px; fill: currentColor; } /* ─── 알럿 ───────────────────────────────────── */ .login-alert { display: none; padding: 10px 14px; border-radius: 8px; font-size: 0.8125rem; margin-bottom: 14px; align-items: center; gap: 8px; } .login-alert.visible { display: flex; } .login-alert--error { background: #fef2f2; color: var(--login-danger); border: 1px solid #fecaca; } .login-alert--success { background: #f0fdf4; color: var(--login-success); border: 1px solid #bbf7d0; } .login-alert--info { background: #eff6ff; color: #2563eb; border: 1px solid #bfdbfe; } .login-alert svg { width: 15px; height: 15px; fill: currentColor; flex-shrink: 0; } /* ─── 로그인 버튼 ─────────────────────────────── */ .login-btn { width: 100%; padding: 12px; border: none; border-radius: 9px; font-size: 0.9375rem; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.18s ease, box-shadow 0.18s ease, transform 0.12s ease; font-family: inherit; letter-spacing: 0.01em; } .login-btn--primary { background: var(--login-primary); color: #fff; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .login-btn--primary:hover { background: var(--login-primary-hover); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.28); transform: translateY(-1px); } .login-btn--primary:active { transform: translateY(0); } .login-btn--primary:disabled { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; } .login-btn__spinner { display: none; width: 17px; height: 17px; border: 2px solid rgba(255, 255, 255, 0.3); border-top-color: #fff; border-radius: 50%; animation: login-spin 0.6s linear infinite; } .login-btn--loading .login-btn__spinner { display: block; } @keyframes login-spin { to { transform: rotate(360deg); } } /* ─── 로그인 상태 유지 ───────────────────────── */ .login-remember { display: flex; align-items: center; gap: 8px; margin-top: 14px; } .login-remember__checkbox { width: 15px; height: 15px; accent-color: var(--login-primary); cursor: pointer; } .login-remember__label { font-size: 0.8125rem; color: var(--login-text-muted); cursor: pointer; } /* ─── 구분선 ─────────────────────────────────── */ .login-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--login-text-muted); font-size: 0.75rem; } .login-divider::before, .login-divider::after { content: ''; flex: 1; height: 1px; background: var(--login-border); } /* ─── SNS 로그인 ─────────────────────────────── */ .login-sns { display: flex; flex-direction: column; gap: 10px; } .login-sns__btn { width: 100%; padding: 10px 14px; border: 1.5px solid var(--login-border); border-radius: 9px; font-size: 0.875rem; font-weight: 500; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: background 0.15s, border-color 0.15s; background: #fff; color: var(--login-text); text-decoration: none; font-family: inherit; } .login-sns__btn:hover { background: #f8fafc; border-color: #cbd5e1; } .login-sns__btn svg { width: 18px; height: 18px; } /* ─── 하단 링크 ──────────────────────────────── */ .login-footer { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--login-border); display: flex; justify-content: center; align-items: center; gap: 8px; flex-wrap: wrap; } .login-footer__link { font-size: 0.8125rem; color: var(--login-text-muted); text-decoration: none; cursor: pointer; transition: color 0.15s; } .login-footer__link:hover { color: var(--login-primary); } .login-footer__sep { color: var(--login-border); font-size: 0.8125rem; } /* ─── 비밀번호 강도 ──────────────────────────── */ .password-strength { margin-top: 8px; } .password-strength__bar { height: 3px; background: #e9ecef; border-radius: 2px; overflow: hidden; margin-bottom: 6px; } .password-strength__fill { height: 100%; width: 0; border-radius: 2px; transition: width 0.3s, background 0.3s; } .password-strength__checks { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.6875rem; color: var(--login-text-muted); } .password-strength__check--pass { color: var(--login-success); } .password-strength__check--fail { color: var(--login-danger); } /* ─── 로딩 오버레이 ──────────────────────────── */ .login-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(11, 13, 23, 0.82); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); align-items: center; justify-content: center; flex-direction: column; color: #fff; gap: 18px; } .login-overlay.visible { display: flex; } .login-overlay__spinner { width: 44px; height: 44px; border: 2.5px solid rgba(255, 255, 255, 0.15); border-top-color: #000000; border-radius: 50%; animation: login-spin 0.7s linear infinite; } .login-overlay__text { font-size: 0.9375rem; font-weight: 500; letter-spacing: 0.03em; opacity: 0.75; } /* ─── 시스템 초기 설정 ───────────────────────── */ .login-info { font-size: 0.875rem; color: var(--login-text-muted); text-align: center; margin: 0 0 16px; line-height: 1.6; } .login-info--success { color: var(--login-success); font-weight: 600; } .login-info--error { color: var(--login-danger); font-weight: 500; } .login-init-steps { display: flex; flex-direction: column; gap: 12px; margin: 16px 0; } .login-init-step { display: flex; align-items: center; gap: 10px; padding: 10px 14px; background: #f8fafc; border: 1px solid var(--login-border); border-radius: 8px; font-size: 0.875rem; } .login-init-step__icon { font-size: 18px; min-width: 24px; text-align: center; } .login-init-done { text-align: center; margin-top: 20px; } .login-init-done .login-btn { margin-top: 12px; } /* ─── 반응형 ─────────────────────────────────── */ @media (max-width: 900px) { .login-brand { display: none; } .login-forms { background: var(--login-brand-bg); } .login-card { border: none; box-shadow: 0 8px 40px rgba(0, 0, 0, 0.28); } } @media (max-width: 540px) { .login-forms { padding: 0; align-items: stretch; justify-content: flex-start; background: #fff; } .login-view { max-width: 100%; } .login-card { box-shadow: none; border-radius: 0; padding: 32px 20px; border: none; } .login-footer { flex-direction: column; align-items: center; gap: 4px; } .login-footer__sep { display: none; } }