design: 글래스모피즘 디자인 전면 적용

- 관리자 페이지: 사이드바/카드/모달/폼 유리 효과
- 로그인 페이지: 유리 카드 + 강화된 배경 효과
- 비주얼 매퍼: 유리 패널 + 스텝카드
- 공개 페이지(목록/랜딩): 유리 카드 + 애니메이션 그라데이션 배경
- 전체 backdrop-filter blur + 반투명 배경 + 애니메이션 오브

views/admin/mapper.ejs

@@ -2,22 +2,23 @@
 
 <style>
 .mapper-wrap{display:grid;grid-template-columns:1fr 340px;gap:1rem;height:calc(100vh - 120px)}
-.preview-panel{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column}
-.preview-panel .toolbar{padding:.6rem .8rem;border-bottom:1px solid var(--border);display:flex;gap:.5rem;align-items:center;flex-shrink:0}
+.preview-panel{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--glass-shadow)}
+.preview-panel .toolbar{padding:.6rem .8rem;border-bottom:1px solid var(--glass-border);display:flex;gap:.5rem;align-items:center;flex-shrink:0;background:rgba(255,255,255,.02)}
 .preview-panel .toolbar input{flex:1}
 .preview-panel iframe{flex:1;width:100%;border:none;background:#fff}
 .config-panel{display:flex;flex-direction:column;gap:.8rem;overflow-y:auto}
-.step-card{background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius);padding:1rem}
+.step-card{background:var(--glass-bg);backdrop-filter:var(--glass-blur);-webkit-backdrop-filter:var(--glass-blur);border:1px solid var(--glass-border);border-radius:var(--radius);padding:1rem;box-shadow:var(--glass-shadow);transition:all .2s}
+.step-card:hover{background:var(--glass-bg-hover);border-color:var(--glass-border-hover)}
 .step-card h3{font-size:.9rem;margin-bottom:.6rem;color:var(--primary)}
-.step-card .step-num{display:inline-block;background:var(--primary);color:#fff;width:22px;height:22px;border-radius:50%;text-align:center;line-height:22px;font-size:.75rem;font-weight:700;margin-right:.4rem}
-.field-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.4rem .6rem;background:var(--bg);border-radius:6px;font-size:.82rem}
+.step-card .step-num{display:inline-block;background:linear-gradient(135deg,var(--primary),#7c3aed);color:#fff;width:22px;height:22px;border-radius:50%;text-align:center;line-height:22px;font-size:.75rem;font-weight:700;margin-right:.4rem;box-shadow:0 2px 8px rgba(99,102,241,.3)}
+.field-row{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.4rem .6rem;background:rgba(0,0,0,.2);border:1px solid rgba(255,255,255,.05);border-radius:8px;font-size:.82rem}
 .field-row .field-name{width:70px;font-weight:600;flex-shrink:0}
 .field-row .field-selector{flex:1;color:var(--muted);font-family:monospace;font-size:.75rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
 .field-row .field-selector.mapped{color:var(--success)}
 .field-row button{flex-shrink:0}
 .mapping-active{outline:3px solid var(--primary)!important;animation:pulse .8s infinite}
 @keyframes pulse{0%,100%{outline-color:var(--primary)}50%{outline-color:var(--success)}}
-.json-preview{background:var(--bg);padding:.8rem;border-radius:var(--radius);font-size:.72rem;font-family:monospace;white-space:pre-wrap;max-height:200px;overflow:auto;color:var(--success)}
+.json-preview{background:rgba(0,0,0,.3);border:1px solid var(--glass-border);padding:.8rem;border-radius:var(--radius);font-size:.72rem;font-family:monospace;white-space:pre-wrap;max-height:200px;overflow:auto;color:var(--success)}
 </style>
 
 <div class="mapper-wrap">