:root{ --login-bg:#fff; }

html,body{ min-height:100%; }
body.login-doc{
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  position:relative;
  overflow-x:hidden;
  background:var(--login-bg);
  padding:40px 20px;
}

.login-bg{ position:fixed; inset:0; overflow:hidden; z-index:0; pointer-events:none; }
.login-bg img{ display:block; width:100%; height:100%; object-fit:cover; }

body[data-product="works"]{ --login-bg:linear-gradient(181.13deg, #f7faff 1.63%, #fcfdff 98.37%); }
body[data-product="works"] .login-bg img{ opacity:0.9; }
body[data-product="geo"] .login-bg img,
body[data-product="adchecker"] .login-bg img{ opacity:0.4; }
body[data-product="bidding"]{ --login-bg:linear-gradient(181.13deg, #f7faff 1.63%, #fcfdff 98.37%); }
body[data-product="radar"]{ --login-bg:#f5f7fc; }

.brand-bidding .brand-main{ left:0; top:-1.12%; width:67.51%; height:88.24%; }
.brand-bidding .brand-suffix{ left:70.46%; top:44.12%; width:29.65%; height:54.76%; }
.brand-radar .brand-main{ left:0; top:-1.27%; width:69.26%; height:100%; }
.brand-radar .brand-suffix{ left:72.29%; top:43.33%; width:27.55%; height:56.67%; }

.login-card{
  position:relative;
  z-index:1;
  width:100%;
  max-width:396px;
  margin-top:32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  background:#fff;
  border:1px solid #e8eaed;
  border-radius:18px;
  box-shadow:0 20px 48px rgba(20,30,60,0.10), 0 1px 3px rgba(138,149,168,0.13);
  overflow:hidden;
}

.login-logo-wrap{ width:100%; display:flex; justify-content:center; padding:40px 32px 0; }
.login-logo{ position:relative; width:151px; height:20px; }
.login-logo img{ position:absolute; display:block; object-fit:contain; }
.login-logo.brand-adchecker{ width:185px; }
.login-logo.brand-bidding{ width:140px; }
.login-logo.brand-radar{ width:152px; }
.login-logo.login-logo-lg{ width:181px; height:24px; }
.login-logo.login-logo-lg.brand-adchecker{ width:222px; }
.login-logo.login-logo-lg.brand-bidding{ width:189px; height:27px; }
.login-logo.login-logo-lg.brand-radar{ width:182px; }

.login-heading{ width:100%; padding:30px 32px 0; text-align:center; }
.login-heading h1{ margin:0; font-size:20px; font-weight:600; line-height:28px; letter-spacing:-0.4px; color:#0a121a; }
.login-heading p{ margin:12px 0 0; font-size:14px; font-weight:400; line-height:18px; letter-spacing:-0.28px; color:#38526b; }

.login-actions{ width:100%; display:flex; flex-direction:column; align-items:center; gap:16px; padding:24px 32px; }
.login-actions.login-actions-secondary{ padding:0 32px 24px; }
.login-btn{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 20px;
  border:0;
  border-radius:12px;
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:18px;
  letter-spacing:-0.28px;
  text-decoration:none;
  cursor:pointer;
}
.login-btn img{ display:block; width:17px; height:17px; }

body .login-btn.login-btn-secondary{
  border:1px solid #cbd6ec;
  background:#fff;
  color:#354c78;
  font-weight:600;
  box-shadow:none;
}
body .login-btn.login-btn-secondary:hover{ background:#f5f8ff; }

.login-or{ display:flex; align-items:center; gap:12px; width:100%; margin:20px 0; padding:0 32px; }
.login-or::before, .login-or::after{ content:""; flex:1; height:1px; background:#e6ebf5; }
.login-or span{ flex-shrink:0; font-size:12px; font-weight:400; line-height:16px; letter-spacing:-0.24px; color:#9aa6b7; }

.login-form{ width:100%; display:flex; flex-direction:column; gap:12px; padding:32px 32px 0; }
.login-field{ display:flex; flex-direction:column; gap:6px; text-align:left; }
.login-field label{ font-size:13px; font-weight:600; line-height:16px; letter-spacing:-0.26px; color:#38526b; }
.login-field input{
  width:100%;
  min-height:46px;
  padding:12px 14px;
  border:1px solid #dfe4ec;
  border-radius:10px;
  background:#fbfcff;
  color:#0a121a;
  font-size:14px;
  font-weight:400;
}
.login-field input::placeholder{ color:#9aa6b7; }
.login-field input:focus{ outline:none; border-color:#8199ea; background:#fff; }
body[data-product="geo"] .login-field input:focus{ border-color:#06b6d4; }
body[data-product="adchecker"] .login-field input:focus{ border-color:#4c47ff; }
body[data-product="studio"] .login-field input:focus{ border-color:#0a121a; }
.login-input-group{ position:relative; width:100%; }
.login-input-group input{ padding-right:44px; }
.login-password-toggle{
  position:absolute;
  right:5px;
  top:50%;
  transform:translateY(-50%);
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  border:0;
  border-radius:8px;
  background:none;
  cursor:pointer;
}
.login-password-toggle:hover{ background:#eef1f6; }
.login-password-toggle img{ display:block; width:18px; height:18px; }
.login-password-toggle .icon-hide{ display:none; }
.login-password-toggle.is-visible .icon-show{ display:none; }
.login-password-toggle.is-visible .icon-hide{ display:block; }
.login-remember{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:400; color:#435773; cursor:pointer; }
.login-remember input{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  margin:0;
  flex-shrink:0;
  border:1.5px solid #cbd5e5;
  border-radius:4px;
  background:#fff;
  position:relative;
  cursor:pointer;
}
.login-remember input:checked{ border:0; }
.login-remember input:checked::after{
  content:"";
  position:absolute;
  left:50%;
  top:42%;
  width:5px;
  height:9px;
  border:solid #fff;
  border-width:0 2px 2px 0;
  transform:translate(-50%,-50%) rotate(45deg);
}
body[data-product="works"] .login-remember input:checked{ background:linear-gradient(135deg, #ed2651, #5d57de); }
body[data-product="geo"] .login-remember input:checked{ background:linear-gradient(135deg, #06b6d4, #8b5cf6); }
body[data-product="adchecker"] .login-remember input:checked{ background:linear-gradient(135deg, #4c47ff, #3f8cff); }
body[data-product="bidding"] .login-remember input:checked{ background:linear-gradient(135deg, #7cc0ff, #787dfa); }
body[data-product="radar"] .login-remember input:checked{ background:linear-gradient(135deg, #98c6ff, #4095ff); }
.login-submit{
  width:100%;
  min-height:48px;
  margin-top:4px;
  border:0;
  border-radius:12px;
  color:#fff;
  font-weight:700;
  font-size:14px;
  line-height:18px;
  letter-spacing:-0.28px;
  cursor:pointer;
}
body[data-product="works"] .login-submit{ background:linear-gradient(100deg, #ed2651 0%, #d9328c 30%, #5d57de 100%); box-shadow:0 8px 11px rgba(147,51,234,0.22); }
body[data-product="bidding"] .login-submit{ background:linear-gradient(98deg, #7cc0ff 0%, #787dfa 100%); box-shadow:0 8px 11px rgba(51,94,234,0.22); }
body[data-product="radar"] .login-submit{ background:linear-gradient(124deg, #98c6ff 0%, #4095ff 100%); box-shadow:0 8px 11px #d2deff; }
body[data-product="geo"] .login-submit{ background:linear-gradient(123deg, #06b6d4 0%, #8b5cf6 100%); box-shadow:none; min-height:40px; border-radius:10px; }
body[data-product="adchecker"] .login-submit{ background:linear-gradient(-57deg, #4c47ff 0%, #3f8cff 100%); box-shadow:none; min-height:40px; border-radius:10px; }

.login-hint{ display:flex; align-items:center; justify-content:center; gap:6px; }
.login-hint img{ display:block; width:12px; height:12px; }
.login-hint span{ font-size:12px; font-weight:400; line-height:16px; letter-spacing:-0.24px; color:#6b7f94; }

.login-footer{ width:100%; display:flex; flex-direction:column; align-items:center; gap:24px; padding:0 0 32px; }
.login-divider{ width:100%; height:1px; background:#e6ebf5; }
.login-support{ margin:0; padding:0 32px; font-size:12px; font-weight:400; line-height:16px; letter-spacing:-0.24px; color:#919da8; text-align:center; }
.login-support strong{ color:#58697a; font-weight:400; }
.login-support-link{ padding:0; border:0; background:none; font:inherit; letter-spacing:inherit; color:#58697a; text-decoration:underline; cursor:pointer; }
.login-support-link:hover{ color:#0a121a; }

.login-copyright{ position:relative; z-index:1; margin-top:26px; font-size:12px; line-height:normal; color:#909cb4; text-align:center; }

@media (max-width:480px){
  .login-logo-wrap{ padding-top:32px; }
  .login-heading{ padding:24px 24px 0; }
  .login-actions{ padding:20px 24px; }
  .login-support{ padding:0 24px; }
}

/* Studio: ID/PW + social login (no intranet SSO), warmer shadow + rounder card */
body[data-product="studio"]{ --login-bg:#fcfbf8; }
body[data-product="studio"] .login-card{ border-radius:28px; box-shadow:0 20px 48px rgba(60,25,20,0.10), 0 1px 3px rgba(168,138,138,0.13); }
body[data-product="studio"] .login-logo-wrap{ padding:32px 24px 0; }

.login-logo.brand-studio{ width:166px; height:24px; }
.brand-studio .brand-main{ left:-0.24%; top:1.67%; width:74.88%; height:96.67%; }
.brand-studio .brand-suffix{ left:77.29%; top:3.31%; width:21.82%; height:40%; }

.login-body-compact{ width:100%; display:flex; flex-direction:column; gap:20px; padding:24px 24px 28px; }

.login-form-compact{ width:100%; display:flex; flex-direction:column; gap:20px; }
.login-fields-compact{ width:100%; display:flex; flex-direction:column; gap:12px; }
.login-field-compact label{ font-size:12px; font-weight:400; color:#16324d; letter-spacing:-0.24px; }
.login-field-compact input{
  height:40px;
  min-height:0;
  padding:11px 16px;
  border-color:#e1e7f2;
  border-radius:8px;
  background:#fff;
  color:#16324d;
  font-size:14px;
}
.login-field-compact input::placeholder{ color:#6b7f94; }
.login-field-compact .login-input-group input{ padding-right:40px; }
.login-field-compact .login-password-toggle{ width:28px; height:28px; right:6px; }
.login-field-compact .login-password-toggle img{ width:16px; height:16px; }

.login-remember-compact{ color:#16324d; }
body[data-product="studio"] .login-remember input:checked{ background:#0a121a; }

body[data-product="studio"] .login-submit{
  min-height:40px;
  border-radius:10px;
  background:#0a121a;
  box-shadow:0 0 2px rgba(71,88,158,0.17), 0 2px 10px rgba(101,157,201,0.2);
}

.login-links{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; }
.login-links .login-link{ border:0; background:none; padding:0; font-size:12px; line-height:16px; letter-spacing:-0.24px; color:#38526b; cursor:pointer; }
.login-links .login-link:hover{ text-decoration:underline; }
.login-links .login-link.is-primary{ color:#16222e; font-weight:500; }
.login-links-divider{ width:1px; height:12px; background:#c5cddb; flex-shrink:0; }

body[data-product="studio"] .login-or,
body[data-product="geo"] .login-or,
body[data-product="adchecker"] .login-or{ margin:0; padding:0; }

.login-social{ width:100%; display:flex; flex-direction:column; gap:10px; }
.login-social-btn{
  width:100%;
  min-height:40px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  border:1px solid #e1e7f2;
  border-radius:10px;
  background:#fff;
  color:#16324d;
  font-size:14px;
  font-weight:600;
  cursor:pointer;
}
.login-social-btn img{ display:block; width:16px; height:16px; object-fit:contain; }
.login-social-btn:hover{ background:#f7f9fc; }

.login-social-wrap{ width:100%; display:flex; flex-direction:column; gap:24px; }
body[data-product="studio"] .login-support,
body[data-product="geo"] .login-body-compact .login-support,
body[data-product="adchecker"] .login-body-compact .login-support{ padding:0; }

/* SSO redesign: rounder card, warm shadow, single "차이커뮤니케이션으로 로그인" button (no more per-brand gradient/hint) */
.login-card.login-card-soft{ border-radius:28px; box-shadow:0 20px 48px rgba(20,30,60,0.10), 0 1px 3px rgba(138,149,168,0.13); }
.login-card-soft .login-logo-wrap{ padding:32px 24px 0; }

.login-main{ width:100%; display:flex; flex-direction:column; align-items:center; gap:24px; padding:24px; }
.login-main .login-heading{ padding:0; }

.login-btn-chai{
  width:100%;
  min-height:48px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:15px 20px;
  border:1px solid #d5dce8;
  border-radius:10px;
  background:#fff;
  color:#16324d;
  font-size:14px;
  font-weight:600;
  letter-spacing:-0.28px;
  cursor:pointer;
  box-shadow:0 2px 6px rgba(20,30,60,0.08);
}
.login-btn-chai img{ display:block; width:20px; height:20px; object-fit:contain; }
.login-btn-chai:hover{ background:#f7f9fc; }

.login-footer.login-footer-soft{ gap:20px; padding:0 0 24px; }

/* GEO/Adchecker ID_PW redesign: borderless rounder card, blue shadow, compact form + social login */
.login-card.login-card-idpw{ border:0; border-radius:28px; box-shadow:0 20px 48px rgba(27,77,169,0.1), 0 1px 3px rgba(113,134,180,0.13); }
.login-card-idpw .login-logo-wrap{ padding:32px 24px 0; }
.login-logo.login-logo-lg.brand-geo{ width:178px; }

@media (max-width:480px){
  .login-card-soft .login-logo-wrap{ padding-top:28px; }
  .login-main{ padding:20px; gap:20px; }
}

/* Studio login: same blurred pastel blobs as the Studio landing page background (studio.ch-ai.ai) */
.login-bg-fx{ position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
.login-bg-fx .blob{ position:absolute; border-radius:9999px; filter:blur(60px); }
.login-bg-fx .blob-1{ left:-20%; top:-25%; width:60vw; height:60vw; max-width:996px; max-height:996px; opacity:.25; background:radial-gradient(circle, rgb(235,185,255) 0px, rgba(252,251,248,0) 70%); }
.login-bg-fx .blob-2{ right:-15%; top:-20%; width:55vw; height:55vw; max-width:870px; max-height:870px; opacity:.3; background:radial-gradient(circle, rgb(185,209,255) 0px, rgba(252,251,248,0) 70%); }
.login-bg-fx .blob-3{ left:32%; top:3%; width:40vw; height:40vw; max-width:665px; max-height:665px; opacity:.2; background:radial-gradient(circle, rgb(235,185,255) 0px, rgba(252,251,248,0) 70%); }
.login-bg-fx .blob-4{ left:-15%; top:30%; width:55vw; height:55vw; max-width:911px; max-height:911px; opacity:.3; background:radial-gradient(circle, rgb(255,179,197) 0px, rgb(252,251,248) 100%); }
.login-bg-fx .blob-5{ right:-15%; top:12%; width:65vw; height:65vw; max-width:1165px; max-height:1165px; opacity:.3; background:radial-gradient(circle, rgb(185,209,255) 0px, rgba(252,251,248,0) 70%); }
.login-bg-fx .top-fade{ position:absolute; left:0; right:0; top:0; height:128px; background:linear-gradient(rgba(255,255,255,.5), rgba(255,255,255,0)); }

/* Studio: inquiry dialog submit button matches the login button color */
body[data-product="adchecker"] .inquiry-submit{ background:linear-gradient(110deg, #3f8cff, #4c47ff); box-shadow:0 4px 7px rgba(76,71,255,0.25); }
body[data-product="adchecker"] .inquiry-submit:hover{ box-shadow:0 7px 14px rgba(76,71,255,0.32); }
body[data-product="bidding"] .inquiry-submit{ background:linear-gradient(110deg, #89c6ff, #8388ef); box-shadow:0 4px 7px rgba(131,136,239,0.3); }
body[data-product="bidding"] .inquiry-submit:hover{ box-shadow:0 7px 14px rgba(131,136,239,0.38); }
body[data-product="radar"] .inquiry-submit{ background:linear-gradient(110deg, #98c6ff, #4095ff); box-shadow:0 4px 7px rgba(64,149,255,0.3); }
body[data-product="radar"] .inquiry-submit:hover{ box-shadow:0 7px 14px rgba(64,149,255,0.38); }
body[data-product="studio"] .inquiry-submit{ background:#0a121a; box-shadow:0 0 2px rgba(71,88,158,0.17), 0 2px 10px rgba(101,157,201,0.2); }