/* ===================================================== * landing-auth-modal.css v0.9.4.9 (extracted from src/index.tsx) * Auth modals + landing-wide shared utilities (industry * marquee, stats compact font sizing). * ===================================================== */ /* ══════════════════════════════════════════════ Industry Marquee — 업종 카드 1줄 고정 무한 가로 스크롤 PC / Tablet / Mobile 모두 동일한 마퀴 애니메이션 적용. track 안의 .ind-pill 항목은 2회 복제되어 있어 translateX(-50%) 로 끊김 없는 루프 구현. ══════════════════════════════════════════════ */ .ind-marquee{position:relative;width:100%;overflow:hidden;mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%)} .ind-marquee-track{display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:0;width:max-content;animation:indScroll 40s linear infinite;will-change:transform} .ind-marquee-track:hover{animation-play-state:paused} .ind-pill{display:inline-flex;align-items:center;gap:8px;flex-shrink:0;margin-right:14px;padding:7px 14px;border-radius:9999px;font-size:13px;font-weight:700;letter-spacing:-0.01em;color:rgba(255,255,255,0.4);background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);white-space:nowrap;transition:all 0.3s ease} /* 모바일은 애니메이션 속도를 살짝 빠르게 + pill 크기 축소 */ @media (max-width: 640px){ .ind-marquee-track{animation-duration:32s} .ind-pill{margin-right:10px;padding:5px 11px;font-size:12px} } @keyframes indScroll{ from{transform:translateX(0)} to{transform:translateX(-50%)} } /* Stats Unified overflow 방지 로직은 landing-a.css / landing-b.css 에서 2×2 그리드 전환으로 근본 해결됨 (v0.9.5.1). */ @keyframes authSlideUp{from{transform:translateY(24px) scale(0.97);opacity:0}to{transform:translateY(0) scale(1);opacity:1}} .auth-dark-input{width:100%;padding:12px 16px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);border-radius:12px;font-size:14px;color:#fff;font-family:inherit;transition:all 0.3s ease;outline:none} .auth-dark-input::placeholder{color:rgba(255,255,255,0.25)} .auth-dark-input:focus{border-color:rgba(96,165,250,0.5);box-shadow:0 0 0 3px rgba(96,165,250,0.1);background:rgba(255,255,255,0.06)} .auth-dark-btn-primary{padding:12px 24px;background:linear-gradient(135deg,#3B82F6,#2563EB);color:#fff;font-size:14px;font-weight:700;border-radius:12px;border:none;cursor:pointer;font-family:inherit;transition:all 0.3s ease;box-shadow:0 4px 14px rgba(37,99,235,0.35)} .auth-dark-btn-primary:hover{background:linear-gradient(135deg,#2563EB,#1D4ED8);box-shadow:0 6px 20px rgba(37,99,235,0.45)} .auth-dark-btn-primary:active{transform:scale(0.97)} .auth-dark-btn-primary:disabled{opacity:0.5;cursor:not-allowed} .auth-dark-btn-sm{padding:8px 14px;background:rgba(96,165,250,0.15);color:#60A5FA;font-size:12px;font-weight:700;border-radius:10px;border:1px solid rgba(96,165,250,0.2);cursor:pointer;font-family:inherit;transition:all 0.3s ease;white-space:nowrap} .auth-dark-btn-sm:hover{background:rgba(96,165,250,0.25);border-color:rgba(96,165,250,0.4)} .auth-dark-btn-sm:disabled{opacity:0.5;cursor:not-allowed} /* URL input — prefix box visually separated from input field */ .url-wrap{display:flex;align-items:stretch;border-radius:12px;overflow:hidden;transition:all 0.3s ease;width:100%;box-sizing:border-box} .url-prefix{display:flex;align-items:center;padding:0 12px;font-size:13px;font-weight:600;white-space:nowrap;flex-shrink:0;border-right:1px solid} .url-field{flex:1;padding:11px 12px;background:transparent;border:none;font-size:14px;font-family:inherit;outline:none;min-width:0;width:0} /* Hero variant — white bg, black text, keyword.chat-style glow */ .url-wrap--hero{background:#fff;border:2px solid rgba(0,0,0,0.08);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,0.08);overflow:hidden;width:100%;max-width:100%} .url-wrap--hero:focus-within{border-color:#6366f1;box-shadow:0 8px 40px rgba(99,102,241,0.35),0 0 0 1px rgba(99,102,241,0.15)} .url-prefix--hero{background:#f1f5f9;border-right-color:#e2e8f0;color:#64748b;font-size:14px;padding:0 14px;flex-shrink:0} .url-field--hero{color:#0f172a;font-size:15px;padding:13px 14px;min-width:0;width:0;flex:1} .url-field--hero::placeholder{color:#94a3b8} /* Dark variant — register modal, same pattern */ .url-wrap--dark{background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1)} .url-wrap--dark:focus-within{border-color:#6366f1;box-shadow:0 6px 32px rgba(99,102,241,0.25),0 0 0 1px rgba(99,102,241,0.1)} .url-prefix--dark{background:rgba(255,255,255,0.05);border-right-color:rgba(255,255,255,0.08);color:rgba(255,255,255,0.35)} .url-field--dark{color:#fff} .url-field--dark::placeholder{color:rgba(255,255,255,0.25)} /* ══════════════════════════════════════════════ Prefix Input (Auth Modal): label-less 입력폼 - 좌측 prefix 라벨 + 우측 transparent input 결합 - 필수 입력은 prefix 우상단 빨간 점으로 표시 ══════════════════════════════════════════════ */ .input-pf{display:flex;align-items:stretch;width:100%;border-radius:12px;overflow:hidden;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.1);transition:all 0.3s ease;box-sizing:border-box} .input-pf:focus-within{border-color:rgba(96,165,250,0.5);box-shadow:0 0 0 3px rgba(96,165,250,0.1);background:rgba(255,255,255,0.06)} .input-pf-prefix{position:relative;display:flex;align-items:center;justify-content:center;padding:0 12px;font-size:13px;font-weight:700;white-space:nowrap;flex-shrink:0;background:rgba(255,255,255,0.05);border-right:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.55);user-select:none;width:84px;min-width:84px;box-sizing:border-box} .input-pf-prefix--required::after{content:'';position:absolute;top:8px;right:8px;width:5px;height:5px;border-radius:50%;background:#f87171;box-shadow:0 0 6px rgba(248,113,113,0.5)} .input-pf-input{flex:1;min-width:0;width:0;padding:12px 14px;background:transparent;border:none;font-size:14px;font-family:inherit;outline:none;color:#fff} .input-pf-input::placeholder{color:rgba(255,255,255,0.25)} /* 인증 버튼이 옆에 붙는 경우의 row wrapper */ .input-pf-row{display:flex;gap:8px;align-items:stretch} .input-pf-row > .input-pf{flex:1;min-width:0} /* 모바일에서는 prefix 폭 약간 축소 */ @media (max-width: 480px){ .input-pf-prefix{width:74px;min-width:74px;padding:0 10px;font-size:12.5px} } /* ══════════════════════════════════════════════ Phone Input (v0.9.5.x rev2): 휴대폰 prefix + 010 고정 + 4-4 자동 분할 ────────────────────────────────────────────── 구조: .input-pf.input-pf-phone (flex row) ├─ .input-pf-prefix.input-pf-prefix--required ("휴대폰") └─ .phone-fmt-wrap (relative wrapper, flex:1) ├─ .phone-fixed-010 (absolute, 좌측 고정 "010") └─ input.phone-fmt-input (padding-left 로 010 자리 양보) 이전 구조는 .input-pf 의 align-items:stretch + 별도 span 으로 구현해 prefix 영역과 010 영역이 시각적으로 분리되지 않아 오류 발생 → wrapper + absolute overlay 로 견고하게 재작성. ══════════════════════════════════════════════ */ .input-pf-phone{align-items:stretch} .input-pf-phone .phone-fmt-wrap{ position:relative; flex:1; min-width:0; display:flex; align-items:stretch; } .input-pf-phone .phone-fixed-010{ position:absolute; left:14px; top:50%; transform:translateY(-50%); pointer-events:none; user-select:none; font-size:14px; font-weight:700; letter-spacing:0.5px; color:rgba(255,255,255,0.92); font-variant-numeric:tabular-nums; z-index:1; /* 시각적 구분선 */ padding-right:8px; } .input-pf-phone .phone-fixed-010::after{ content:''; position:absolute; right:0; top:50%; width:1px; height:14px; background:rgba(255,255,255,0.15); transform:translateY(-50%); } .input-pf-phone .phone-fmt-input{ width:100%; padding-left:60px; /* 010 + 구분선 자리 양보 */ font-variant-numeric:tabular-nums; letter-spacing:1.5px; font-size:15px; font-weight:600; } .input-pf-phone .phone-fmt-input::placeholder{ letter-spacing:1.5px; color:rgba(255,255,255,0.22); font-weight:500; } @media (max-width: 480px){ .input-pf-phone .phone-fixed-010{left:12px;font-size:13px} .input-pf-phone .phone-fmt-input{padding-left:54px;font-size:14px;letter-spacing:1px} .input-pf-phone .phone-fmt-input::placeholder{letter-spacing:1px} } /* ══════════════════════════════════════════════ Auth Modal Width Tokens (v0.9.5.7) ────────────────────────────────────────────── 모달 가로폭은 여기서만 조정합니다. TSX 의 max-w-[XXXpx] Tailwind 클래스 대신 ID 선택자를 사용해서, 정적 파일 수정만으로 워커 빌드 없이 `npm run deploy:fast` 배포 가능. 픽셀 한 개 조정하려고 1.13MB 워커 번들 재빌드하던 비효율 제거 (사용자 피드백 기반). ══════════════════════════════════════════════ */ /* v0.9.5.8 — modal widths enlarged ~20% (user feedback Task 11) */ #login-modal { max-width: 432px; } #register-modal { max-width: 468px; } #find-account-modal{ max-width: 444px; } @media (max-width: 480px){ #login-modal, #register-modal, #find-account-modal { max-width: 100%; } } /* ══════════════════════════════════════════════ Auth Modal Layout Tokens (v0.9.5.12 — Phase 5) ────────────────────────────────────────────── 반복되는 인라인 style/onmouseover 를 클래스로 통합. 모달 카드/오버레이/구분선/서브타이틀/닫기버튼 톤 조정을 이 파일 한 곳에서만 하면 fast-deploy 로 바로 반영 가능. ══════════════════════════════════════════════ */ /* 카드 (auth + find-account 모달의 본체 박스) */ .auth-modal-card{ background:#0F1724; border:1px solid rgba(255,255,255,0.08); animation:authSlideUp 0.3s ease; } /* 오버레이 (z-index 는 ID 별 설정 그대로 유지) */ .auth-modal-overlay{ background:rgba(0,0,0,0.7); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .auth-modal-overlay--strong{ background:rgba(0,0,0,0.75); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); } /* 모달 헤더/푸터 구분선 */ .auth-modal-divider-bottom{ border-bottom:1px solid rgba(255,255,255,0.06); } .auth-modal-divider-top { border-top:1px solid rgba(255,255,255,0.06); } /* 서브타이틀 색상 (헤더 아래 작은 설명) */ .auth-modal-subtitle{ color:rgba(255,255,255,0.45); } .auth-modal-subtitle-dim{ color:rgba(255,255,255,0.4); } /* 닫기 버튼 — onmouseover/onmouseout 인라인 핸들러 대체 */ .auth-modal-close{ color:rgba(255,255,255,0.35); background:transparent; transition: color .15s ease, background .15s ease; } .auth-modal-close:hover{ color:rgba(255,255,255,0.7); background:rgba(255,255,255,0.06); }