From e93c7c1d5b19b2ed9edf83862adcca19d14966f8 Mon Sep 17 00:00:00 2001
From: zio <admin@zioinfo.co.kr>
Date: Mon, 1 Jun 2026 22:13:02 +0900
Subject: [PATCH] feat: add frontend/src/styles/mail.css

---
 frontend/src/styles/mail.css | 148 +++++++++++++++++++++++++++++++++++
 1 file changed, 148 insertions(+)
 create mode 100644 frontend/src/styles/mail.css

diff --git a/frontend/src/styles/mail.css b/frontend/src/styles/mail.css
new file mode 100644
index 00000000..bbf15822
--- /dev/null
+++ b/frontend/src/styles/mail.css
@@ -0,0 +1,148 @@
+/* zioinfo-mail 웹메일 스타일 */
+:root {
+  --primary: #003366;
+  --primary-light: #004c99;
+  --accent: #00A0C8;
+  --bg: #f0f2f5;
+  --surface: #ffffff;
+  --surface2: #f8f9fa;
+  --border: #e0e4e8;
+  --text: #1a2332;
+  --text-muted: #6b7a8d;
+  --unread-bg: #eef4ff;
+  --selected-bg: #dbeafe;
+  --danger: #dc2626;
+  --success: #16a34a;
+  --shadow: 0 1px 4px rgba(0,0,0,.08);
+  --shadow-md: 0 4px 16px rgba(0,0,0,.12);
+}
+
+* { box-sizing: border-box; margin: 0; padding: 0 }
+body { font-family: 'Pretendard', -apple-system, sans-serif; font-size: 14px; color: var(--text); background: var(--bg) }
+
+/* ── 로그인 ── */
+.login-page { min-height:100vh; display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#001f4d 0%,#003a7a 50%,#005c99 100%) }
+.login-box { background:var(--surface); border-radius:16px; padding:40px; width:400px; box-shadow:var(--shadow-md) }
+.login-logo { display:flex; align-items:center; gap:16px; margin-bottom:32px }
+.logo-mark { font-size:40px }
+.logo-title { font-size:20px; font-weight:700; color:var(--primary) }
+.logo-sub { font-size:13px; color:var(--text-muted) }
+.login-form { display:flex; flex-direction:column; gap:16px }
+.form-group label { display:block; font-size:13px; font-weight:600; color:var(--text-muted); margin-bottom:6px }
+.form-group input { width:100%; padding:10px 14px; border:1.5px solid var(--border); border-radius:8px; font-size:14px; outline:none; transition:.2s }
+.form-group input:focus { border-color:var(--accent) }
+.login-error { color:var(--danger); font-size:13px; background:#fef2f2; padding:10px; border-radius:8px }
+.btn-login { padding:12px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:15px; font-weight:600; cursor:pointer; transition:.2s }
+.btn-login:hover:not(:disabled) { background:var(--primary-light) }
+.btn-login:disabled { opacity:.6 }
+.login-footer { text-align:center; color:var(--text-muted); font-size:12px; margin-top:20px }
+
+/* ── 앱 레이아웃 ── */
+.mail-app { display:flex; flex-direction:column; height:100vh; overflow:hidden }
+.mail-header { display:flex; align-items:center; gap:16px; padding:0 20px; height:54px; background:var(--primary); color:#fff; flex-shrink:0; box-shadow:0 2px 8px rgba(0,0,0,.2) }
+.header-brand { display:flex; align-items:center; gap:8px; font-weight:700; font-size:16px; flex-shrink:0 }
+.header-icon { font-size:20px }
+.header-center { flex:1 }
+.header-actions { display:flex; align-items:center; gap:10px; flex-shrink:0 }
+.btn-compose { background:var(--accent); color:#fff; border:none; padding:7px 14px; border-radius:8px; font-size:13px; font-weight:600; cursor:pointer }
+.btn-compose:hover { opacity:.9 }
+.btn-refresh,.btn-icon { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); padding:6px 10px; border-radius:6px; cursor:pointer }
+.header-user { font-size:13px; opacity:.85 }
+.btn-logout { background:transparent; color:rgba(255,255,255,.7); border:1px solid rgba(255,255,255,.2); padding:5px 10px; border-radius:6px; font-size:12px; cursor:pointer }
+.btn-logout:hover { background:rgba(255,255,255,.1) }
+
+.mail-body { display:flex; flex:1; overflow:hidden }
+
+/* ── 사이드바 ── */
+.mail-sidebar { width:200px; flex-shrink:0; background:var(--surface); border-right:1px solid var(--border); overflow-y:auto; padding:8px 0 }
+.folder-tree-title { padding:12px 16px 6px; font-size:11px; font-weight:700; color:var(--text-muted); letter-spacing:.05em; text-transform:uppercase }
+.folder-item { display:flex; align-items:center; gap:8px; width:100%; padding:8px 16px; background:none; border:none; cursor:pointer; font-size:13px; color:var(--text); text-align:left; border-radius:0; transition:.15s }
+.folder-item:hover { background:var(--bg) }
+.folder-item.active { background:var(--selected-bg); color:var(--primary); font-weight:600 }
+.folder-icon { font-size:15px }
+.folder-name { flex:1 }
+.folder-badge { background:var(--accent); color:#fff; border-radius:10px; padding:1px 7px; font-size:11px; font-weight:700 }
+
+/* ── 메일 목록 ── */
+.mail-list-pane { width:300px; flex-shrink:0; border-right:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden }
+.mail-list { display:flex; flex-direction:column; height:100% }
+.mail-list-header { display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--border); font-size:12px; color:var(--text-muted); flex-shrink:0 }
+.mail-count { font-weight:600 }
+.mail-items { flex:1; overflow-y:auto; list-style:none }
+.mail-item { position:relative; padding:12px 14px; border-bottom:1px solid var(--border); cursor:pointer; transition:.15s }
+.mail-item:hover { background:var(--surface2) }
+.mail-item.unread { background:var(--unread-bg) }
+.mail-item.selected { background:var(--selected-bg) }
+.mail-item-top { display:flex; justify-content:space-between; margin-bottom:4px }
+.mail-sender { font-size:13px; font-weight:600; color:var(--text); flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
+.mail-item.unread .mail-sender { color:var(--primary) }
+.mail-date { font-size:11px; color:var(--text-muted); flex-shrink:0; margin-left:8px }
+.mail-item-subject { font-size:13px; font-weight:500; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
+.mail-item.unread .mail-item-subject { font-weight:700 }
+.mail-item-preview { font-size:12px; color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding-right:24px }
+.mail-size { float:right; font-size:11px }
+.btn-delete { position:absolute; right:10px; top:50%; transform:translateY(-50%); opacity:0; background:none; border:none; cursor:pointer; font-size:14px }
+.mail-item:hover .btn-delete { opacity:.5 }
+.btn-delete:hover { opacity:1 !important }
+.mail-list-loading,.mail-list-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:200px; color:var(--text-muted); gap:12px }
+.empty-icon { font-size:40px }
+.pagination { display:flex; align-items:center; justify-content:center; gap:12px; padding:10px; border-top:1px solid var(--border); flex-shrink:0 }
+.pagination button { padding:4px 10px; border:1px solid var(--border); border-radius:4px; cursor:pointer; background:var(--surface) }
+.pagination button:disabled { opacity:.4; cursor:default }
+
+/* ── 메일 본문 ── */
+.mail-view-pane { flex:1; overflow:hidden; display:flex; flex-direction:column }
+.mail-view { display:flex; flex-direction:column; height:100%; overflow-y:auto }
+.mail-view-empty { display:flex; flex-direction:column; align-items:center; justify-content:center; height:100%; color:var(--text-muted); gap:12px }
+.mail-view-header { padding:20px 24px; border-bottom:1px solid var(--border); background:var(--surface); flex-shrink:0 }
+.mail-subject { font-size:18px; font-weight:700; color:var(--text); margin-bottom:14px }
+.mail-meta { display:flex; flex-direction:column; gap:6px; font-size:13px }
+.meta-label { font-weight:600; color:var(--text-muted); width:80px; display:inline-block }
+.mail-actions { display:flex; gap:8px; margin-top:14px }
+.btn-reply,.btn-forward { padding:7px 14px; border:1px solid var(--border); border-radius:6px; cursor:pointer; background:var(--surface); font-size:13px }
+.btn-reply:hover,.btn-forward:hover { background:var(--bg) }
+.mail-attachments { padding:12px 24px; background:var(--surface2); border-bottom:1px solid var(--border) }
+.attach-title { font-size:12px; font-weight:600; color:var(--text-muted); margin-bottom:8px }
+.attach-list { display:flex; flex-wrap:wrap; gap:8px }
+.attach-item { display:flex; align-items:center; gap:4px; padding:6px 12px; background:var(--surface); border:1px solid var(--border); border-radius:6px; text-decoration:none; color:var(--primary); font-size:12px }
+.attach-item:hover { background:var(--bg) }
+.attach-size { color:var(--text-muted) }
+.mail-body-content { flex:1; padding:20px 24px; overflow-y:auto }
+.mail-html-body { line-height:1.6; max-width:100%; overflow-x:auto }
+.mail-html-body img { max-width:100% }
+.mail-text-body { white-space:pre-wrap; font-family:inherit; line-height:1.7; color:var(--text) }
+
+/* ── 검색 ── */
+.search-bar { display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.15); border-radius:8px; padding:6px 12px; max-width:400px }
+.search-bar input { background:none; border:none; color:#fff; font-size:13px; outline:none; width:200px }
+.search-bar input::placeholder { color:rgba(255,255,255,.6) }
+.search-icon { font-size:14px; opacity:.8 }
+.search-clear { background:none; border:none; color:rgba(255,255,255,.7); cursor:pointer; font-size:12px }
+
+/* ── 작성 ── */
+.compose-overlay { position:fixed; inset:0; background:rgba(0,0,0,.4); display:flex; align-items:center; justify-content:center; z-index:1000 }
+.compose-box { background:var(--surface); border-radius:12px; width:620px; max-width:95vw; max-height:90vh; display:flex; flex-direction:column; box-shadow:var(--shadow-md) }
+.compose-header { display:flex; justify-content:space-between; align-items:center; padding:14px 20px; border-bottom:1px solid var(--border); font-weight:600; font-size:15px }
+.compose-close { background:none; border:none; cursor:pointer; font-size:18px; color:var(--text-muted) }
+.compose-fields { padding:8px 20px; display:flex; flex-direction:column; gap:2px }
+.compose-field { display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border) }
+.compose-field label { font-size:12px; font-weight:600; color:var(--text-muted); width:70px; flex-shrink:0 }
+.compose-field input { flex:1; border:none; font-size:13px; outline:none }
+.compose-from { font-size:13px; color:var(--text-muted) }
+.btn-cc-toggle { background:none; border:1px solid var(--border); border-radius:4px; padding:3px 8px; font-size:11px; cursor:pointer; color:var(--text-muted) }
+.compose-body { flex:1; min-height:280px; padding:16px 20px; border:none; border-top:1px solid var(--border); font-size:14px; font-family:inherit; outline:none; resize:none; line-height:1.6 }
+.compose-error { margin:0 20px; padding:8px 12px; background:#fef2f2; color:var(--danger); border-radius:6px; font-size:13px }
+.compose-success { margin:0 20px; padding:8px 12px; background:#f0fdf4; color:var(--success); border-radius:6px; font-size:13px }
+.compose-footer { display:flex; gap:10px; padding:14px 20px; border-top:1px solid var(--border) }
+.btn-send { padding:9px 20px; background:var(--primary); color:#fff; border:none; border-radius:8px; font-size:14px; font-weight:600; cursor:pointer }
+.btn-send:hover:not(:disabled) { background:var(--primary-light) }
+.btn-send:disabled { opacity:.6 }
+.btn-cancel { padding:9px 14px; background:none; border:1px solid var(--border); border-radius:8px; font-size:14px; cursor:pointer; color:var(--text-muted) }
+
+/* ── 반응형 ── */
+@media (max-width:768px) {
+  .mail-sidebar { display:none }
+  .mail-list-pane { width:100%; border-right:none }
+  .mail-view-pane { display:none }
+  .header-title { display:none }
+}