- PM 데모 로그인 - 숫자만 입력하면 전화번호 SSO 인증, 그 외 입력은 ID/PW 로그인으로 전환됩니다. + 로그인 + 입력값에 따라 전화번호 인증 또는 ID/PW 로그인이 자동으로 선택됩니다. diff --git a/public/styles.css b/public/styles.css index 048befb..6d16229 100644 --- a/public/styles.css +++ b/public/styles.css @@ -1,8 +1,5 @@ :root { color: #132238; - background: - radial-gradient(circle at top, rgba(180, 202, 224, 0.45), transparent 35%), - linear-gradient(180deg, #edf3f8 0%, #f7fafc 100%); font-family: 'Segoe UI', 'Noto Sans KR', sans-serif; line-height: 1.5; font-weight: 400; @@ -16,6 +13,10 @@ body { margin: 0; min-width: 320px; min-height: 100vh; + background-color: #0f3d2e; /* 최하단 바탕색: 다크 그린 */ + display: flex; + align-items: center; + justify-content: center; } button, @@ -23,31 +24,70 @@ input { font: inherit; } +/* 배경 이미지를 담는 큰 박스 */ .app-shell { - display: grid; - place-items: center; - min-height: 100vh; - padding: 48px 24px; + position: relative; + width: 98vw; /* 좌우 길이를 더 늘려 배경 노출 감소 */ + height: 96vh; /* 상하 균형을 위해 높이도 살짝 조정 */ + background: + linear-gradient(rgba(15, 61, 46, 0.4), rgba(15, 61, 46, 0.6)), + url('https://images.unsplash.com/photo-1522071820081-009f0129c71c?auto=format&fit=crop&w=1920&q=80'); + background-size: cover; + background-position: center; + border: 4px solid rgba(255, 255, 240, 0.801); /* 테두리 굵기를 8px로 대폭 강화 */ + border-radius: 20px; /* 모서리 각도 조절 (48px -> 20px) */ + box-shadow: 0 40px 100px rgba(0, 0, 0, 0.4); + display: flex; + flex-direction: column; + align-items: center; + overflow-y: auto; + padding: 40px 24px; +} + +.system-header { + margin-top: 8vh; /* 기존 유지 */ + transform: translateY(-40px); /* 타이틀만 위로 이동 */ + text-align: center; + color: rgba(255, 255, 240, 0.95); /* 아이보리색 타이틀 */ /*(255, 255, 240, 0.801) (255, 255, 255, 0.95)*/ + text-shadow: 0 4px 12px rgba(0, 0, 0, 0.3); + z-index: 10; +} + +.system-header .sub-title { + display: block; + font-size: 1.4rem; + font-weight: 600; + margin-bottom: 12px; +} + +.system-header .main-title { + margin: 0; + font-size: 2.8rem; + font-weight: 800; } .login-panel { - width: min(100%, 560px); - padding: 40px; - border: 1px solid rgba(84, 111, 138, 0.18); - border-radius: 28px; - background: rgba(255, 255, 255, 0.9); - box-shadow: 0 32px 80px rgba(32, 55, 79, 0.12); + width: min(100%, 800px); + margin-top: 5vh; /* 타이틀 바로 아래쪽에 배치 */ + margin-bottom: auto; /* */ + padding: 52px; /*48px*/ + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 32px; + background: rgba(255, 255, 240, 0.801); /* 로그인 카드 배경 (아이보리 화이트) */ /*(255, 255, 240, 0.801) (255, 255, 255, 0.92)*/ + box-shadow: 0 32px 80px rgba(0, 0, 0, 0.2); + z-index: 20; } .panel-heading h1 { margin: 0; - font-size: clamp(2rem, 3vw, 2.8rem); + font-size: clamp(2rem, 3vw, 2.6rem); line-height: 1.05; + color: #0f3d2e; } .panel-heading p { margin: 12px 0 0; - color: #516b86; + color: #4a6659; } .login-form { @@ -62,7 +102,7 @@ input { } .field label { - color: #1c3954; + color: #0a291f; font-size: 0.96rem; font-weight: 700; } @@ -70,7 +110,7 @@ input { .text-input { width: 100%; padding: 16px 18px; - border: 1px solid rgba(96, 123, 149, 0.24); + border: 1px solid rgba(15, 61, 46, 0.2); border-radius: 18px; background: #fdfefe; color: #132238; @@ -79,15 +119,15 @@ input { .text-input:focus { outline: none; - border-color: #2f5f8f; - box-shadow: 0 0 0 4px rgba(93, 137, 181, 0.14); + border-color: #0f3d2e; + box-shadow: 0 0 0 4px rgba(15, 61, 46, 0.14); transform: translateY(-1px); } .input-hint { margin: 0; min-height: 24px; - color: #5c748d; + color: #5c746b; font-size: 0.95rem; } @@ -95,21 +135,21 @@ input { display: inline-flex; align-items: center; justify-content: center; - min-height: 54px; + min-height: 56px; padding: 0 20px; border: 0; border-radius: 18px; - background: linear-gradient(180deg, #214e77 0%, #15395b 100%); + background: linear-gradient(180deg, #185c45 0%, #0f3d2e 100%); color: #f8fbff; font-weight: 700; cursor: pointer; - box-shadow: 0 20px 40px rgba(22, 57, 92, 0.24); + box-shadow: 0 20px 40px rgba(15, 61, 46, 0.24); transition: all 160ms ease; } .primary-button:hover:not(:disabled) { transform: translateY(-1px); - box-shadow: 0 24px 44px rgba(22, 57, 92, 0.3); + box-shadow: 0 24px 44px rgba(15, 61, 46, 0.3); } .primary-button:disabled { @@ -123,33 +163,33 @@ input { margin-top: 24px; padding: 20px 22px; border-radius: 22px; - border: 1px solid rgba(96, 123, 149, 0.18); + border: 1px solid rgba(15, 61, 46, 0.15); } .status-card { - background: #f6f9fb; + background: #f4f9f7; } .status-card strong { display: block; margin-bottom: 8px; - color: #18334d; + color: #0f3d2e; } .status-card p, .success-panel p { margin: 0; - color: #5a738d; + color: #5a7369; } .success-panel { background: linear-gradient(180deg, #f3f8f5 0%, #edf5ef 100%); - border-color: rgba(66, 131, 92, 0.18); + border-color: rgba(15, 61, 46, 0.18); } .success-label { margin-bottom: 8px; - color: #38694a; + color: #0f3d2e; font-size: 0.78rem; font-weight: 800; text-transform: uppercase; @@ -157,7 +197,7 @@ input { .success-panel h3 { margin: 0 0 8px; - color: #12301f; + color: #0a291f; font-size: 1.4rem; } @@ -167,6 +207,10 @@ input { @media (max-width: 640px) { .app-shell { + width: 98vw; + height: 98vh; + border-width: 4px; /* 모바일에서는 테두리 살짝 줄임 */ + border-radius: 12px; padding: 24px 16px; } @@ -174,4 +218,4 @@ input { padding: 28px 22px; border-radius: 24px; } -} +} \ No newline at end of file