From baf47e2e2a0655f7e0fa90a89a5099de5886fd57 Mon Sep 17 00:00:00 2001
From: hyunho <hyunho@local>
Date: Wed, 25 Mar 2026 10:55:33 +0900
Subject: [PATCH] =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=ED=99=94?=
 =?UTF-8?q?=EB=A9=B4=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9E=AC=EA=B5=AC?=
 =?UTF-8?q?=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/public/index.html |  49 +++++------
 frontend/public/styles.css | 167 ++++++++++++++++++++-----------------
 2 files changed, 110 insertions(+), 106 deletions(-)
diff --git a/frontend/public/index.html b/frontend/public/index.html
index f52a3ad..79172e7 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -11,36 +11,27 @@
 </head>
 <body>
   <section id="login-panel" class="login-screen">
-    <div class="login-hero">
-      <p class="eyebrow">MH Dashboard</p>
-      <h1>조직도를 기준으로<br>메인 화면을 구성합니다.</h1>
-      <p class="hero-text">
-        현재는 조직도 모듈이 메인 화면입니다. 이후 다른 기능이 합쳐지더라도
-        같은 헤더와 같은 화면 체계 안에서 확장될 수 있도록 구조를 먼저 맞춥니다.
-      </p>
-      <div class="hero-points">
-        <span>API 기반 조직 데이터</span>
-        <span>고정 헤더 구조</span>
-        <span>확장 가능한 메인 레이아웃</span>
-      </div>
-    </div>
+    <div class="login-backdrop">
+      <form id="login-form" class="login-card">
+        <div class="login-brand">
+          <p class="eyebrow">MH Dash Board</p>
+          <h1>MH Dash Board</h1>
+        </div>
 
-    <form id="login-form" class="login-card">
-      <div class="login-card-head">
-        <p class="eyebrow">Preview Login</p>
-        <h2>조직도 메인 진입</h2>
-      </div>
-      <label>
-        <span>아이디</span>
-        <input name="username" type="text" placeholder="예: admin" required>
-      </label>
-      <label>
-        <span>비밀번호</span>
-        <input name="password" type="password" placeholder="아무 값이나 입력" required>
-      </label>
-      <button type="submit">메인 화면 열기</button>
-      <p id="login-message" class="helper-text">사내망 시연용 임시 로그인입니다.</p>
-    </form>
+        <div class="login-form-wrap">
+          <label>
+            <span>사번</span>
+            <input name="username" type="text" placeholder="사번 입력" required>
+          </label>
+          <label>
+            <span>비번</span>
+            <input name="password" type="password" placeholder="비밀번호 입력" required>
+          </label>
+          <button type="submit">로그인</button>
+          <p id="login-message" class="helper-text"></p>
+        </div>
+      </form>
+    </div>
   </section>
 
   <section id="dashboard-panel" class="dashboard-shell hidden">
diff --git a/frontend/public/styles.css b/frontend/public/styles.css
index 84c5594..2d2bce8 100644
--- a/frontend/public/styles.css
+++ b/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;
   }
 }
 
