관리자 페이지 레이아웃 개선

- style.css 충돌 제거 (admin 전용 스타일만 사용)
- 베스트 프랙티스 적용:
  - Flexbox 기반 레이아웃 정리
  - 고정 사이드바 + 스크롤 콘텐츠 영역
  - 반응형 디자인 개선 (960px, 768px, 480px)
  - 테이블 가로 스크롤 지원
  - 카드/버튼/알림 스타일 통일
  - 색상 팔레트 일관성
- 레이아웃 겹침 문제 해결

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

static/css/admin.css

@@ -1,312 +1,639 @@
 /* ============================================
    WIXON Blog Admin Styles
+   Best Practices Applied
    ============================================ */
 
-/* Admin Layout */
+/* Reset & Base */
+.admin-body {
+    margin: 0;
+    padding: 0;
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.5;
+    background: #f4f6f9;
+    color: #333;
+}
+
+.admin-body * {
+    box-sizing: border-box;
+}
+
+/* Admin Layout - Flexbox */
 .admin__wrap {
     display: flex;
     min-height: 100vh;
+    width: 100%;
 }
 
-/* Sidebar */
+/* ============================================
+   Sidebar
+   ============================================ */
 .admin__sidebar {
-    width: 250px;
+    width: 260px;
-    background: #1e1e2d;
+    min-width: 260px;
+    background: linear-gradient(180deg, #1e1e2d 0%, #1a1a27 100%);
     color: #fff;
-    padding: 20px;
     position: fixed;
+    top: 0;
+    left: 0;
     height: 100vh;
     display: flex;
     flex-direction: column;
+    z-index: 1000;
+    overflow-y: auto;
+    box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
 }
 
 .admin__logo {
+    padding: 25px 20px;
     text-align: center;
-    margin-bottom: 30px;
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
-    padding-bottom: 20px;
+}
-    border-bottom: 1px solid #3a3a4d;
+
+.admin__logo a {
+    display: inline-block;
 }
 
 .admin__logo img {
-    max-width: 120px;
+    max-width: 100px;
+    height: auto;
+    filter: brightness(0) invert(1);
 }
 
 .admin__logo span {
     display: block;
-    color: #a2a3b7;
+    color: #8a8a9e;
-    font-size: 12px;
+    font-size: 11px;
-    margin-top: 5px;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+    margin-top: 8px;
 }
 
+/* Navigation Menu */
 .admin__menu {
     list-style: none;
-    padding: 0;
+    padding: 20px 15px;
     margin: 0;
     flex: 1;
 }
 
+.admin__menu li {
+    margin-bottom: 5px;
+}
+
 .admin__menu li a {
     display: flex;
     align-items: center;
-    padding: 12px 15px;
+    padding: 12px 16px;
-    color: #a2a3b7;
+    color: #b5b5c3;
     text-decoration: none;
-    border-radius: 5px;
+    border-radius: 6px;
-    margin-bottom: 5px;
+    font-size: 14px;
-    transition: all 0.3s ease;
+    font-weight: 500;
+    transition: all 0.2s ease;
 }
 
-.admin__menu li a:hover,
+.admin__menu li a:hover {
-.admin__menu li a.active {
+    background: rgba(255, 255, 255, 0.05);
-    background: #1b1b28;
     color: #fff;
 }
 
-.admin__menu li a span.uk-icon {
+.admin__menu li a.active {
-    margin-right: 10px;
+    background: #901438;
+    color: #fff;
+    box-shadow: 0 4px 15px rgba(144, 20, 56, 0.3);
+}
+
+.admin__menu li a .uk-icon {
+    margin-right: 12px;
+    opacity: 0.8;
+}
+
+.admin__menu li a.active .uk-icon {
+    opacity: 1;
 }
 
 /* User Section */
 .admin__user {
-    padding-top: 20px;
+    padding: 20px;
-    border-top: 1px solid #3a3a4d;
+    border-top: 1px solid rgba(255, 255, 255, 0.1);
+    background: rgba(0, 0, 0, 0.1);
 }
 
 .admin__user .user__name {
-    color: #fff;
-    font-weight: 500;
-    margin-bottom: 10px;
     display: block;
+    color: #fff;
+    font-weight: 600;
+    font-size: 14px;
+    margin-bottom: 12px;
+}
+
+.admin__user .user__links {
+    display: flex;
+    gap: 15px;
 }
 
 .admin__user a {
-    color: #a2a3b7;
+    color: #8a8a9e;
     text-decoration: none;
     font-size: 13px;
-    margin-right: 15px;
+    transition: color 0.2s ease;
 }
 
 .admin__user a:hover {
     color: #fff;
 }
 
-/* Main Content */
+/* ============================================
+   Main Content Area
+   ============================================ */
 .admin__content {
     flex: 1;
-    margin-left: 250px;
+    margin-left: 260px;
     padding: 30px;
-    background: #f5f5f5;
+    background: #f4f6f9;
     min-height: 100vh;
+    width: calc(100% - 260px);
 }
 
-.admin__content h1 {
+/* Page Header */
-    font-size: 24px;
-    margin-bottom: 25px;
-    color: #333;
-}
-
-/* Stats Cards */
-.stat__card {
-    background: #fff;
-    border-radius: 8px;
-    padding: 25px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-.stat__card h3 {
-    font-size: 14px;
-    color: #666;
-    margin: 0 0 10px 0;
-    font-weight: 500;
-}
-
-.stat__number {
-    font-size: 2.5em;
-    font-weight: bold;
-    color: #901438;
-    margin: 0;
-}
-
-.stat__number.green {
-    color: #28a745;
-}
-
-.stat__number.orange {
-    color: #fd7e14;
-}
-
-.stat__number.red {
-    color: #dc3545;
-}
-
-.stat__number.blue {
-    color: #007bff;
-}
-
-/* Tables */
-.admin__table {
-    background: #fff;
-    border-radius: 8px;
-    overflow: hidden;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-.admin__table table {
-    margin: 0;
-}
-
-.admin__table th {
-    background: #f8f9fa;
-    font-weight: 600;
-    font-size: 13px;
-    color: #666;
-    text-transform: uppercase;
-}
-
-.admin__table td {
-    vertical-align: middle;
-}
-
-.admin__table .uk-icon-link {
-    margin-right: 8px;
-    color: #666;
-}
-
-.admin__table .uk-icon-link:hover {
-    color: #901438;
-}
-
-/* Labels */
-.uk-label {
-    font-size: 11px;
-    padding: 3px 8px;
-    border-radius: 3px;
-}
-
-.uk-label-success {
-    background: #28a745;
-}
-
-.uk-label-danger {
-    background: #dc3545;
-}
-
-.uk-label-warning {
-    background: #fd7e14;
-}
-
-/* Filter Form */
-.filter__form {
-    background: #fff;
-    padding: 20px;
-    border-radius: 8px;
-    margin-bottom: 20px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-/* Pagination */
-.admin__pagination {
-    margin-top: 20px;
-    padding: 20px;
-    background: #fff;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-}
-
-/* Forms */
-.admin__form {
-    background: #fff;
-    padding: 30px;
-    border-radius: 8px;
-    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
-    max-width: 800px;
-}
-
-.admin__form .uk-form-label {
-    font-weight: 600;
-    color: #333;
-}
-
-/* Alerts */
-.admin__content .uk-alert {
-    border-radius: 5px;
-}
-
-/* Action Buttons */
-.action__buttons {
-    display: flex;
-    gap: 10px;
-    margin-bottom: 20px;
-}
-
-/* Header with actions */
 .page__header {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    margin-bottom: 25px;
+    margin-bottom: 30px;
+    flex-wrap: wrap;
+    gap: 15px;
 }
 
 .page__header h1 {
     margin: 0;
+    font-size: 24px;
+    font-weight: 600;
+    color: #1e1e2d;
 }
 
-/* Post Title Link */
+.admin__content > h1 {
+    font-size: 24px;
+    font-weight: 600;
+    color: #1e1e2d;
+    margin: 0 0 30px 0;
+}
+
+/* ============================================
+   Cards & Panels
+   ============================================ */
+.stat__card {
+    background: #fff;
+    border-radius: 10px;
+    padding: 25px;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
+    border: 1px solid #eef0f3;
+    transition: transform 0.2s ease, box-shadow 0.2s ease;
+}
+
+.stat__card:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
+}
+
+.stat__card h3 {
+    font-size: 13px;
+    color: #7e8299;
+    margin: 0 0 12px 0;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+}
+
+.stat__number {
+    font-size: 2.2rem;
+    font-weight: 700;
+    color: #1e1e2d;
+    margin: 0;
+    line-height: 1;
+}
+
+.stat__number.green { color: #1bc5bd; }
+.stat__number.orange { color: #ffa800; }
+.stat__number.red { color: #f64e60; }
+.stat__number.blue { color: #3699ff; }
+
+/* ============================================
+   Tables
+   ============================================ */
+.admin__table {
+    background: #fff;
+    border-radius: 10px;
+    overflow: hidden;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
+    border: 1px solid #eef0f3;
+}
+
+.admin__table .uk-table {
+    margin: 0;
+}
+
+.admin__table .uk-table th {
+    background: #f8f9fc;
+    font-weight: 600;
+    font-size: 12px;
+    color: #7e8299;
+    text-transform: uppercase;
+    letter-spacing: 0.5px;
+    padding: 15px 20px;
+    border-bottom: 1px solid #eef0f3;
+}
+
+.admin__table .uk-table td {
+    padding: 15px 20px;
+    vertical-align: middle;
+    border-bottom: 1px solid #eef0f3;
+    font-size: 14px;
+}
+
+.admin__table .uk-table tbody tr:hover {
+    background: #f8f9fc;
+}
+
+.admin__table .uk-table tbody tr:last-child td {
+    border-bottom: none;
+}
+
+/* Table Links */
 .post__title__link {
-    color: #333;
+    color: #1e1e2d;
     text-decoration: none;
+    font-weight: 500;
 }
 
 .post__title__link:hover {
     color: #901438;
 }
 
-/* Responsive */
+/* Table Actions */
+.admin__table .uk-icon-link {
+    color: #b5b5c3;
+    margin-right: 10px;
+    transition: color 0.2s ease;
+}
+
+.admin__table .uk-icon-link:hover {
+    color: #901438;
+}
+
+/* ============================================
+   Labels & Badges
+   ============================================ */
+.uk-label {
+    font-size: 11px;
+    font-weight: 600;
+    padding: 4px 10px;
+    border-radius: 4px;
+    text-transform: uppercase;
+    letter-spacing: 0.3px;
+}
+
+.uk-label-success {
+    background: #c9f7f5;
+    color: #1bc5bd;
+}
+
+.uk-label-warning {
+    background: #fff4de;
+    color: #ffa800;
+}
+
+.uk-label-danger {
+    background: #ffe2e5;
+    color: #f64e60;
+}
+
+/* ============================================
+   Filter Form
+   ============================================ */
+.filter__form {
+    background: #fff;
+    padding: 20px 25px;
+    border-radius: 10px;
+    margin-bottom: 25px;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
+    border: 1px solid #eef0f3;
+}
+
+.filter__form .uk-select,
+.filter__form .uk-input {
+    border: 1px solid #e4e6ef;
+    border-radius: 6px;
+    height: 42px;
+    font-size: 14px;
+}
+
+.filter__form .uk-select:focus,
+.filter__form .uk-input:focus {
+    border-color: #901438;
+    outline: none;
+}
+
+.filter__form .uk-button {
+    height: 42px;
+    border-radius: 6px;
+    font-weight: 500;
+}
+
+/* ============================================
+   Pagination
+   ============================================ */
+.admin__pagination {
+    background: #fff;
+    padding: 20px 25px;
+    border-radius: 10px;
+    margin-top: 25px;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
+    border: 1px solid #eef0f3;
+}
+
+.admin__pagination .uk-pagination {
+    margin: 0;
+}
+
+.admin__pagination .uk-pagination > li > a,
+.admin__pagination .uk-pagination > li > span {
+    padding: 8px 14px;
+    border-radius: 6px;
+    font-size: 14px;
+}
+
+.admin__pagination .uk-pagination > .uk-active > span {
+    background: #901438;
+    color: #fff;
+}
+
+/* ============================================
+   Forms
+   ============================================ */
+.admin__form {
+    background: #fff;
+    padding: 35px;
+    border-radius: 10px;
+    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
+    border: 1px solid #eef0f3;
+    max-width: 900px;
+}
+
+.admin__form .uk-form-label {
+    font-weight: 600;
+    color: #1e1e2d;
+    font-size: 14px;
+    margin-bottom: 8px;
+    display: block;
+}
+
+.admin__form .uk-input,
+.admin__form .uk-select,
+.admin__form .uk-textarea {
+    border: 1px solid #e4e6ef;
+    border-radius: 6px;
+    font-size: 14px;
+    padding: 10px 15px;
+}
+
+.admin__form .uk-input:focus,
+.admin__form .uk-select:focus,
+.admin__form .uk-textarea:focus {
+    border-color: #901438;
+    outline: none;
+    box-shadow: 0 0 0 3px rgba(144, 20, 56, 0.1);
+}
+
+.admin__form .uk-margin {
+    margin-bottom: 25px;
+}
+
+/* ============================================
+   Buttons
+   ============================================ */
+.uk-button-primary {
+    background: #901438;
+    border: none;
+    border-radius: 6px;
+    font-weight: 500;
+    transition: all 0.2s ease;
+}
+
+.uk-button-primary:hover {
+    background: #7a1130;
+    transform: translateY(-1px);
+}
+
+.uk-button-default {
+    background: #f5f8fa;
+    border: 1px solid #e4e6ef;
+    border-radius: 6px;
+    color: #7e8299;
+    font-weight: 500;
+}
+
+.uk-button-default:hover {
+    background: #eef0f3;
+    color: #1e1e2d;
+}
+
+.uk-button-danger {
+    background: #f64e60;
+    border: none;
+    border-radius: 6px;
+}
+
+.uk-button-danger:hover {
+    background: #ee2d41;
+}
+
+.uk-button-secondary {
+    background: #e4e6ef;
+    color: #7e8299;
+    border: none;
+    border-radius: 6px;
+}
+
+.uk-button-secondary:hover {
+    background: #d6d8e1;
+    color: #1e1e2d;
+}
+
+/* ============================================
+   Alerts
+   ============================================ */
+.admin__content .uk-alert {
+    border-radius: 8px;
+    padding: 15px 20px;
+    margin-bottom: 25px;
+}
+
+.admin__content .uk-alert-primary {
+    background: #e1f0ff;
+    color: #3699ff;
+    border-left: 4px solid #3699ff;
+}
+
+.admin__content .uk-alert-success {
+    background: #c9f7f5;
+    color: #1bc5bd;
+    border-left: 4px solid #1bc5bd;
+}
+
+.admin__content .uk-alert-warning {
+    background: #fff4de;
+    color: #ffa800;
+    border-left: 4px solid #ffa800;
+}
+
+.admin__content .uk-alert-danger {
+    background: #ffe2e5;
+    color: #f64e60;
+    border-left: 4px solid #f64e60;
+}
+
+/* ============================================
+   Quick Links (Dashboard)
+   ============================================ */
+.admin__content .uk-card {
+    border-radius: 10px;
+    border: 1px solid #eef0f3;
+    transition: all 0.2s ease;
+}
+
+.admin__content .uk-card:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
+}
+
+.admin__content .uk-card .uk-icon {
+    color: #901438;
+}
+
+/* ============================================
+   Summernote Editor Override
+   ============================================ */
+.note-editor.note-frame {
+    border: 1px solid #e4e6ef;
+    border-radius: 6px;
+}
+
+.note-editor .note-toolbar {
+    background: #f8f9fc;
+    border-bottom: 1px solid #e4e6ef;
+}
+
+/* ============================================
+   Responsive Design
+   ============================================ */
+@media (max-width: 1200px) {
+    .admin__sidebar {
+        width: 220px;
+        min-width: 220px;
+    }
+
+    .admin__content {
+        margin-left: 220px;
+        width: calc(100% - 220px);
+    }
+}
+
 @media (max-width: 960px) {
     .admin__sidebar {
         width: 70px;
-        padding: 15px 10px;
+        min-width: 70px;
+    }
+
+    .admin__sidebar .admin__logo {
+        padding: 20px 10px;
     }
 
     .admin__sidebar .admin__logo img {
-        max-width: 40px;
+        max-width: 35px;
     }
 
-    .admin__sidebar .admin__logo span,
+    .admin__sidebar .admin__logo span {
-    .admin__menu li a span:not(.uk-icon),
-    .admin__user .user__name {
         display: none;
     }
 
+    .admin__menu {
+        padding: 15px 8px;
+    }
+
     .admin__menu li a {
         justify-content: center;
         padding: 12px;
     }
 
-    .admin__menu li a span.uk-icon {
+    .admin__menu li a .uk-icon {
         margin-right: 0;
     }
 
+    .admin__menu li a span:not(.uk-icon) {
+        display: none;
+    }
+
+    .admin__user {
+        padding: 15px 8px;
+        text-align: center;
+    }
+
+    .admin__user .user__name {
+        display: none;
+    }
+
     .admin__user a {
         display: block;
-        text-align: center;
+        margin: 8px 0;
-        margin: 5px 0;
+        font-size: 11px;
     }
 
     .admin__content {
         margin-left: 70px;
+        width: calc(100% - 70px);
         padding: 20px;
     }
 }
 
-@media (max-width: 640px) {
+@media (max-width: 768px) {
     .page__header {
         flex-direction: column;
         align-items: flex-start;
-        gap: 15px;
     }
 
     .filter__form .uk-grid > div {
-        margin-bottom: 10px;
+        margin-bottom: 15px;
+    }
+
+    .admin__table {
+        overflow-x: auto;
+    }
+
+    .admin__table .uk-table {
+        min-width: 700px;
+    }
+
+    .stat__card {
+        padding: 20px;
+    }
+
+    .stat__number {
+        font-size: 1.8rem;
+    }
+}
+
+@media (max-width: 480px) {
+    .admin__content {
+        padding: 15px;
+    }
+
+    .admin__form {
+        padding: 20px;
+    }
+
+    .page__header h1 {
+        font-size: 20px;
     }
 }

templates/admin/base_admin.html

@@ -5,7 +5,6 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/css/uikit.min.css"/>
-    <link rel="stylesheet" href="/static/css/style.css"/>
     <link rel="stylesheet" href="/static/css/admin.css"/>
     <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.6.16/js/uikit.min.js"></script>
@@ -15,7 +14,7 @@
     <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote-lite.min.js"></script>
     {% block staticfiles %}{% endblock %}
 </head>
-<body>
+<body class="admin-body">
     <div class="admin__wrap">
         <!-- Sidebar -->
         <nav class="admin__sidebar">