:root{font-family:system-ui,-apple-system,BlinkMacSystemFont,SF Pro Text,system-ui,-system-ui,sans-serif;line-height:1.5;font-weight:400;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}*,*:before,*:after{box-sizing:border-box}body{margin:0;min-height:100vh;background:radial-gradient(circle at top,#020617,#020617 42%,#020617)}#root{min-height:100vh}.page{background-color:bisque}:root{--primary-color: #3b82f6;--primary-hover: #2563eb;--bg-color: #f8fafc;--text-main: #1e293b;--text-secondary: #64748b;--card-bg: #ffffff;--border-color: #e2e8f0;--shadow-sm: 0 1px 2px 0 rgb(0 0 0 / .05);--shadow-md: 0 4px 6px -1px rgb(0 0 0 / .1), 0 2px 4px -2px rgb(0 0 0 / .1);--shadow-lg: 0 10px 15px -3px rgb(0 0 0 / .1), 0 4px 6px -4px rgb(0 0 0 / .1)}body{margin:0;font-family:Inter,system-ui,-apple-system,sans-serif;background-color:var(--bg-color);color:var(--text-main);-webkit-font-smoothing:antialiased}.page{min-height:100vh;display:flex;justify-content:center;padding:2rem 1rem}.page-main{width:100%;max-width:1200px;display:flex;flex-direction:column;gap:2rem}.banner-container{position:relative;width:100%;margin:0 auto;aspect-ratio:2;max-height:300px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow-lg);background:#cbd5e1}@media(max-width:768px){.banner-container{aspect-ratio:16 / 9;min-height:200px;max-height:300px;border-radius:16px}}@media(max-width:480px){.banner-container{aspect-ratio:16 / 10;min-height:180px;max-height:250px;border-radius:12px}}.banner-track{display:flex;width:100%;height:100%;transition:transform .6s cubic-bezier(.22,1,.36,1)}.banner-slide{min-width:100%;height:100%;flex-shrink:0;position:relative;overflow:hidden}.banner-slide a{display:block;width:100%;height:100%}.banner-image{width:100%;height:100%;object-fit:cover;object-position:center;display:block;max-width:100%;max-height:100%}.banner-arrow{position:absolute;top:50%;transform:translateY(-50%);background:#fffc;color:var(--text-main);border:none;width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:1.2rem;transition:all .2s;box-shadow:0 4px 12px #0000001a;z-index:10;opacity:0}@media(max-width:768px){.banner-arrow{width:40px;height:40px;font-size:1rem}}@media(max-width:480px){.banner-arrow{width:36px;height:36px;font-size:.9rem}}.banner-container:hover .banner-arrow{opacity:1}.banner-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.1)}.banner-arrow-left{left:24px}.banner-arrow-right{right:24px}@media(max-width:768px){.banner-arrow-left{left:12px}.banner-arrow-right{right:12px}}@media(max-width:480px){.banner-arrow-left{left:8px}.banner-arrow-right{right:8px}}.banner-dots{position:absolute;bottom:24px;left:50%;transform:translate(-50%);display:flex;gap:8px;padding:8px 16px;background:#0000004d;border-radius:999px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}@media(max-width:768px){.banner-dots{bottom:16px;padding:6px 12px;gap:6px}}@media(max-width:480px){.banner-dots{bottom:12px;padding:4px 10px;gap:4px}}.banner-dot{width:8px;height:8px;border-radius:50%;background:#ffffff80;cursor:pointer;transition:all .3s}.banner-dot.active{background:#fff;transform:scale(1.2)}.notification-container{background:var(--card-bg);border-radius:24px;box-shadow:var(--shadow-md);overflow:hidden;border:1px solid var(--border-color)}.notification-header-row{display:flex;background:#f1f5f9;padding:1.2rem 1.5rem;font-weight:600;color:var(--text-secondary);font-size:.95rem;border-bottom:1px solid var(--border-color)}.col-type{width:180px;flex-shrink:0}.col-index{width:60px;text-align:center;flex-shrink:0}.col-content{flex:1;padding-left:1rem}.col-time{width:180px;flex-shrink:0;text-align:center;font-variant-numeric:tabular-nums}.col-action{width:100px;text-align:right;flex-shrink:0}.notification-category-group{border-bottom:1px solid var(--border-color)}.notification-category-group:last-child{border-bottom:none}.category-header{display:flex;justify-content:space-between;align-items:center;padding:1.2rem 1.5rem;background:#fff}.category-title{font-size:1.1rem;font-weight:700;color:var(--text-main);width:180px}.browse-all-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;font-size:.85rem;padding:.4rem 1rem;border-radius:999px;transition:all .2s;font-weight:500}.browse-all-btn:hover{color:var(--primary-color);border-color:var(--primary-color);background:#eff6ff}.notification-item{display:flex;padding:1rem 1.5rem;border-top:1px solid #f8fafc;align-items:center;transition:background .2s;color:var(--text-secondary);font-size:.95rem;cursor:pointer}.notification-item:hover{background:#f8fafc;color:var(--text-main)}.view-link{color:var(--primary-color);font-size:.85rem;font-weight:500;transition:color .2s}.notification-item:hover .view-link{color:var(--primary-hover);text-decoration:underline}.col-type-placeholder{width:180px;flex-shrink:0}.notification-item .col-index{color:#94a3b8;font-variant-numeric:tabular-nums}.notification-item .col-content{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.notification-item .col-time{color:var(--text-secondary);font-variant-numeric:tabular-nums}.floating-modal{position:fixed;top:0;left:0;z-index:10000;pointer-events:none;transition:transform 40ms linear}.floating-modal-inner{width:420px;min-height:400px;max-height:500px;border-radius:24px;display:grid;grid-template-rows:160px 1fr;overflow:hidden;background:#fffffff2;box-shadow:0 20px 50px #00000026,0 0 0 1px #0000000d;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);pointer-events:auto}@media(max-width:768px){.floating-modal-inner{width:90vw;max-width:400px;min-height:280px;max-height:360px;grid-template-columns:1fr;grid-template-rows:180px 1fr}}.floating-image-wrap{position:relative;overflow:hidden;min-width:0;min-height:0}.floating-image-wrap img{width:100%;height:97%;object-fit:cover;object-position:center;transform:scale(1.05);transition:transform .5s ease;display:block}.floating-modal-inner:hover .floating-image-wrap img{transform:scale(1.15)}@media(max-width:768px){.floating-image-wrap{height:180px}}.floating-content{padding:1.5rem;display:flex;flex-direction:column;gap:.8rem;min-width:0;overflow:hidden;max-height:100%}.floating-tag{align-self:flex-start;padding:.25rem .75rem;border-radius:999px;font-size:.75rem;font-weight:600;background:#ecfdf5;color:#059669}.floating-content h2{margin:0;font-size:1.25rem;color:var(--text-main);line-height:1.3;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word;flex-shrink:0}.floating-content p{margin:0;font-size:.9rem;line-height:1.6;color:var(--text-secondary);overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;text-overflow:ellipsis;word-break:break-word;flex:1;min-height:0}.floating-bottom{margin-top:auto;display:flex;gap:1rem;align-items:center;flex-shrink:0}.floating-actions{display:flex;gap:.75rem;flex-wrap:wrap;flex:1;align-items:center}@media(max-width:768px){.floating-actions{gap:.5rem}.floating-actions .primary-btn,.floating-actions .ghost-btn{flex:1;min-width:0;font-size:.8rem;padding:.45rem 1rem}}.primary-btn{background:var(--primary-color);color:#fff;border:none;padding:.5rem 1.2rem;border-radius:999px;font-size:.85rem;font-weight:500;cursor:pointer;transition:all .2s;box-shadow:0 4px 12px #3b82f64d;text-decoration:none;display:inline-block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.primary-btn:hover{background:var(--primary-hover);transform:translateY(-1px)}.ghost-btn{background:transparent;color:var(--text-secondary);border:1px solid var(--border-color);padding:.5rem 1.2rem;border-radius:999px;font-size:.85rem;cursor:pointer;transition:all .2s;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}.ghost-btn:hover:not(:disabled){background:#f1f5f9;color:var(--text-main)}.ghost-btn:disabled{opacity:.5;cursor:not-allowed}.floating-indicators{display:flex;gap:6px;flex-shrink:0;align-items:center}.indicator-dot{width:6px;height:6px;border-radius:50%;background:#cbd5e1;transition:all .3s}.indicator-dot-active{width:18px;background:var(--primary-color);border-radius:999px}.warning-overlay{position:fixed;inset:0;z-index:9999;background:#0009;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;animation:fadeIn .3s ease-out}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.warning-content{background:#fff;padding:3rem;border-radius:32px;text-align:center;max-width:480px;width:90%;box-shadow:0 25px 50px -12px #00000040}.warning-icon{font-size:4rem;margin-bottom:1.5rem;animation:bounce 2s infinite}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}.warning-content h2{font-size:2rem;color:var(--text-main);margin:0 0 1rem}.warning-content p{color:var(--text-secondary);font-size:1.1rem;margin-bottom:2rem}.countdown-text{font-size:1.5rem;font-weight:700;color:var(--primary-color);font-variant-numeric:tabular-nums}.countdown-complete{font-size:1.5rem;font-weight:700;color:#10b981}.countdown-bar{height:6px;background:#f1f5f9;border-radius:999px;margin-top:1.5rem;overflow:hidden}.countdown-progress{height:100%;background:var(--primary-color);border-radius:999px;transition:width 1s linear}.notification-detail-page{width:100%}.detail-container{background:var(--card-bg);border-radius:24px;box-shadow:var(--shadow-md);overflow:hidden;border:1px solid var(--border-color);padding:2rem}.detail-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.back-btn{background:transparent;border:1px solid var(--border-color);color:var(--text-secondary);cursor:pointer;font-size:.9rem;padding:.5rem 1rem;border-radius:8px;transition:all .2s;font-weight:500}.back-btn:hover{color:var(--primary-color);border-color:var(--primary-color);background:#eff6ff}.detail-header h1{margin:0;font-size:1.5rem;color:var(--text-main)}.detail-content{max-width:900px}.detail-meta{display:flex;gap:2rem;margin-bottom:2rem;padding:1rem;background:#f8fafc;border-radius:12px}.meta-item{display:flex;align-items:center;gap:.5rem}.meta-label{color:var(--text-secondary);font-size:.9rem}.meta-value{color:var(--text-main);font-weight:600;font-size:.9rem}.detail-title{margin-bottom:2rem}.detail-title h2{margin:0;font-size:1.3rem;color:var(--text-main);line-height:1.6}.detail-body{line-height:1.8}.detail-text{color:var(--text-main);font-size:1rem;margin-bottom:2rem;white-space:pre-wrap;word-wrap:break-word}.detail-attachments{margin-top:2rem;padding-top:2rem;border-top:1px solid var(--border-color)}.detail-attachments h3{margin:0 0 1rem;font-size:1.1rem;color:var(--text-main)}.attachment-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.75rem}.attachment-item{display:flex;align-items:center}.attachment-link{display:flex;align-items:center;gap:.5rem;color:var(--primary-color);text-decoration:none;padding:.75rem 1rem;background:#f8fafc;border-radius:8px;transition:all .2s;border:1px solid transparent}.attachment-link:hover{background:#eff6ff;border-color:var(--primary-color);color:var(--primary-hover)}.attachment-icon{font-size:1.2rem}.attachment-name{font-size:.95rem;font-weight:500}.category-list-page{width:100%}.category-list-container{background:var(--card-bg);border-radius:24px;box-shadow:var(--shadow-md);overflow:hidden;border:1px solid var(--border-color);padding:2rem}.category-list-header{display:flex;align-items:center;gap:1rem;margin-bottom:2rem;padding-bottom:1.5rem;border-bottom:1px solid var(--border-color)}.category-list-header h1{margin:0;font-size:1.5rem;color:var(--text-main)}.category-list-content,.category-list-table{width:100%}.category-list-header-row{display:flex;background:#f1f5f9;padding:1rem 1.5rem;font-weight:600;color:var(--text-secondary);font-size:.95rem;border-radius:8px;margin-bottom:.5rem}.category-list-header-row .col-index{width:80px;text-align:center;flex-shrink:0}.category-list-header-row .col-content{flex:1;padding-left:1rem}.category-list-header-row .col-time{width:200px;text-align:center;flex-shrink:0}.category-list-item{display:flex;padding:1rem 1.5rem;border-top:1px solid #f8fafc;align-items:center;transition:background .2s;color:var(--text-secondary);font-size:.95rem;cursor:pointer;border-radius:8px;margin-bottom:.25rem}.category-list-item:hover{background:#f8fafc;color:var(--text-main)}.category-list-item .col-index{width:80px;text-align:center;flex-shrink:0;color:#94a3b8;font-variant-numeric:tabular-nums}.category-list-item .col-content{flex:1;padding-left:1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.category-list-item .col-time{width:200px;text-align:center;flex-shrink:0;font-variant-numeric:tabular-nums;color:var(--text-secondary)}.admin-login-page{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#667eea,#764ba2);padding:2rem}.admin-login-container{background:#fff;padding:3rem;border-radius:16px;box-shadow:0 20px 60px #0000004d;width:100%;max-width:400px}.admin-login-container h1{margin:0 0 2rem;text-align:center;color:var(--text-main);font-size:1.8rem}.form-group input{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:8px;font-size:1rem;transition:border-color .2s;box-sizing:border-box}.form-group input:focus{outline:none;border-color:var(--primary-color)}.error-message{color:#ef4444;font-size:.9rem;margin-bottom:1rem;text-align:center}.login-btn{width:100%;padding:.75rem;background:var(--primary-color);color:#fff;border:none;border-radius:8px;font-size:1rem;font-weight:600;cursor:pointer;transition:background .2s}.login-btn:hover{background:var(--primary-hover)}.form-container{width:100%}.form-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;border-bottom:1px solid var(--border-color)}.form-header h2{margin:0;color:var(--text-main)}.close-btn{background:none;border:none;font-size:2rem;color:var(--text-secondary);cursor:pointer;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:4px;transition:all .2s}.close-btn:hover{background:#f1f5f9;color:var(--text-main)}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;color:var(--text-main);font-weight:500}.form-group input,.form-group textarea,.form-group select{width:100%;padding:.75rem;border:1px solid var(--border-color);border-radius:8px;font-size:1rem;font-family:inherit;transition:border-color .2s;box-sizing:border-box}.form-group input:focus,.form-group textarea:focus,.form-group select:focus{outline:none;border-color:var(--primary-color)}.form-group textarea{resize:vertical}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.image-preview{margin-top:.5rem;max-width:100%;max-height:200px;border-radius:8px;border:1px solid var(--border-color)}.attachment-input{display:flex;gap:.5rem;margin-bottom:.5rem}.attachment-input input{flex:1}.attachment-input button{padding:.5rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500}.attachment-input button:hover{background:var(--primary-hover)}.attachment-list{list-style:none;padding:0;margin:0;border:1px solid var(--border-color);border-radius:8px;overflow:hidden}.attachment-list li{display:flex;justify-content:space-between;align-items:center;padding:.75rem;border-bottom:1px solid var(--border-color)}.attachment-list li:last-child{border-bottom:none}.attachment-list li button{padding:.25rem .75rem;background:#fee2e2;color:#ef4444;border:none;border-radius:6px;cursor:pointer;font-size:.85rem}.attachment-list li button:hover{background:#fecaca}.form-actions{display:flex;justify-content:flex-end;gap:1rem;margin-top:2rem;padding-top:1.5rem;border-top:1px solid var(--border-color)}.form-actions button{padding:.75rem 1.5rem;border:none;border-radius:8px;font-size:1rem;font-weight:500;cursor:pointer;transition:all .2s}.form-actions button[type=button]{background:#f1f5f9;color:var(--text-main)}.form-actions button[type=button]:hover{background:#e2e8f0}.form-actions button[type=submit]{background:var(--primary-color);color:#fff}.form-actions button[type=submit]:hover:not(:disabled){background:var(--primary-hover)}.form-actions button:disabled{opacity:.6;cursor:not-allowed}.file-upload-section{display:flex;flex-direction:column;gap:.75rem}.file-upload-controls{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap}.file-upload-btn{display:inline-block;padding:.75rem 1.5rem;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:.95rem;transition:background .2s;text-align:center}.file-upload-btn:hover:not(:disabled){background:var(--primary-hover)}.file-upload-btn:disabled{opacity:.6;cursor:not-allowed}.upload-success{color:#10b981;font-weight:500;font-size:.9rem}.url-input,.attachment-name-input{flex:1;min-width:200px}.add-attachment-btn{padding:.5rem 1rem;background:#10b981;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;font-size:.9rem;transition:background .2s;align-self:flex-start}.add-attachment-btn:hover:not(:disabled){background:#059669}.add-attachment-btn:disabled{opacity:.6;cursor:not-allowed}.attachment-list li .view-link{color:var(--primary-color);text-decoration:none;font-size:.85rem;margin-right:.5rem;padding:.25rem .5rem;border-radius:4px;transition:background .2s}.attachment-list li .view-link:hover{background:#eff6ff;text-decoration:underline}.admin-dashboard{min-height:100vh;background:#f8fafc;padding:2rem}.admin-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem;padding-bottom:1rem;border-bottom:2px solid var(--border-color)}.admin-header h1{margin:0;color:var(--text-main)}.logout-btn{padding:.5rem 1rem;background:#ef4444;color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background .2s}.logout-btn:hover{background:#dc2626}.admin-tabs{display:flex;gap:1rem;margin-bottom:2rem;border-bottom:2px solid var(--border-color)}.admin-tabs button{padding:.75rem 1.5rem;background:transparent;border:none;border-bottom:3px solid transparent;cursor:pointer;font-size:1rem;font-weight:500;color:var(--text-secondary);transition:all .2s;margin-bottom:-2px}.admin-tabs button:hover{color:var(--primary-color)}.admin-tabs button.active{color:var(--primary-color);border-bottom-color:var(--primary-color)}.admin-content{background:#fff;border-radius:12px;padding:2rem;box-shadow:var(--shadow-md)}.admin-section{width:100%}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.section-header h2{margin:0;color:var(--text-main)}.add-btn{padding:.5rem 1rem;background:var(--primary-color);color:#fff;border:none;border-radius:8px;cursor:pointer;font-weight:500;transition:background .2s}.add-btn:hover{background:var(--primary-hover)}.category-group{margin-bottom:2rem}.category-group h3{margin:0 0 1rem;color:var(--text-main);font-size:1.2rem;padding-bottom:.5rem;border-bottom:1px solid var(--border-color)}.admin-item{display:flex;justify-content:space-between;align-items:center;padding:1rem;border:1px solid var(--border-color);border-radius:8px;margin-bottom:.75rem;transition:box-shadow .2s}.admin-item:hover{box-shadow:var(--shadow-sm)}.item-content{display:flex;align-items:center;gap:1rem;flex:1}.banner-preview,.floating-preview{width:80px;height:60px;object-fit:cover;border-radius:6px}.item-info{flex:1}.item-title{font-weight:500;color:var(--text-main);margin-bottom:.25rem}.item-meta{font-size:.85rem;color:var(--text-secondary)}.item-actions{display:flex;gap:.5rem}.item-actions button{padding:.4rem .8rem;border:1px solid var(--border-color);background:#fff;border-radius:6px;cursor:pointer;font-size:.9rem;transition:all .2s}.item-actions button:hover{background:#f8fafc;border-color:var(--primary-color);color:var(--primary-color)}.item-actions .delete-btn:hover{background:#fee2e2;border-color:#ef4444;color:#ef4444}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;padding:2rem}.modal-content{background:#fff;border-radius:12px;padding:2rem;max-width:800px;width:100%;max-height:90vh;overflow-y:auto}.loading{text-align:center;padding:3rem;color:var(--text-secondary)}