@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Pretendard:wght@400;500;600;700;800&display=swap'); /* ========================================================= 공통 기본 설정 ========================================================= */ header.main { display: none !important; } :root { --admin-primary: #4f46e5; --admin-primary-dark: #3730a3; --admin-primary-light: #eef2ff; --admin-background: #f5f7fb; --admin-surface: #ffffff; --admin-sidebar: #111827; --admin-sidebar-soft: #1f2937; --admin-text: #111827; --admin-text-soft: #6b7280; --admin-border: #e5e7eb; --admin-danger: #ef4444; --admin-success: #10b981; --admin-warning: #f59e0b; --admin-shadow: 0 14px 40px rgba(15, 23, 42, 0.06); } * { box-sizing: border-box; } html, body { min-height: 100%; } body { margin: 0; background: var(--admin-background); color: var(--admin-text); font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } button, input, select, textarea { font: inherit; } button, a { -webkit-tap-highlight-color: transparent; } button { color: inherit; } a { color: inherit; text-decoration: none; } svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } /* ========================================================= 관리자 전체 레이아웃 ========================================================= */ .admin-layout { width: 100%; min-height: 100vh; display: flex; } .admin-main { width: calc(100% - 270px); min-width: 0; min-height: 100vh; flex: 1; } /* ========================================================= PC 사이드바 ========================================================= */ .admin-sidebar { width: 270px; min-width: 270px; height: 100vh; background: var(--admin-sidebar); color: #ffffff; position: sticky; top: 0; display: flex; flex-direction: column; overflow: hidden; z-index: 100; } .admin-sidebar-head { min-height: 84px; padding: 0 24px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); display: flex; align-items: center; justify-content: space-between; } .admin-sidebar-logo { display: inline-flex; align-items: center; gap: 12px; } .admin-sidebar-logo-mark { width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(135deg, #6366f1, #4338ca); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 18px; font-weight: 800; } .admin-sidebar-logo-text { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .admin-sidebar-logo-text strong { font-size: 17px; font-weight: 800; letter-spacing: -0.02em; } .admin-sidebar-logo-text small { color: rgba(255, 255, 255, 0.45); font-size: 9px; font-weight: 700; letter-spacing: 0.16em; } .admin-sidebar-body { min-height: 0; padding: 20px 14px; flex: 1; overflow-x: hidden; overflow-y: auto; } .admin-sidebar-body::-webkit-scrollbar { width: 5px; } .admin-sidebar-body::-webkit-scrollbar-track { background: transparent; } .admin-sidebar-body::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.12); } /* ========================================================= 사이드바 메뉴 ========================================================= */ .admin-navigation-group + .admin-navigation-group { margin-top: 26px; } .admin-navigation-title { display: block; margin: 0 12px 10px; color: rgba(255, 255, 255, 0.34); font-size: 9px; font-weight: 800; letter-spacing: 0.14em; } .admin-navigation-link, .admin-navigation-parent { width: 100%; min-height: 46px; padding: 0 13px; border: 0; border-radius: 11px; background: transparent; color: rgba(255, 255, 255, 0.68); display: flex; align-items: center; gap: 12px; cursor: pointer; text-align: left; transition: background 0.2s ease, color 0.2s ease; } .admin-navigation-link:hover, .admin-navigation-parent:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } .admin-navigation-link.is-active, .admin-navigation-parent.is-active { background: var(--admin-primary); color: #ffffff; } .admin-navigation-parent { justify-content: space-between; } .admin-navigation-parent-left { min-width: 0; display: flex; align-items: center; gap: 12px; } .admin-navigation-icon { width: 19px; height: 19px; flex: 0 0 auto; } .admin-navigation-label { min-width: 0; font-size: 13px; font-weight: 650; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-navigation-arrow { width: 15px; height: 15px; flex: 0 0 auto; transition: transform 0.2s ease; } .admin-navigation-item.is-open .admin-navigation-arrow { transform: rotate(90deg); } .admin-navigation-submenu { max-height: 0; margin-left: 42px; overflow: hidden; transition: max-height 0.25s ease; } .admin-navigation-item.is-open .admin-navigation-submenu { max-height: 320px; } .admin-navigation-submenu a { min-height: 36px; padding: 9px 12px; border-radius: 8px; color: rgba(255, 255, 255, 0.45); display: flex; align-items: center; font-size: 12px; font-weight: 600; transition: background 0.2s ease, color 0.2s ease; } .admin-navigation-submenu a:hover { background: rgba(255, 255, 255, 0.04); color: #ffffff; } .admin-navigation-submenu a.is-active { background: rgba(79, 70, 229, 0.18); color: #ffffff; } /* ========================================================= 사이드바 하단 관리자 정보 ========================================================= */ .admin-sidebar-foot { padding: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); } .admin-sidebar-admin { min-height: 58px; padding: 10px 12px; border-radius: 13px; background: rgba(255, 255, 255, 0.05); display: flex; align-items: center; } .admin-sidebar-admin-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--admin-primary); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 13px; font-weight: 800; } .admin-sidebar-admin-info { min-width: 0; margin-left: 10px; display: flex; flex: 1; flex-direction: column; gap: 3px; } .admin-sidebar-admin-info strong { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-sidebar-admin-info span { color: rgba(255, 255, 255, 0.4); font-size: 10px; } .admin-sidebar-logout { width: 32px; height: 32px; padding: 7px; border-radius: 8px; color: rgba(255, 255, 255, 0.42); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; transition: background 0.2s ease, color 0.2s ease; } .admin-sidebar-logout:hover { background: rgba(255, 255, 255, 0.06); color: #ffffff; } /* ========================================================= 모바일 공통 요소 ========================================================= */ .admin-mobile-header { display: none; } .admin-sidebar-overlay { display: none; } .admin-sidebar-close { display: none; } /* ========================================================= 태블릿·모바일 사이드바 ========================================================= */ @media (max-width: 960px) { body.admin-sidebar-open { overflow: hidden; touch-action: none; } .admin-layout { min-height: 100vh; padding-top: 64px; display: block; } .admin-main { width: 100%; min-height: calc(100vh - 64px); } .admin-mobile-header { width: 100%; height: 64px; padding: 0 16px; border-bottom: 1px solid var(--admin-border); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); position: fixed; top: 0; left: 0; z-index: 1100; display: flex; align-items: center; justify-content: space-between; } .admin-mobile-menu-button { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: transparent; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 5px; cursor: pointer; } .admin-mobile-menu-button:hover { background: #f3f4f6; } .admin-mobile-menu-button span { width: 19px; height: 2px; border-radius: 999px; background: var(--admin-text); display: block; } .admin-mobile-logo { position: absolute; left: 50%; display: inline-flex; align-items: center; gap: 9px; transform: translateX(-50%); } .admin-mobile-logo-mark { width: 32px; height: 32px; border-radius: 10px; background: linear-gradient(135deg, #6366f1, #4338ca); color: #ffffff; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; font-size: 13px; font-weight: 800; } .admin-mobile-logo-text { display: flex; flex-direction: column; gap: 1px; } .admin-mobile-logo-text strong { color: var(--admin-text); font-size: 13px; font-weight: 800; letter-spacing: -0.02em; } .admin-mobile-logo-text small { color: var(--admin-text-soft); font-size: 8px; font-weight: 800; letter-spacing: 0.1em; } .admin-mobile-logout { width: 40px; height: 40px; padding: 10px; border-radius: 10px; color: var(--admin-text-soft); display: flex; align-items: center; justify-content: center; } .admin-mobile-logout:hover { background: #f3f4f6; color: var(--admin-text); } .admin-sidebar { width: min(84vw, 310px); min-width: 0; height: 100dvh; position: fixed; top: 0; left: 0; z-index: 1300; overflow: hidden; visibility: hidden; transform: translateX(-105%); transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1), visibility 0.32s ease; will-change: transform; } .admin-sidebar.is-open { visibility: visible; transform: translateX(0); } .admin-sidebar-head { min-height: 72px; padding: 0 16px 0 20px; } .admin-sidebar-close { width: 40px; height: 40px; padding: 0; border: 0; border-radius: 10px; background: rgba(255, 255, 255, 0.06); position: relative; display: block; cursor: pointer; } .admin-sidebar-close:hover { background: rgba(255, 255, 255, 0.11); } .admin-sidebar-close span { width: 18px; height: 2px; border-radius: 999px; background: #ffffff; position: absolute; top: 50%; left: 50%; display: block; } .admin-sidebar-close span:first-child { transform: translate(-50%, -50%) rotate(45deg); } .admin-sidebar-close span:last-child { transform: translate(-50%, -50%) rotate(-45deg); } .admin-sidebar-body { height: calc(100dvh - 146px); max-height: none; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; } .admin-sidebar-foot { min-height: 74px; } .admin-sidebar-overlay { width: 100%; height: 100%; border: 0; background: rgba(15, 23, 42, 0.58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); position: fixed; top: 0; left: 0; z-index: 1200; display: block; opacity: 0; visibility: hidden; cursor: pointer; transition: opacity 0.25s ease, visibility 0.25s ease; } .admin-sidebar-overlay.is-active { opacity: 1; visibility: visible; } } /* ========================================================= 모바일 ========================================================= */ @media (max-width: 640px) { .admin-layout { padding-top: 58px; } .admin-main { min-height: calc(100vh - 58px); } .admin-mobile-header { height: 58px; padding: 0 12px; } .admin-mobile-menu-button, .admin-mobile-logout { width: 38px; height: 38px; } .admin-mobile-logo-mark { width: 29px; height: 29px; border-radius: 9px; } .admin-mobile-logo-text strong { font-size: 12px; } .admin-sidebar { width: min(88vw, 300px); } .admin-sidebar-head { min-height: 68px; } .admin-sidebar-body { height: calc(100dvh - 142px); padding-top: 16px; } } /* ========================================================= 모션 최소화 설정 ========================================================= */ @media (prefers-reduced-motion: reduce) { .admin-sidebar, .admin-sidebar-overlay, .admin-navigation-arrow, .admin-navigation-submenu { transition: none; } }