:root{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;line-height:1.5;font-weight:400;--color-bg: #f6f7fb;--color-surface: #ffffff;--color-text: #2b2f36;--color-muted: #6b7280;--primary-500: #6c7cf0;--primary-600: #5565e8;--primary-700: #4452c6;--danger-500: #ef4444;--success-500: #22c55e;--warning-500: #eab308;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--shadow-sm: 0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.06);--shadow-md: 0 4px 12px rgba(0,0,0,.08);--shadow-lg: 0 12px 40px rgba(0,0,0,.14);--border-subtle: 1px solid rgba(17, 24, 39, .06)}html,body,#root{height:100%}body{margin:0;min-width:320px;min-height:100vh;color:var(--color-text);background:radial-gradient(1200px 800px at -10% -20%,#6c7cf01f,#0000 40%),radial-gradient(900px 600px at 110% 10%,#764ba21a,#0000 35%),var(--color-bg)}#root{min-height:100vh}*{margin:0;padding:0;box-sizing:border-box}body{font-family:Segoe UI,Tahoma,Geneva,Verdana,sans-serif;background:var(--color-bg);color:var(--color-text)}.page-container{padding:24px;background-color:#f8f9fd;min-height:100vh}.page-header h2{margin-bottom:24px;color:#333;font-size:1.5rem}.loading,.empty-state{text-align:center;padding:60px 20px;color:var(--color-muted);font-size:1.06em;background:var(--color-surface);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);border:var(--border-subtle)}.btn-primary,.btn-secondary,.btn-edit,.btn-delete,.btn-insert,.btn-warning{padding:12px 20px;border:0;border-radius:10px;font-size:.94em;font-weight:700;text-decoration-line:none;cursor:pointer;transition:transform .15s ease,box-shadow .2s ease,background .2s ease}.btn-primary{background:linear-gradient(135deg,var(--primary-600) 0%,#764ba2 100%);color:#fff;box-shadow:0 6px 18px #6c7cf047}.btn-primary:hover{transform:translateY(-2px);box-shadow:0 10px 24px #6c7cf05c}.btn-secondary{background:#eef0f4;color:var(--color-text)}.btn-secondary:hover{background:#e1e4ea}.btn-edit{background:var(--success-500);color:#fff;flex:1}.btn-edit:hover{filter:brightness(.95)}.btn-delete{background:var(--danger-500);color:#fff;flex:1}.btn-delete:hover{filter:brightness(.95)}.btn-insert{background:var(--primary-600);color:#fff;flex:1}.btn-insert:hover{filter:brightness(.95)}.btn-warning{background:var(--warning-500);color:#fff;flex:1}.btn-warning:hover{filter:brightness(.95)}.form-group{margin-bottom:18px}.form-group label{display:block;margin-bottom:8px;color:#4b5563;font-weight:700}.form-group input,.form-group textarea,.form-group select{width:100%;padding:12px 14px;border:2px solid #e5e7eb;border-radius:10px;font-size:14px;font-family:inherit;transition:all .2s;background:#fff}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary-600);box-shadow:0 0 0 3px #6c7cf026}.form-group textarea{resize:vertical;min-height:100px}:root{--sidebar-width: 280px;--soft-gray: #f8f9fe;--text-dark: #344767;--text-light: #67748e;--primary-gradient: linear-gradient(310deg, #2152ff 0%, #21d4fd 100%);--shadow: 0 20px 27px 0 rgba(0, 0, 0, .05)}.layout-container{display:flex;min-height:100vh;background-color:var(--soft-gray);color:var(--text-dark);font-family:Open Sans,sans-serif}.layout-sidebar{width:var(--sidebar-width);background:#fff;margin:20px;border-radius:16px;height:calc(100vh - 40px);position:fixed;box-shadow:var(--shadow);padding:24px;z-index:100}.sidebar-brand{font-weight:700;font-size:18px;margin-bottom:40px;padding-left:10px;display:flex;align-items:center;gap:10px}.nav-list{list-style:none;padding:0}.nav-link{display:flex;align-items:center;padding:12px 16px;margin-bottom:8px;border-radius:8px;text-decoration:none;color:var(--text-light);transition:all .2s;font-size:14px}.nav-link.active{background:#fff;box-shadow:var(--shadow);color:var(--text-dark);font-weight:600}.nav-icon{width:32px;height:32px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;margin-right:12px;box-shadow:0 4px 6px #0000001a;font-size:12px}.nav-link.active .nav-icon{background:var(--primary-gradient);color:#fff}.layout-main-wrapper{margin-left:calc(var(--sidebar-width) + 40px);flex:1;padding:20px 40px 20px 20px}.layout-header{display:flex;justify-content:space-between;align-items:center;padding:15px 0}.breadcrumb{font-size:14px;color:var(--text-light)}.breadcrumb b{color:var(--text-dark);display:block;font-size:16px}.header-right{display:flex;align-items:center;gap:20px}.search-box{background:#fff;border:1px solid #d2d6da;border-radius:8px;padding:8px 12px;font-size:14px;outline:none}.header-action-btn{background:none;border:none;color:var(--text-light);cursor:pointer;font-size:14px;font-weight:600;display:flex;align-items:center;gap:5px}.btn-signin{padding:8px 24px;border-radius:8px;background:var(--primary-gradient);color:#fff;border:none;font-weight:700;font-size:12px;cursor:pointer;box-shadow:0 4px 7px -1px #0000001c}.btn-signin:hover{transform:scale(1.02)}.login-page{display:flex;min-height:100vh;align-items:center;justify-content:center;background-color:#fff;font-family:Open Sans,sans-serif}.login-wrapper{display:flex;width:90%;max-width:1200px;height:80vh;background:#fff;border-radius:20px;overflow:hidden}.login-form-side{flex:1;padding:60px;display:flex;flex-direction:column;justify-content:center}.login-form-side h2{color:#3182ce;font-size:32px;margin-bottom:8px}.login-form-side p{color:#a0aec0;margin-bottom:30px}.input-label{display:block;font-size:14px;font-weight:600;margin-bottom:8px;color:#2d3748}.input-field{width:100%;padding:12px;margin-bottom:20px;border:1px solid #e2e8f0;border-radius:8px;box-sizing:border-box}.signin-button{width:100%;padding:12px;background:linear-gradient(310deg,#2196f3,#00bcd4);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;box-shadow:0 4px 6px #0000001a;transition:transform .2s}.signin-button:hover{transform:translateY(-1px);opacity:.9}.login-image-side{flex:1.2;background:url(https://images.unsplash.com/photo-1579546929518-9e396f3cc809) no-repeat center center;background-size:cover;border-radius:0 20px 20px 100px;margin:20px}@media(max-width:768px){.login-image-side{display:none}.login-form-side{padding:20px}}.admin-login-page{display:flex;align-items:center;justify-content:center;min-height:100vh;background-color:#f0f2f5;font-family:Open Sans,sans-serif}.admin-login-card{width:100%;max-width:450px;background:#fff;border-radius:16px;box-shadow:0 20px 27px #0000001a;padding:40px;position:relative;overflow:hidden}.admin-login-card:before{content:"";position:absolute;top:0;left:0;width:100%;height:5px;background:linear-gradient(310deg,#344767,#172b4d)}.admin-header{text-align:center;margin-bottom:40px}.admin-badge{display:inline-block;padding:4px 12px;background:#e9ecef;color:#344767;border-radius:50px;font-size:11px;font-weight:800;text-transform:uppercase;margin-bottom:15px}.admin-header h2{color:#344767;font-size:28px;margin:0}.admin-header p{color:#67748e;font-size:14px;margin-top:10px}.admin-input-group{margin-bottom:20px}.admin-input-group label{display:block;font-size:13px;font-weight:700;margin-bottom:8px;color:#344767;padding-left:4px}.admin-input{width:100%;padding:12px 16px;border:1px solid #d2d6da;border-radius:8px;background-color:#fff;font-size:14px;box-sizing:border-box;transition:all .2s ease}.admin-input:focus{outline:none;border-color:#344767;box-shadow:0 0 0 2px #3447671a}.admin-btn-submit{width:100%;padding:14px;margin-top:10px;background:linear-gradient(310deg,#344767,#172b4d);color:#fff;border:none;border-radius:8px;font-weight:700;font-size:14px;cursor:pointer;box-shadow:0 4px 7px -1px #0000001c;transition:all .2s}.admin-btn-submit:hover{transform:translateY(-1px);box-shadow:0 7px 14px #32325d1a,0 3px 6px #00000014}.admin-footer{text-align:center;margin-top:25px;font-size:13px;color:#67748e}.camera-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:10px}.camera-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 2px 8px #0000001a;transition:transform .2s,box-shadow .2s}.camera-card:hover{transform:translateY(-4px);box-shadow:0 4px 12px #00000026}.camera-card-header{margin-bottom:15px;padding-bottom:15px;border-bottom:2px solid #f0f0f0}.camera-card-header h3{margin:0;color:#333;font-size:1.3em}.camera-card-body{margin-bottom:15px}.camera-card-body p{margin:8px 0;color:#666;font-size:.95em}.camera-card-body strong{color:#333}.camera-card-actions{display:flex;gap:10px}.ptz-container{border:1px solid #ddd;border-radius:10px;padding:12px;background:#fff}.ptz-pad{text-align:center;margin-bottom:10px}.ptz-row{display:flex;justify-content:center;margin:3px 0}.ptz-btn{width:45px;height:45px;font-size:20px;border-radius:8px;border:1px solid #bbb;background:#f4f4f4;cursor:pointer}.ptz-btn:hover{background:#e6e6e6}.ptz-center{width:40px}.zoom-row{display:flex;justify-content:space-between;margin:10px 0}.zoom-btn{width:90px;height:35px;border-radius:8px;border:1px solid #bbb}.speed-row{margin-bottom:10px}.ptz-status-box{font-size:13px;border:1px solid #ddd;padding:8px;border-radius:6px;margin-bottom:10px}.anchor-layout{display:flex;gap:20px}.video-area{flex:1;position:relative;background:#000;height:500px}.anchor-video{width:100%;height:100%;object-fit:contain}.anchor-canvas{width:100%;height:100%;display:block}.anchor-dot{position:absolute;width:12px;height:12px;background:red;border:2px solid white;border-radius:50%}.right-panel{width:350px;display:flex;flex-direction:column;gap:15px}.anchor-panel,.save-panel{border:1px solid #ccc;padding:15px;border-radius:12px;background:#fafafa}.anchor-item{display:flex;justify-content:space-between;margin-bottom:10px}.ok{color:green;font-weight:700}.no{color:red;font-weight:700}.btn-reset{width:100%;padding:10px;background:#ddd;border-radius:8px}.btn-save{width:100%;padding:12px;margin-top:10px;background:#5c6bff;color:#fff;border-radius:8px;font-weight:700}.btn-save:disabled{background:#a0a0a0}.btn-cancel{width:100%;padding:10px;background:red;border-radius:8px}.stream-wrapper{position:relative;width:100%;height:500px;background:#000}.stream-img{width:100%;height:100%;object-fit:contain}.main-container{padding:24px;background-color:#f8f9fd;min-height:100vh}.main-header h2{margin-bottom:24px;color:#333;font-size:1.5rem}.filter-section{display:flex;flex-wrap:wrap;gap:16px;background:#fff;padding:20px;border-radius:12px;box-shadow:0 2px 8px #0000000d;margin-bottom:24px;align-items:flex-end}.filter-group{display:flex;flex-direction:column;gap:8px}.filter-group label{font-size:13px;font-weight:600;color:#666}.filter-group select,.filter-group input{padding:8px 12px;border:1px solid #ddd;border-radius:6px;min-width:150px}.search-btn{background-color:#7e78d2;color:#fff;border:none;padding:8px 24px;border-radius:6px;cursor:pointer;font-weight:700;height:38px}.table-section{background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 8px #0000000d}.custom-table{width:100%;border-collapse:collapse}.custom-table th{background-color:#f1f3f9;padding:14px;text-align:left;font-size:14px;color:#444}.custom-table td{padding:14px;border-bottom:1px solid #eee;font-size:14px;color:#555;text-align:center}.custom-table th{text-align:center}.status-badge{padding:4px 8px;border-radius:4px;font-size:12px;font-weight:700}.status-badge.need_action{background-color:#fff0f0;color:#ff4d4f}.status-badge.admin_done{background-color:#e1c9f8;color:#6c54f7}.status-badge.done{background-color:#f6ffed;color:#52c41a}.view-btn{background:none;border:none;color:#7e78d2;cursor:pointer;font-size:16px}.modal-overlay{position:fixed;inset:0;background-color:#0009;display:flex;align-items:center;justify-content:center;z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-content{background:#fff;width:90%;max-width:1100px;height:80vh;border-radius:16px;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 20px 40px #0003}.modal-header{padding:16px 24px;border-bottom:1px solid #eee;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:1.2rem;color:#333}.close-x{background:none;border:none;font-size:28px;cursor:pointer;color:#999}.modal-body{flex:1;display:flex;overflow:hidden}.image-container{flex:3;padding:24px;display:flex;flex-direction:column;background-color:#f0f2f5}.image-placeholder{flex:1;background-color:#000;border-radius:8px;display:flex;align-items:center;justify-content:center;color:#666;position:relative}.img-label{position:absolute;top:10px;left:10px;background:#00000080;color:#fff;padding:4px 10px;border-radius:4px;font-size:12px}.side-panel{flex:1;border-left:1px solid #eee;padding:24px;background:#fff;display:flex;flex-direction:column;gap:20px;min-width:280px}.panel-section h4{margin:0 0 10px;font-size:14px;color:#7e78d2}.panel-input,.panel-textarea{width:100%;padding:10px;border:1px solid #ddd;border-radius:6px;font-size:14px}.panel-textarea{height:100px;resize:none}.info-list{list-style:none;padding:0;margin:0}.info-list li{margin-bottom:8px;font-size:14px;display:flex;justify-content:space-between}.text-danger{color:#ff4d4f}.modal-footer-btns{margin-top:20px;display:flex;justify-content:center;gap:12px}.btn-modal-primary{background-color:#7e78d2;color:#fff;border:none;padding:12px 30px;border-radius:8px;font-weight:700;cursor:pointer;transition:background .2s}.btn-modal-primary:hover{background-color:#655ec0}.btn-modal-error{background-color:#f14343;color:#fff;border:none;padding:12px 30px;border-radius:8px;font-weight:700;cursor:pointer;transition:background .2s}.btn-modal-error:hover{background-color:#f16965}.btn-modal-secondary{background-color:#e4e6ef;color:#444;border:none;padding:12px 30px;border-radius:8px;font-weight:700;cursor:pointer}.log-scroll-list{max-height:300px;overflow-y:auto;border:1px solid #e0e4ec;border-radius:8px;background:#fcfcfd}.log-item{display:flex;align-items:center;padding:12px 15px;border-bottom:1px solid #eee;cursor:pointer;transition:all .2s}.log-item:last-child{border-bottom:none}.log-item:hover{background-color:#f0f1ff}.log-item.active{background-color:#7e78d2;color:#fff}.log-item .dot{width:6px;height:6px;background-color:#7e78d2;border-radius:50%;margin-right:12px}.log-item.active .dot{background-color:#fff}.log-time{font-size:13px;font-weight:500}.img-time-tag{position:absolute;top:15px;left:15px;background:#0009;color:#fff;padding:5px 12px;border-radius:20px;font-size:12px;z-index:10}.log-scroll-list::-webkit-scrollbar{width:6px}.log-scroll-list::-webkit-scrollbar-thumb{background:#ccc;border-radius:10px}.safety-card{max-width:100%;background-color:#fff;border-radius:12px;box-shadow:0 10px 25px #0000000d;overflow:hidden;border:1px solid #eef0f5;font-family:Pretendard,sans-serif}.safety-header{background-color:#f8f9ff;padding:18px 24px;border-bottom:1px solid #edefff;display:flex;justify-content:space-between;align-items:center}.header-title{display:flex;align-items:center;gap:8px;color:#333;font-weight:700;font-size:1.1rem}.header-info{display:flex;gap:15px;font-size:.85rem;color:#888}.safety-body{display:flex;min-height:350px}.image-section{flex:1;background-color:#fcfcfd;display:flex;align-items:center;justify-content:center;border-right:1px solid #f0f0f0;padding:20px}.placeholder-img{text-align:center;color:#ccc}.list-section{width:320px;padding:24px;display:flex;flex-direction:column}.list-title{font-size:.95rem;font-weight:600;color:#555;margin-bottom:16px;display:flex;align-items:center;gap:6px}.detection-item{margin-bottom:12px;padding:12px 16px;border-radius:8px;border-left:4px solid #ddd}.item-critical{background-color:#fff5f5;border-left-color:#ff6b6b}.item-warning{background-color:#fff9db;border-left-color:#fcc419}.location-tag{display:block;font-size:.75rem;color:#999;margin-bottom:4px}.status-text{font-size:.9rem;font-weight:700;color:#444}.safety-footer{padding:16px 24px;background-color:#fcfcfd;border-top:1px solid #f0f0f0;display:flex;justify-content:flex-end;gap:12px}.btn-area{padding:8px 20px;border-radius:6px;font-size:.85rem;font-weight:600;background-color:#eee;color:#999}.scroll-area{flex:1;max-height:800px;overflow-y:auto;padding-right:8px}.scroll-area::-webkit-scrollbar{width:6px}.scroll-area::-webkit-scrollbar-thumb{background-color:#e0e0e0;border-radius:10px}.btn-base{padding:10px 24px;border-radius:8px;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .2s ease;border:none;outline:none}.btn-confirm{background-color:#fff;color:#666;border:1px solid #d1d5db}.btn-confirm:hover{background-color:#f3f4f6;color:#333;border-color:#9ca3af}.btn-retry{background-color:#8582db;color:#fff;box-shadow:0 2px 4px #8582db4d}.btn-retry:hover{background-color:#6e6bc7;box-shadow:0 4px 8px #8582db66;transform:translateY(-1px)}.btn-retry:active{transform:translateY(0)}.switch-container{display:flex;align-items:center;gap:10px;margin-bottom:15px;font-size:.9rem;font-weight:600;color:#555}.switch{position:relative;display:inline-block;width:50px;height:26px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:34px}.slider:before{position:absolute;content:"";height:20px;width:20px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%;box-shadow:0 2px 4px #0003}input:checked+.slider{background-color:#8582db}input:checked+.slider:before{transform:translate(24px)}.switch-label{min-width:60px;text-align:center}