/* MakeMonLab Studio — Themes admin overlay * Activated when /admin/api/themes.php?action=list returns 200. * Hidden by default; reveals controls. */ body:not([data-admin="1"]) .mml-admin-only { display: none !important; } /* Floating admin toolbar (fixed top, after main nav) */ .mml-admin-bar { position: fixed; top: 80px; left: 0; right: 0; z-index: 1000; background: linear-gradient(180deg, #131313 0%, #1a1a1a 100%); color: #fff; border-bottom: 2px solid #D4A843; padding: 10px 24px; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.05em; box-shadow: 0 4px 16px rgba(0,0,0,0.3); } .mml-admin-bar .mml-bar-title { font-weight: 700; color: #D4A843; text-transform: uppercase; letter-spacing: 0.18em; } .mml-admin-bar input[type="text"] { background: #1f1f1f; border: 1px solid #333; color: #fff; padding: 6px 10px; border-radius: 4px; font-family: inherit; font-size: 12px; width: 200px; } .mml-admin-bar input[type="text"]:focus { border-color: #D4A843; outline: none; } .mml-admin-bar button { background: transparent; color: #fff; border: 1px solid #444; padding: 6px 12px; border-radius: 4px; cursor: pointer; font-family: inherit; font-size: 11px; text-transform: uppercase; letter-spacing: 0.12em; transition: all 0.15s ease; } .mml-admin-bar button:hover { border-color: #D4A843; color: #D4A843; } .mml-admin-bar button.primary { background: #D4A843; color: #131313; border-color: #D4A843; font-weight: 700; } .mml-admin-bar button.primary:hover { background: #b58c2e; } .mml-admin-bar button.danger { border-color: #ef4444; color: #ef4444; } .mml-admin-bar button.danger:hover { background: #ef4444; color: #fff; } .mml-admin-bar button:disabled { opacity: 0.4; cursor: not-allowed; } .mml-admin-bar .mml-counter { background: #D4A843; color: #131313; padding: 3px 10px; border-radius: 999px; font-weight: 700; font-size: 11px; } .mml-admin-bar .mml-counter.zero { background: #444; color: #888; } /* Spacer below admin bar */ body[data-admin="1"] .gallery, body[data-admin="1"] main { padding-top: 56px; } /* Card overlay controls */ body[data-admin="1"] article.card { position: relative; transition: opacity 0.2s; } body[data-admin="1"] article.card[data-hidden="1"] { opacity: 0.45; } body[data-admin="1"] article.card[data-hidden="1"]::before { content: "HIDDEN"; position: absolute; top: 12px; left: 12px; background: #ef4444; color: #fff; padding: 3px 10px; border-radius: 4px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; z-index: 10; } body[data-admin="1"] article.card.mml-selected { box-shadow: 0 0 0 3px #D4A843, 0 4px 16px rgba(212,168,67,0.3); } body[data-admin="1"] article.card.mml-pending { box-shadow: 0 0 0 2px #3b82f6; } /* Per-card admin controls strip (top of card) */ .mml-card-controls { position: absolute; top: 6px; right: 6px; z-index: 20; display: flex; gap: 4px; background: rgba(19,19,19,0.94); backdrop-filter: blur(6px); border-radius: 6px; padding: 4px; opacity: 0; transition: opacity 0.15s; } body[data-admin="1"] article.card:hover .mml-card-controls, body[data-admin="1"] article.card.mml-selected .mml-card-controls { opacity: 1; } .mml-card-controls button { background: transparent; color: #fff; border: none; padding: 4px 6px; border-radius: 4px; cursor: pointer; font-size: 13px; line-height: 1; transition: background 0.1s; min-width: 26px; } .mml-card-controls button:hover { background: #D4A843; color: #131313; } .mml-card-controls button.danger:hover { background: #ef4444; color: #fff; } /* Drag handle on left */ .mml-drag-handle { position: absolute; top: 6px; left: 6px; z-index: 20; background: rgba(19,19,19,0.94); backdrop-filter: blur(6px); border-radius: 6px; padding: 6px 8px; cursor: grab; color: #D4A843; font-size: 14px; opacity: 0; transition: opacity 0.15s; user-select: none; } body[data-admin="1"] article.card:hover .mml-drag-handle { opacity: 1; } .mml-drag-handle:active { cursor: grabbing; } body[data-admin="1"] article.card.mml-dragging { opacity: 0.5; transform: scale(0.96); } body[data-admin="1"] article.card.mml-drop-before { box-shadow: -3px 0 0 #D4A843; } body[data-admin="1"] article.card.mml-drop-after { box-shadow: 3px 0 0 #D4A843; } /* Multi-select checkbox */ .mml-select-cb { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 20; width: 20px; height: 20px; cursor: pointer; accent-color: #D4A843; opacity: 0; transition: opacity 0.15s; } body[data-admin="1"] article.card:hover .mml-select-cb, body[data-admin="1"] article.card.mml-selected .mml-select-cb { opacity: 1; } /* Hidden filter (search no-match) */ article.card.mml-hidden-by-search { display: none !important; } /* Modal (audit log + delete confirm) */ .mml-modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,0.7); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: 24px; } .mml-modal { background: #1a1a1a; color: #fff; border: 1px solid #333; border-radius: 8px; max-width: 720px; width: 100%; max-height: 80vh; overflow: hidden; display: flex; flex-direction: column; font-family: 'Pretendard', sans-serif; } .mml-modal header { padding: 16px 20px; border-bottom: 1px solid #333; display: flex; justify-content: space-between; align-items: center; } .mml-modal header h3 { margin: 0; color: #D4A843; font-size: 16px; text-transform: uppercase; letter-spacing: 0.12em; } .mml-modal header button { background: transparent; color: #fff; border: 1px solid #444; padding: 4px 10px; border-radius: 4px; cursor: pointer; font-size: 12px; } .mml-modal .mml-modal-body { padding: 16px 20px; overflow-y: auto; font-size: 13px; line-height: 1.6; } .mml-modal footer { padding: 12px 20px; border-top: 1px solid #333; display: flex; gap: 8px; justify-content: flex-end; } .mml-modal footer button { background: transparent; color: #fff; border: 1px solid #444; padding: 6px 14px; border-radius: 4px; cursor: pointer; font-family: 'JetBrains Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; } .mml-modal footer button.primary { background: #D4A843; color: #131313; border-color: #D4A843; } .mml-modal footer button.danger { background: #ef4444; color: #fff; border-color: #ef4444; } .mml-audit-row { border-bottom: 1px solid #2a2a2a; padding: 8px 0; display: grid; grid-template-columns: 130px 1fr; gap: 12px; font-family: 'JetBrains Mono', monospace; font-size: 11px; } .mml-audit-row .mml-audit-time { color: #888; } .mml-audit-row .mml-audit-action { color: #D4A843; font-weight: 700; } .mml-audit-row .mml-audit-detail { color: #ccc; } /* Toast */ .mml-toast { position: fixed; bottom: 30px; right: 30px; background: #131313; color: #fff; padding: 12px 18px; border-radius: 6px; border-left: 4px solid #D4A843; box-shadow: 0 8px 24px rgba(0,0,0,0.4); z-index: 10000; font-family: 'JetBrains Mono', monospace; font-size: 12px; animation: mmlToastIn 0.25s ease; } .mml-toast.error { border-left-color: #ef4444; } .mml-toast.success { border-left-color: #10b981; } @keyframes mmlToastIn { from { transform: translateY(20px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } /* === V3.4.2 (사용자 검증 2026-05-01): 모달 열리면 admin bar 자동 숨김 === */ /* index.html line 4668: document.body.classList.add('modal-open') 활용 */ /* 일반 사용자: admin bar 자체 없으니 영향 0. 관리자만 적용 */ body.modal-open .mml-admin-bar { display: none !important; } .mml-admin-bar { z-index: 90 !important; }