/* 로그인 화면 — Figma "하이브파트너스 로그인"(데스크톱 1920 / 모바일 390).
   테마색은 brand.js 가 --navy/--on-navy 변수로 넣어 주므로 왼쪽 패널·버튼·포커스가 도메인 색을 따른다. */
html,body{height:auto;min-height:100%}
body{margin:0;background:#fff url(/img/login/bg.png) center/cover no-repeat fixed;color:#111;
  font-family:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI','Malgun Gothic','맑은 고딕',sans-serif}

.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:56px 24px}
.lg-card{width:100%;max-width:1500px;height:calc(100vh - 112px);min-height:620px;max-height:860px;display:flex;gap:40px;padding:20px;
  border:1px solid #e7e9ec;border-radius:20px;background:rgba(255,255,255,.4)}

/* 왼쪽: 테마색 패널 + 이미지 30% */
.lg-panel{position:relative;flex:0 0 min(749px,52.7%);overflow:hidden;border-radius:20px;padding:60px 40px;
  background:var(--navy);color:var(--on-navy)}
.lg-panel::before{content:"";position:absolute;inset:0;background:url(/img/login/art.webp) center/cover no-repeat;opacity:.3;pointer-events:none}
.lg-title{position:relative;margin-top:clamp(40px,17vh,160px);font-size:52px;line-height:1.3;letter-spacing:-1.56px;text-transform:uppercase;overflow-wrap:anywhere;word-break:keep-all}
.lg-title b{display:block;font-weight:700}
.lg-title span{display:block;font-weight:400}

/* 오른쪽: 폼 */
.lg-form{flex:1 1 0;min-width:0;display:flex;align-items:center;justify-content:center}
.lg-box{width:100%;max-width:420px;display:flex;flex-direction:column;gap:40px}
.lg-head{display:flex;flex-direction:column;gap:15px}
.lg-brand{display:flex;align-items:center;gap:10px;min-height:60px}
.lg-brand .blogo{width:auto;height:60px;max-width:220px;object-fit:contain}
.lg-brand .logo{width:44px;height:44px;font-size:22px;border-radius:12px}
.lg-brand h1{margin:0;font-size:22px;font-weight:700;letter-spacing:-.5px}
.lg-sub{margin:0;font-size:14px;line-height:1.3;letter-spacing:-.42px;color:#5b6672}
.lg-fields{display:flex;flex-direction:column;gap:20px}
.f{display:flex;flex-direction:column;gap:10px}
.f label{font-size:14px;font-weight:500;line-height:1.3;letter-spacing:-.42px;color:#111}
.in{width:100%;height:52px;padding:0 18px;border:1px solid #e7e9ec;border-radius:10px;background:rgba(255,255,255,.7);
  font:inherit;font-size:15px;letter-spacing:-.45px;color:#111}
.in::placeholder{color:var(--ph)}
.in:focus{outline:none;border-color:var(--navy);background:#fff;box-shadow:0 0 0 3px var(--ring)}
.pw{position:relative}
.pw .in{padding-right:56px}
.eye{position:absolute;top:4px;right:4px;width:44px;height:44px;border:0;padding:0;border-radius:8px;cursor:pointer;
  background:transparent url(/img/login/eye.svg) center/24px 24px no-repeat}
.eye.on{background-image:url(/img/login/eye-off.svg)}
.eye:focus-visible{outline:2px solid var(--navy)}
.chk{display:flex;align-items:center;gap:5px;min-height:44px;font-size:14px;letter-spacing:-.42px;color:#111;cursor:pointer;width:max-content}
.chk input{appearance:none;-webkit-appearance:none;flex:none;width:18px;height:18px;margin:0;border:1px solid #8a939c;border-radius:4px;background:#fff;cursor:pointer;display:grid;place-items:center}
.chk input:checked{background:var(--navy);border-color:var(--navy)}
.chk input:checked::after{content:"";width:5px;height:9px;margin-top:-2px;border:solid var(--on-navy);border-width:0 2px 2px 0;transform:rotate(45deg)}
.chk input:focus-visible{outline:2px solid var(--navy);outline-offset:2px}
.login .btn{width:100%;height:54px;margin:0;border-radius:10px;font-size:16px;font-weight:700;letter-spacing:-.48px}
.lg-foot{padding-top:20px;border-top:1px solid #e8e8e8;font-size:13px;letter-spacing:-.39px;color:#8a939c}
.err{padding:10px 12px;border:1px solid #ffd4d4;border-radius:9px;background:#fff1f1;color:#c0362f;font-size:13px}

/* 중간 폭 */
@media (max-width:1100px){
  .lg-panel{flex-basis:44%;padding:48px 32px}
  .lg-title{font-size:40px;letter-spacing:-1.2px}
}

/* 모바일: 위 색 패널(높이 212) + 아래 폼 */
@media (max-width:768px){
  body{background-image:url(/img/login/bg-m.png)}
  .login{padding:16px}
  .lg-card{height:auto;min-height:0;max-height:none;flex-direction:column;gap:28px;padding:12px}
  .lg-panel{flex:none;height:212px;border-radius:16px;padding:36px 24px}
  .lg-title{margin-top:0;font-size:clamp(28px,9.5vw,44px);letter-spacing:-1.2px}
  .lg-form{padding:8px 8px 12px}
  .lg-box{gap:32px}
}