From 8a5db81b85333fe6644fc62b017da8da68aec77c Mon Sep 17 00:00:00 2001 From: hyunho Date: Wed, 25 Mar 2026 12:30:26 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B3=B5=ED=86=B5=20=EB=B2=A0=EC=9D=B4?= =?UTF-8?q?=EC=8A=A4=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EA=B5=AC=EC=A1=B0=20?= =?UTF-8?q?=EB=8F=84=EC=9E=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- DashBoard-organization.html | 1 + frontend/public/index.html | 1 + frontend/public/styles.css | 45 +------------- legacy/static/common.css | 107 +++++++++++++++++++++++++++++++++ legacy/static/organization.css | 84 ++++++++++++-------------- 5 files changed, 152 insertions(+), 86 deletions(-) create mode 100644 legacy/static/common.css diff --git a/DashBoard-organization.html b/DashBoard-organization.html index 1953412..949897d 100644 --- a/DashBoard-organization.html +++ b/DashBoard-organization.html @@ -8,6 +8,7 @@ + diff --git a/frontend/public/index.html b/frontend/public/index.html index 079a8a2..4141381 100644 --- a/frontend/public/index.html +++ b/frontend/public/index.html @@ -7,6 +7,7 @@ + diff --git a/frontend/public/styles.css b/frontend/public/styles.css index 37fbc22..2bc3caf 100644 --- a/frontend/public/styles.css +++ b/frontend/public/styles.css @@ -1,49 +1,10 @@ -:root { - --bg: #f1f5f9; - --bg-strong: #e2e8f0; - --panel: rgba(255, 255, 255, 0.92); - --line: rgba(148, 163, 184, 0.35); - --text: #0f172a; - --muted: #64748b; - --header: #1e293b; - --accent: #4f46e5; - --accent-soft: #e0e7ff; - --shadow: 0 24px 60px rgba(15, 23, 42, 0.16); -} - -* { - box-sizing: border-box; -} - -html, -body { - margin: 0; - min-height: 100%; - font-family: "Pretendard", sans-serif; - color: var(--text); - background: - radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 22%), - radial-gradient(circle at bottom right, rgba(148, 163, 184, 0.18), transparent 28%), - var(--bg); -} - -body { - min-height: 100vh; -} - -button, -input, -a { - font: inherit; -} - .hidden { display: none !important; } .eyebrow { margin: 0 0 10px; - color: var(--accent); + color: var(--color-accent); font-size: 11px; font-weight: 900; letter-spacing: 0.16em; @@ -78,7 +39,7 @@ a { grid-template-columns: 1.3fr 0.7fr; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.14); - border-radius: 22px; + border-radius: var(--radius-lg); background: rgba(71, 85, 105, 0.34); box-shadow: 0 24px 60px rgba(15, 23, 42, 0.24); backdrop-filter: blur(14px); @@ -230,7 +191,7 @@ a { } .nav-pill.active { - background: var(--accent); + background: var(--color-accent); border-color: transparent; color: #fff; box-shadow: 0 10px 24px rgba(79, 70, 229, 0.3); diff --git a/legacy/static/common.css b/legacy/static/common.css new file mode 100644 index 0000000..6beb11d --- /dev/null +++ b/legacy/static/common.css @@ -0,0 +1,107 @@ +:root { + --font-sans: "Pretendard", sans-serif; + + --color-bg: #f1f5f9; + --color-bg-soft: #eef2ff; + --color-surface: #ffffff; + --color-surface-soft: rgba(255, 255, 255, 0.88); + --color-surface-strong: #e2e8f0; + --color-text: #1e293b; + --color-text-soft: #475569; + --color-text-muted: #64748b; + --color-border: #cbd5e1; + --color-border-soft: rgba(148, 163, 184, 0.3); + --color-header: #1e293b; + --color-header-soft: #334155; + --color-accent: #4f46e5; + --color-accent-soft: #e0e7ff; + --color-accent-strong: #4338ca; + + --radius-sm: 8px; + --radius-md: 12px; + --radius-lg: 18px; + --radius-xl: 24px; + --radius-pill: 999px; + + --shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.08); + --shadow-card: 0 18px 44px rgba(15, 23, 42, 0.12); + --shadow-float: 0 18px 36px rgba(79, 70, 229, 0.16); + + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; +} + +* { + box-sizing: border-box; +} + +html, +body { + margin: 0; + min-height: 100%; + font-family: var(--font-sans); + color: var(--color-text); + background: + radial-gradient(circle at top left, rgba(79, 70, 229, 0.12), transparent 22%), + radial-gradient(circle at bottom right, rgba(148, 163, 184, 0.18), transparent 28%), + var(--color-bg); +} + +body { + min-height: 100vh; +} + +button, +input, +select, +textarea, +a { + font: inherit; +} + +.ui-card { + background: var(--color-surface-soft); + border: 1px solid var(--color-border-soft); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-soft); + backdrop-filter: blur(10px); +} + +.ui-pill { + display: inline-flex; + align-items: center; + justify-content: center; + min-height: 38px; + padding: 0 14px; + border-radius: var(--radius-pill); +} + +.ui-button-primary { + border: none; + color: #fff; + background: var(--color-accent); + box-shadow: var(--shadow-float); +} + +.ui-button-secondary { + border: 1px solid var(--color-border-soft); + color: var(--color-text); + background: rgba(255, 255, 255, 0.72); +} + +.ui-input { + border: 1px solid var(--color-border-soft); + border-radius: var(--radius-pill); + background: rgba(255, 255, 255, 0.88); + color: var(--color-text); + outline: none; +} + +.ui-input:focus { + border-color: rgba(79, 70, 229, 0.45); + box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.08); +} diff --git a/legacy/static/organization.css b/legacy/static/organization.css index a7a8c5b..f6301f6 100644 --- a/legacy/static/organization.css +++ b/legacy/static/organization.css @@ -1,8 +1,4 @@ body { - margin: 0; - background: #f1f5f9; - font-family: 'Pretendard', sans-serif; - color: #1e293b; overflow-x: hidden; } @@ -29,23 +25,23 @@ body { .dept-box { width: fit-content; min-width: 320px; - background: white; - border: 1px solid #cbd5e1; - border-radius: 10px; - box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15); + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-md); + box-shadow: var(--shadow-soft); position: relative; z-index: 20; margin-bottom: 40px; } .dept-header { - background: #1e293b; + background: var(--color-header); color: white; padding: 12px; text-align: center; font-size: 17px; font-weight: 900; - border-radius: 10px; + border-radius: var(--radius-md); } .dept-header.has-members { @@ -73,11 +69,11 @@ body { .box { width: fit-content; min-width: 112px; - background: white; - border: 1px solid #cbd5e1; - border-radius: 8px; + background: var(--color-surface); + border: 1px solid var(--color-border); + border-radius: var(--radius-sm); padding: 6px; - box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); + box-shadow: var(--shadow-soft); position: relative; z-index: 10; margin-bottom: 40px; @@ -86,9 +82,9 @@ body { .box-name { font-size: 13px; font-weight: 800; - color: #475569; + color: var(--color-text-soft); text-align: center; - border-bottom: 1px solid #f1f5f9; + border-bottom: 1px solid var(--color-bg); padding-bottom: 4px; margin-bottom: 6px; word-break: keep-all; @@ -99,7 +95,7 @@ body { } .box-level-그룹 .box-name { - background: #3f516a; + background: var(--color-header-soft); color: #ffffff; padding: 8px; border-radius: 6px 6px 0 0; @@ -112,7 +108,7 @@ body { } .box-level-디비전 .box-name { - background: #869fb7; + background: #7b93ab; color: #ffffff; padding: 8px; border-radius: 6px 6px 0 0; @@ -140,8 +136,8 @@ body { .cell-label { grid-column: span 1; - background: #e2e8f0; - color: #475569; + background: var(--color-surface-strong); + color: var(--color-text-soft); font-size: 10px; font-weight: 900; text-align: center; @@ -163,7 +159,7 @@ body { border-radius: 4px; font-size: 11.5px; text-align: left; - border: 1px solid #f1f5f9; + border: 1px solid var(--color-bg); border-left: 4px solid #94a3b8; background: #f8fafc; cursor: pointer; @@ -178,8 +174,8 @@ body { } .member-card:hover { - background: white; - border-color: #4f46e5; + background: var(--color-surface); + border-color: var(--color-accent); box-shadow: 0 4px 10px rgba(79, 70, 229, 0.2); transform: translateY(-2px); z-index: 50; @@ -192,7 +188,7 @@ body { top: 0; width: 4px; height: 100%; - background: #4f46e5; + background: var(--color-accent); border-radius: 4px; z-index: 20; } @@ -204,7 +200,7 @@ body { top: 0; width: 4px; height: 100%; - background: #4f46e5; + background: var(--color-accent); border-radius: 4px; z-index: 20; } @@ -577,11 +573,11 @@ body { position: fixed; top: 18px; left: 25px; - background: rgba(255, 255, 255, 0.9); - border-radius: 12px; + background: var(--color-surface-soft); + border-radius: var(--radius-md); padding: 10px 18px; - box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); - border: 1px solid #e2e8f0; + box-shadow: var(--shadow-soft); + border: 1px solid var(--color-border-soft); z-index: 1010; display: flex; align-items: center; @@ -596,12 +592,12 @@ body { background: transparent; font-size: 13px; font-weight: 700; - color: #1e293b; + color: var(--color-text); width: 180px; } .search-icon { - color: #64748b; + color: var(--color-text-muted); display: flex; align-items: center; } @@ -611,11 +607,11 @@ body { top: 18px; right: 25px; width: 400px; - background: rgba(255, 255, 255, 0.9); - border-radius: 12px; + background: var(--color-surface-soft); + border-radius: var(--radius-md); padding: 15px; - box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); - border: 1px solid #e2e8f0; + box-shadow: var(--shadow-soft); + border: 1px solid var(--color-border-soft); z-index: 1010; backdrop-filter: blur(8px); transition: all 0.3s; @@ -633,7 +629,7 @@ body { .stats-table th { background: #f8fafc; - color: #64748b; + color: var(--color-text-muted); font-weight: 800; padding: 8px 4px; border: 1px solid #e2e8f0; @@ -645,12 +641,12 @@ body { border: 1px solid #e2e8f0; text-align: center; font-weight: 700; - color: #1e293b; + color: var(--color-text); } .stats-table .row-label { background: #f8fafc; - color: #475569; + color: var(--color-text-soft); font-weight: 800; width: 80px; } @@ -667,7 +663,7 @@ body { .sum-row td { font-weight: 900 !important; - color: #0f172a !important; + color: var(--color-text) !important; } @keyframes target-pulse { @@ -690,15 +686,15 @@ body { z-index: 5001; width: 45px; height: 45px; - background: rgba(255, 255, 255, 0.9); + background: var(--color-surface-soft); backdrop-filter: blur(4px); - border: 1px solid #e2e8f0; + border: 1px solid var(--color-border-soft); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 18px; - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); + box-shadow: var(--shadow-soft); transition: all 0.3s; cursor: pointer; } @@ -726,8 +722,8 @@ body { } .admin-mode-btn.is-admin { - background: #4f46e5; - border-color: #4f46e5; + background: var(--color-accent); + border-color: var(--color-accent); box-shadow: 0 4px 15px rgba(79, 70, 229, 0.3); }