로그인 화면 디자인 재구성

frontend/public/styles.css

@@ -52,103 +52,96 @@ a {
 
 .login-screen {
   min-height: 100vh;
+  padding: 24px;
+  background:
+    linear-gradient(135deg, rgba(15, 23, 42, 0.42), rgba(30, 41, 59, 0.18)),
+    url("https://images.unsplash.com/photo-1486406146926-c627a92ad1ab?auto=format&fit=crop&w=1800&q=80")
+      center center / cover no-repeat;
+}
+
+.login-backdrop {
+  min-height: calc(100vh - 48px);
   display: grid;
-  grid-template-columns: 1.15fr 0.85fr;
-  gap: 28px;
-  padding: 32px;
+  place-items: center;
 }
 
-.login-hero,
-.login-card {
-  border: 1px solid var(--line);
-  border-radius: 30px;
-  background: var(--panel);
-  box-shadow: var(--shadow);
-  backdrop-filter: blur(14px);
-}
-
-.login-hero {
-  padding: 44px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  min-height: calc(100vh - 64px);
-}
-
-.login-hero h1,
-.login-card h2,
+.login-card h1,
 .dashboard-header h2,
 .stage-topline h3 {
   margin: 0;
 }
 
-.login-hero h1 {
-  font-size: clamp(2.4rem, 5vw, 4.8rem);
-  line-height: 0.96;
-  letter-spacing: -0.04em;
-}
-
-.hero-text,
-.helper-text {
-  color: var(--muted);
-  line-height: 1.7;
-}
-
-.hero-text {
-  max-width: 680px;
-  margin: 20px 0 0;
-  font-size: 16px;
-}
-
-.hero-points {
-  display: flex;
-  flex-wrap: wrap;
-  gap: 12px;
-  margin-top: 28px;
-}
-
-.hero-points span {
-  padding: 12px 16px;
-  border-radius: 999px;
-  background: #fff;
-  border: 1px solid rgba(79, 70, 229, 0.12);
-  color: #334155;
-  font-size: 13px;
-  font-weight: 800;
-}
-
 .login-card {
-  align-self: center;
-  padding: 28px;
+  width: min(1240px, 100%);
+  min-height: 360px;
   display: grid;
-  gap: 16px;
+  grid-template-columns: 1.45fr 0.55fr;
+  overflow: hidden;
+  border: 1px solid rgba(255, 255, 255, 0.14);
+  border-radius: 28px;
+  background: rgba(71, 85, 105, 0.34);
+  box-shadow: 0 28px 80px rgba(15, 23, 42, 0.28);
+  backdrop-filter: blur(18px);
 }
 
-.login-card-head {
-  margin-bottom: 8px;
+.login-brand {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 56px 52px;
+  border-right: 1px solid rgba(255, 255, 255, 0.08);
+  background:
+    linear-gradient(90deg, rgba(15, 23, 42, 0.08), rgba(255, 255, 255, 0.02)),
+    linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(15, 23, 42, 0.08));
+}
+
+.login-brand .eyebrow {
+  margin-bottom: 14px;
+  color: rgba(255, 255, 255, 0.72);
+  letter-spacing: 0.22em;
+}
+
+.login-brand h1 {
+  font-size: clamp(3rem, 5vw, 4.8rem);
+  line-height: 0.95;
+  letter-spacing: -0.05em;
+  color: #f8fafc;
+}
+
+.login-form-wrap {
+  padding: 52px 34px;
+  display: grid;
+  align-content: center;
+  gap: 18px;
+  background: rgba(15, 23, 42, 0.12);
 }
 
 .login-card label {
   display: flex;
   flex-direction: column;
   gap: 8px;
-  font-size: 13px;
+  font-size: 15px;
   font-weight: 800;
-  color: #475569;
+  color: rgba(255, 255, 255, 0.9);
 }
 
 .login-card input {
-  min-height: 52px;
-  border: 1px solid rgba(148, 163, 184, 0.45);
-  border-radius: 16px;
-  padding: 14px 16px;
-  background: #fff;
+  min-height: 54px;
+  border: 1px solid rgba(255, 255, 255, 0.12);
+  border-radius: 999px;
+  padding: 14px 20px;
+  background: rgba(255, 255, 255, 0.1);
+  color: #f8fafc;
   outline: none;
 }
 
+.login-card input::placeholder {
+  color: rgba(226, 232, 240, 0.55);
+}
+
 .login-card input:focus {
-  border-color: rgba(79, 70, 229, 0.55);
-  box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.1);
+  border-color: rgba(255, 255, 255, 0.32);
+  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.08);
 }
 
 .login-card button,
@@ -165,15 +158,22 @@ a {
 }
 
 .login-card button {
-  margin-top: 8px;
+  margin-top: 6px;
   border: none;
   color: #fff;
-  background: var(--accent);
+  background: rgba(31, 41, 55, 0.82);
+  box-shadow: 0 14px 30px rgba(15, 23, 42, 0.22);
 }
 
 .helper-text {
   margin: 0;
+  min-height: 20px;
   font-size: 13px;
+  color: rgba(248, 250, 252, 0.8);
+}
+
+.helper-text:empty {
+  visibility: hidden;
 }
 
 .dashboard-shell {
@@ -346,12 +346,25 @@ a {
 
 @media (max-width: 980px) {
   .login-screen {
-    grid-template-columns: 1fr;
-    padding: 20px;
+    padding: 16px;
   }
 
-  .login-hero {
-    min-height: auto;
+  .login-backdrop {
+    min-height: calc(100vh - 32px);
+  }
+
+  .login-card {
+    grid-template-columns: 1fr;
+  }
+
+  .login-brand {
+    padding: 40px 28px 20px;
+    border-right: 0;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+  }
+
+  .login-form-wrap {
+    padding: 28px;
   }
 }