:root {
    --bg: #0d1117; --bg2: #161b22; --sidebar-bg: #2d3436; --header-bg: #0f1a2e;
    --card-bg: #ffffff; --card-text: #2d3436; --accent: #00b894; --accent-hover: #00a381;
    --border: #3d3d3d; --text: #e0e0e0; --muted: #888; --danger: #e74c3c;
    --header-h: 50px; --sidebar-w: 240px;
    --font: -apple-system, 'Noto Sans KR', 'Malgun Gothic', sans-serif;
}
* { margin:0; padding:0; box-sizing:border-box; }
html, body { height:100%; overflow:hidden; background:var(--bg); color:var(--text); font-family:var(--font); font-size:14px; line-height:1.5; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
#app { display:flex; flex-direction:column; height:100vh; }
#header { position:fixed; top:0; left:0; right:0; height:var(--header-h); background:var(--header-bg); display:flex; align-items:center; padding:0 16px; z-index:1000; border-bottom:1px solid var(--border); }
#menuBtn { background:none; border:none; color:#fff; font-size:22px; cursor:pointer; padding:8px; display:block; }
#logo { color:var(--accent); font-size:20px; font-weight:700; margin-left:8px; cursor:pointer; }
#searchWrap { flex:1; max-width:400px; margin:0 auto; position:relative; }
#searchInput { width:100%; padding:8px 12px; border-radius:20px; border:1px solid var(--border); background:var(--bg2); color:var(--text); font-size:13px; outline:none; }
#searchInput:focus { border-color:var(--accent); }
#searchResults { position:absolute; top:100%; left:0; right:0; background:var(--bg2); border:1px solid var(--border); border-radius:8px; max-height:400px; overflow-y:auto; display:none; z-index:100; margin-top:4px; }
#searchResults.show { display:block; }
.sr-item { padding:10px 14px; cursor:pointer; border-bottom:1px solid var(--border); }
.sr-item:hover { background:rgba(0,184,148,0.1); }
.sr-item:last-child { border-bottom:none; }
.sr-title { font-weight:500; font-size:13px; }
.sr-board { font-size:11px; color:var(--muted); margin-top:2px; }
#settingsBtn { background:none; border:none; color:#fff; font-size:18px; cursor:pointer; padding:8px; }
#layout { display:flex; flex:1; margin-top:var(--header-h); position:relative; overflow:hidden; }
#sidebar { width:var(--sidebar-w); min-width:var(--sidebar-w); background:var(--sidebar-bg); padding:8px 0; overflow-y:auto; flex-shrink:0; height:calc(100vh - var(--header-h)); position:sticky; top:var(--header-h); }
#sidebarOverlay { display:none; position:fixed; top:var(--header-h); left:0; right:0; bottom:0; background:rgba(0,0,0,0.5); z-index:998; }
.sidebar-group { padding:4px 0; }
.sidebar-group-label { padding:8px 16px; font-size:11px; text-transform:uppercase; color:var(--muted); font-weight:600; letter-spacing:1px; }
.sidebar-item { display:flex; align-items:center; padding:8px 16px; cursor:pointer; color:#ddd; transition:all 0.15s; }
.sidebar-item:hover { background:rgba(255,255,255,0.08); color:#fff; }
.sidebar-item.active { background:rgba(0,184,148,0.15); color:var(--accent); }
.sidebar-icon { width:28px; height:28px; border-radius:6px; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:13px; margin-right:10px; flex-shrink:0; }
.sidebar-name { font-size:13px; font-weight:400; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.sidebar-count { font-size:11px; color:var(--muted); margin-left:auto; }
.sidebar-footer { border-top:1px solid rgba(255,255,255,0.1); margin-top:8px; padding-top:8px; }
.sidebar-footer-item { padding:8px 16px; cursor:pointer; color:#ddd; font-size:13px; }
.sidebar-footer-item:hover { background:rgba(255,255,255,0.08); }
#main { flex:1; padding:20px 24px; overflow-y:auto; background:var(--bg); height:100%; }
.board-header { margin-bottom:20px; }
.board-title { font-size:24px; font-weight:700; color:#fff; margin-bottom:4px; }
.board-desc { font-size:13px; color:var(--muted); }
.post-list { list-style:none; }
.post-item { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--border); cursor:pointer; transition:background 0.15s; background:var(--bg2); border-radius:8px; margin-bottom:4px; }
.post-item:hover { background:rgba(0,184,148,0.05); }
.post-item.pinned { border-left:3px solid var(--accent); }
.post-title { flex:1; font-size:14px; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.post-meta { display:flex; align-items:center; gap:8px; font-size:12px; color:var(--muted); white-space:nowrap; margin-left:12px; }
.post-author { }
.post-date { }
.post-stats { }
.pin-badge { background:var(--accent); color:#fff; font-size:10px; padding:1px 6px; border-radius:3px; margin-right:6px; }
.new-thread-btn { padding:8px 20px; background:var(--accent); color:#fff; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; margin-bottom:16px; }
.new-thread-btn:hover { background:var(--accent-hover); }
.thread-form { background:var(--bg2); padding:20px; border-radius:8px; margin-bottom:16px; }
.thread-form input, .thread-form textarea { width:100%; padding:10px; margin-bottom:10px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:13px; }
.thread-form textarea { min-height:200px; resize:vertical; }
.btn { padding:8px 20px; border:none; border-radius:6px; cursor:pointer; font-size:13px; font-weight:500; }
.btn-primary { background:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-hover); }
.btn-secondary { background:var(--border); color:var(--text); }
.btn-secondary:hover { background:#555; }
.btn-danger { background:var(--danger); color:#fff; }
.thread-view { background:var(--bg2); border-radius:8px; padding:24px; margin-bottom:16px; }
.thread-view h1 { font-size:20px; color:#fff; margin-bottom:8px; }
.thread-meta { font-size:12px; color:var(--muted); margin-bottom:16px; padding-bottom:12px; border-bottom:1px solid var(--border); }
.thread-content { font-size:14px; line-height:1.8; color:var(--text); }
.thread-content h1, .thread-content h2, .thread-content h3 { color:#fff; margin:16px 0 8px; }
.thread-content h1 { font-size:20px; }
.thread-content h2 { font-size:17px; }
.thread-content h3 { font-size:15px; }
.thread-content p { margin:8px 0; }
.thread-content blockquote { border-left:3px solid var(--accent); padding:8px 16px; margin:8px 0; background:rgba(0,184,148,0.05); border-radius:0 4px 4px 0; }
.thread-content code { background:var(--bg); padding:2px 6px; border-radius:3px; font-size:12px; }
.thread-content pre { background:var(--bg); padding:16px; border-radius:6px; overflow-x:auto; margin:8px 0; }
.thread-content pre code { background:none; padding:0; }
.thread-content img { max-width:100%; border-radius:6px; margin:8px 0; }
.thread-content ul, .thread-content ol { padding-left:20px; margin:8px 0; }
.thread-content li { margin:4px 0; }
.thread-content hr { border:none; border-top:1px solid var(--border); margin:16px 0; }
.messages { margin-top:16px; }
.message { padding:16px; border-bottom:1px solid var(--border); }
.message:last-child { border-bottom:none; }
.message-meta { font-size:12px; color:var(--muted); margin-bottom:8px; }
.message-content { font-size:14px; line-height:1.7; }
.reply-form { margin-top:16px; }
.reply-form textarea { width:100%; padding:10px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); min-height:100px; resize:vertical; margin-bottom:8px; font-size:13px; }
.home-stats { display:grid; grid-template-columns:repeat(auto-fit, minmax(140px, 1fr)); gap:12px; margin-bottom:24px; }
.stat-card { background:var(--bg2); padding:16px; border-radius:8px; text-align:center; }
.stat-num { font-size:28px; font-weight:700; color:var(--accent); }
.stat-label { font-size:12px; color:var(--muted); margin-top:4px; }
.home-greeting { font-size:16px; color:#fff; margin-bottom:4px; }
.home-sub { font-size:13px; color:var(--muted); margin-bottom:20px; }
.welcome-box { background:var(--bg2); padding:24px; border-radius:8px; margin-bottom:20px; }
.welcome-box h2 { font-size:16px; color:var(--accent); margin-bottom:8px; }
.welcome-box p { color:var(--muted); font-size:13px; line-height:1.6; }

/* Facility styles */
.facility-tabs { display:flex; gap:0; margin-bottom:16px; border-bottom:2px solid var(--border); }
.facility-tab { padding:8px 20px; cursor:pointer; color:var(--muted); font-size:13px; border-bottom:2px solid transparent; margin-bottom:-2px; }
.facility-tab.active { color:var(--accent); border-bottom-color:var(--accent); }
.facility-grid { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px,1fr)); gap:12px; margin-bottom:16px; }
.facility-section { background:var(--bg2); padding:16px; border-radius:8px; }
.facility-section h3 { font-size:13px; color:var(--accent); margin-bottom:10px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.facility-row { display:flex; align-items:center; gap:8px; margin-bottom:6px; font-size:12px; }
.facility-row label { min-width:80px; color:var(--muted); }
.facility-row input, .facility-row select { padding:4px 8px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:12px; }
.facility-row input[type="time"] { width:70px; color-scheme:dark; color:#fff; background:#1a1a2e; border:1px solid #444; }
.facility-grid-2col { grid-column:span 2; }
.facility-table { width:100%; border-collapse:collapse; margin-bottom:16px; font-size:11px; }
.facility-table th { background:var(--sidebar-bg); color:#fff; padding:6px 4px; text-align:center; font-weight:500; border:1px solid var(--border); }
.facility-table td { padding:4px; border:1px solid var(--border); text-align:center; }
.facility-table select, .facility-table input { width:100%; padding:2px; border:1px solid var(--border); border-radius:2px; background:var(--bg); color:var(--text); font-size:11px; }
.facility-table input[type="time"] { width:60px; }
.facility-actions { display:flex; gap:8px; margin-top:16px; }
.facility-textarea { width:100%; padding:8px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); min-height:60px; resize:vertical; margin-bottom:8px; font-size:13px; }
.project-item { background:var(--bg2); padding:16px; border-radius:8px; margin-bottom:8px; cursor:pointer; }
.project-item:hover { background:rgba(0,184,148,0.05); }
.project-title { font-weight:500; font-size:14px; margin-bottom:4px; }
.project-meta { font-size:12px; color:var(--muted); }
.history-item { padding:12px; border-bottom:1px solid var(--border); cursor:pointer; }
.history-item:hover { background:rgba(0,184,148,0.05); }
.history-date { font-weight:500; font-size:13px; color:var(--accent); }
.history-preview { font-size:12px; color:var(--muted); margin-top:2px; }
.detail-view { background:var(--bg2); padding:20px; border-radius:8px; }
.detail-back { margin-bottom:16px; }
.detail-back a { color:var(--accent); font-size:13px; cursor:pointer; }
.detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.detail-field { }
.detail-field label { display:block; font-size:11px; color:var(--muted); margin-bottom:2px; }
.detail-field span { font-size:13px; }

/* Gallery styles */
.gallery-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }
@media (max-width:1000px) { .gallery-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:650px) { .gallery-grid { grid-template-columns:1fr; } }
.gallery-card { background:var(--bg2); border-radius:8px; overflow:hidden; cursor:pointer; transition:transform 0.15s; }
.gallery-card:hover { transform:translateY(-2px); }
.gallery-card img { width:100%; height:180px; object-fit:cover; }
.gallery-card-title { padding:8px 10px; font-size:13px; font-weight:500; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gallery-card-desc { padding:0 10px 8px; font-size:11px; color:var(--muted); }
.gallery-card-info { padding:0 10px 8px; font-size:10px; color:var(--muted); }
.gallery-upload { margin-bottom:16px; }
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.85); z-index:2000; display:flex; align-items:center; justify-content:center; cursor:pointer; }
.modal-overlay img { max-width:90%; max-height:90%; border-radius:8px; }

/* Kanban styles */
.kanban-board { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
.kanban-col { background:var(--bg2); border-radius:8px; padding:12px; }
.kanban-col h3 { font-size:13px; color:var(--accent); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.kanban-card { background:var(--bg); padding:10px; border-radius:6px; margin-bottom:6px; cursor:pointer; font-size:12px; }
.kanban-card:hover { border-color:var(--accent); }
.kanban-add { margin-top:8px; }
.kanban-add input { width:100%; padding:6px; border:1px solid var(--border); border-radius:4px; background:var(--bg); color:var(--text); font-size:12px; }
/* Done list below kanban */
.kanban-done { margin-top:16px; padding:12px; background:var(--bg2); border-radius:8px; max-height:400px; overflow-y:auto; }
.kanban-done .done-title { font-size:13px; color:var(--accent); margin-bottom:8px; padding-bottom:6px; border-bottom:1px solid var(--border); }
.kanban-done .done-list { display:flex; flex-direction:column; gap:4px; }
.kanban-done .done-item { padding:6px 10px; font-size:12px; color:var(--text-muted); cursor:pointer; border-radius:4px; }
.kanban-done .done-item:hover { background:var(--bg); color:var(--text); }
.kanban-done .done-item::before { content:"✅ "; font-size:10px; }

/* Settings styles */
.settings-section { background:var(--bg2); padding:20px; border-radius:8px; margin-bottom:16px; max-width:600px; }
.settings-section h3 { font-size:14px; color:var(--accent); margin-bottom:12px; }
.settings-row { margin-bottom:12px; }
.settings-row label { display:block; font-size:12px; color:var(--muted); margin-bottom:4px; }
.settings-row input, .settings-row textarea, .settings-row select { width:100%; padding:8px; border:1px solid var(--border); border-radius:6px; background:var(--bg); color:var(--text); font-size:13px; }
.settings-row textarea { min-height:100px; resize:vertical; }
.ai-status { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:13px; }

/* Utility */
.loading { text-align:center; padding:40px; color:var(--muted); }
.loading::after { content:''; display:inline-block; width:24px; height:24px; border:3px solid var(--border); border-top-color:var(--accent); border-radius:50%; animation:spin 0.8s linear infinite; margin-left:8px; vertical-align:middle; }
@keyframes spin { to { transform:rotate(360deg); } }
.back-btn { color:var(--accent); cursor:pointer; font-size:13px; margin-bottom:12px; display:inline-block; }
.back-btn:hover { text-decoration:underline; }
.empty-state { text-align:center; padding:40px; color:var(--muted); }
.pagination { display:flex; justify-content:center; gap:8px; margin-top:16px; }
.page-btn { padding:6px 14px; border:1px solid var(--border); border-radius:4px; background:var(--bg2); color:var(--text); cursor:pointer; font-size:12px; }
.page-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent); }
.page-btn.active { background:var(--accent); color:#fff; border-color:var(--accent); }

@media (max-width:900px) {
    #sidebar { position:fixed; left:-280px; top:var(--header-h); bottom:0; z-index:999; transition:left 0.25s ease; }
    #sidebar.open { left:0; }
    #sidebarOverlay.show { display:block; }
    #header { padding:0 8px; }
    #searchWrap { max-width:200px; }
    .kanban-board { grid-template-columns:1fr; }
    .facility-grid { grid-template-columns:1fr; }
    .facility-grid-2col { grid-column:span 1; }
    .detail-grid { grid-template-columns:1fr; }
}
/* Project board year group */
..project-year-group {
    margin-bottom: 8px;
}
.project-year-header {
    font-size: 15px;
    font-weight: 800;
    color: #00b894;
    padding: 12px 12px 6px;
    margin-top: 12px;
    border-bottom: 2px solid #00b894;
    display: flex;
    align-items: center;
    gap: 8px;
}
.project-year-header::before {
    content: "📅";
    font-size: 16px;
}
.project-year-divider {
    height: 2px;
    background: #00b894;
    margin: 8px 12px;
    border-radius: 1px;
}
/* Project thread form */
.project-form { max-width: 600px; }
.project-form input[type=text], .project-form textarea, .project-form select {
    width: 100%; margin-bottom: 8px; padding: 6px 8px;
    background: #0d1117; color: #e0e0e0; border: 1px solid #444; border-radius: 4px;
    box-sizing: border-box; font-size: 13px;
}
.project-form textarea { min-height: 80px; }
.pf-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.pf-row label { font-size: 12px; color: #888; white-space: nowrap; min-width: 60px; }
.pf-row input, .pf-row select { flex: 1; }
/* Project item divider */
.project-item-divider {
    height: 1px;
    background: #2d3436;
    margin: 0 12px;
}
/* Thread title bar with edit button */
.thread-title-bar { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.thread-title-bar h1 { flex: 1; margin: 0; font-size: 18px; }
.btn-sm { padding: 3px 8px; font-size: 11px; border: none; border-radius: 4px; cursor: pointer; }
.btn-secondary { background: #2d3436; color: #e0e0e0; }
.btn-secondary:hover { background: #3d4446; }
/* Gallery card actions */
.gallery-card-actions {
    display: flex; align-items: center; gap: 4px; padding: 4px 8px 6px;
}
.gallery-card-info {
    font-size: 10px; color: #888; margin-right: auto;
}
.gallery-btn {
    padding: 2px 6px; font-size: 10px; border: none; border-radius: 3px;
    cursor: pointer; background: #2d3436; color: #b2bec3;
}
.gallery-btn:hover { opacity: 0.8; }
.gallery-edit:hover { background: #0984e3; color: #fff; }
.gallery-del:hover { background: #d63031; color: #fff; }
/* Gallery album view */
.gallery-thumb { cursor: pointer; }
.gallery-thumb img { width:100%; height:180px; object-fit:cover; display:block; }
.gallery-album { display:flex; flex-wrap:wrap; gap:8px; padding:8px; }
.gallery-album-item { width:200px; flex-shrink:0; }
.gallery-album-item img { width:100%; height:150px; object-fit:cover; border-radius:4px; cursor:pointer; }
.gallery-album-item img:hover { opacity:0.85; }






/* History buttons and items */
.history-item { background:#161b22; border-radius:6px; padding:8px 12px; margin-bottom:6px; display:flex; align-items:center; gap:10px; }
.history-date { color:#00b894; font-weight:bold; min-width:120px; }
.history-preview { color:#aaa; flex:1; }
.history-actions { display:flex; gap:4px; }
.history-btn { background:#2d3436; color:#dfe6e9; border:none; padding:4px 10px; border-radius:4px; cursor:pointer; font-size:11px; }
.history-btn:hover { background:#00b894; color:#fff; }
.detail-view { padding:10px; }
.detail-view h3 { color:#00b894; margin-bottom:10px; }
.detail-back { margin-bottom:8px; }
.detail-back a { color:#00b894; text-decoration:none; cursor:pointer; }

/* Time input dark theme fix */
.facility-table input[type=time] { color-scheme: dark; color:#fff; background:#1a1a2e; border:1px solid #444; }


/* ===== Mobile Responsive ===== */
@media (max-width: 768px) {
  #sidebar { display: none; }
  #sidebar.open { display: block; position: fixed; z-index: 1000; width: 240px; }
  #sidebarOverlay.show { display: block; }
  #main { width: 100% !important; margin-left: 0 !important; }
  #layout { flex-direction: column; }
  .board-grid { grid-template-columns: 1fr 1fr; }
  .banner input[type=text] { width: 200px; }
}
@media (max-width: 480px) {
  body { font-size: 13px; }
  .board-grid { grid-template-columns: 1fr; }
  .banner { height: 46px; }
  .banner input[type=text] { width: 140px; font-size: 12px; }
  #main { padding: 8px; }
  .thread-item { padding: 8px; }
  .facility-tabs { flex-wrap: wrap; }
  .facility-tab { padding: 6px 10px; font-size: 12px; }

/* ===== Password Lock Icon ===== */
.sidebar-lock { font-size:11px; margin-left:4px; opacity:0.6; }
}