@charset "UTF-8";
/* =====================================================================
   login.css — 오픈렌탈 로그인 (파티클 스플래시)  [plen login.jsp 이식]
   - 외부 파티클 라이브러리 없음(자체 Canvas 엔진 — login.js)
   - plen 원본 CSS 를 그대로 옮기고, saas 추가분(회사식별자 필드·가입 카드)만 더함
   ===================================================================== */
:root{
  --blue:#0d8ae6; --indigo:#3d7bff; --vio:#7c3aed; --mag:#b429f9; --cyan:#22d3ee;
  --ink:#0f1222; --txt:#1c2230; --sub:#67748f; --line:#e5eaf6;
  --field:#eef1f8; --field-bd:#dfe4ef; --red:#c62839;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  font-family:var(--font-sans);
  background:
    radial-gradient(640px 420px at 16% 10%, rgba(0,169,255,.09), transparent 62%),
    radial-gradient(560px 400px at 86% 88%, rgba(180,41,249,.08), transparent 62%),
    radial-gradient(520px 380px at 88% 14%, rgba(124,58,237,.07), transparent 60%),
    linear-gradient(165deg,#fdfdff 0%,#f5f7fd 100%);
  color:var(--txt); position:relative; min-width:900px;
  overflow-x:hidden; overflow-y:auto;
}

/* ── 파티클 캔버스 (전체 배경) ── */
#pjs{position:fixed; inset:0; z-index:1; display:block}

/* ── 중앙 스테이지 : 로고 → 태그라인 → 카드 ── */
.stage{position:relative; z-index:5; min-height:100%; pointer-events:none;
  display:flex; flex-direction:column; align-items:center; justify-content:center; padding:40px 0}
/* 카드(및 카드 밖 인터랙티브 요소)만 클릭 가능. 그 외 빈 영역 클릭은 캔버스로 투과된다. */
.stage .card,
.stage a, .stage button, .stage input, .stage label{pointer-events:auto}

/* ── 로고 (SVG + 워드마크) ── */
.brandwrap{display:flex; align-items:center; justify-content:center; margin-bottom:8px}
.logo-fb{display:flex; align-items:center; gap:14px}
.logo-fb svg{width:58px; height:58px}
.logo-fb .wm{font-size:30px; font-weight:900; letter-spacing:-1.2px; line-height:1.05; color:var(--ink)}
.tagline{font-size:13.5px; font-weight:600; letter-spacing:.4px; color:#5f6b85; margin:10px 0 26px; text-align:center}

/* ── 로그인 카드 ── */
.card{width:380px; display:flex; flex-direction:column;
  background:rgba(255,255,255,.92); border:1px solid var(--line);
  border-radius:16px; padding:34px 34px 24px;
  box-shadow:0 24px 60px rgba(40,60,110,.14), 0 2px 8px rgba(40,60,110,.06);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px)}
.form{display:flex; flex-direction:column; gap:10px}
.field{width:100%; height:48px; border:1px solid var(--field-bd); background:var(--field);
  border-radius:8px; padding:0 15px; font-size:15px; color:var(--txt); transition:.15s;
  font-family:inherit}
/* 플레이스홀더는 입력값·라벨보다 밝게 유지 → '이미 입력됨' 오인 방지 */
.field::placeholder{color:#7b8298}
.field:focus{outline:none; background:#fff; border-color:#4b6cf5; box-shadow:0 0 0 3px rgba(75,108,245,.45)}
.field.err{border-color:var(--red); box-shadow:0 0 0 3px rgba(198,40,57,.18)}
/* 인라인 오류 메시지 — 표시/비표시 간 높이 변화 0 (visibility 토글) → 버튼이 밀리지 않는다.
   ★min-height 24px = padding-top 6 + line-height 18. 바꾸면 연타 시 오클릭 발생(plen 실측) */
.msg{min-height:24px; font-size:12px; color:var(--red); font-weight:600; padding:6px 2px 0;
  display:block; visibility:hidden}
.msg.show{visibility:visible}
.msg.show::before{content:"\26A0\00A0"}
.msg.ok{color:#0f9d58}
.msg.ok.show::before{content:"\2713\00A0"}
.remember{display:flex; align-items:center; gap:8px; margin:8px 2px 0; user-select:none}
.remember input{width:16px; height:16px; accent-color:#6d3ae0; cursor:pointer; margin:0}
.remember label{font-size:13px; color:#5b6273; cursor:pointer; margin:0; font-weight:400}
.btn-login{margin-top:22px; width:100%; height:52px; border:none; border-radius:8px;
  background:linear-gradient(95deg,var(--blue),var(--vio) 55%,var(--mag));
  background-size:170% 100%; color:#fff; font-size:15.5px; font-weight:800; letter-spacing:.5px;
  cursor:pointer; transition:.22s; box-shadow:0 10px 26px rgba(124,58,237,.28);
  font-family:inherit}
.btn-login:hover{background-position:90% 0; transform:translateY(-1px); box-shadow:0 14px 30px rgba(124,58,237,.4)}
.btn-login:active{transform:translateY(1px)}
.btn-login:disabled{opacity:.65; cursor:default; transform:none}
.link-row{margin-top:16px; text-align:center; font-size:13px}
.link-row a{color:#2f5fe0; font-weight:600; text-decoration:underline; cursor:pointer}
.foot{text-align:center; margin-top:30px; font-size:12.5px; color:#6b7280; line-height:1.9}
.foot b{color:#4b5563; font-weight:700}
@keyframes shake{10%,90%{transform:translateX(-1px)}20%,80%{transform:translateX(2px)}30%,50%,70%{transform:translateX(-4px)}40%,60%{transform:translateX(4px)}}
.shake{animation:shake .4s}
@media (prefers-reduced-motion: reduce){
  .shake{animation:none}
  .field{transition:none}
  .btn-login{transition:none}
  .btn-login:hover{transform:none}
}

/* ── [saas 추가] 가입 카드 ── */
#pane-signup{display:none}
#pane-signup .form{gap:9px}
#pane-signup .field{height:44px; font-size:14px}
.field-hint{font-size:11.5px; color:#8590a6; padding:0 2px}