/* ── Sidebar with sections and sub-menus (public/js/nav.js, app.js renderSidebar) ─────────────────── */
.sidebar { overflow: hidden; }
.side-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.side-top .brand { padding-bottom: 8px; min-width: 0; }
.side-mini { width: 28px; height: 28px; flex: none; color: var(--text-3); }
.side-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0 -6px; padding: 0 6px 8px; scrollbar-width: thin; }
.side-nav .nav-item { display: flex; align-items: center; gap: 2px; border-radius: 9px; }
.side-nav .nav-link { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 9px; color: var(--text-2); font: inherit; font-weight: 500; font-size: 13.5px; background: none; border: 0; cursor: pointer; text-align: left; transition: background .15s, color .15s; }
.side-nav .nav-link:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-nav .nav-link.active { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.side-nav .nav-link svg { width: 18px; height: 18px; flex: none; }
.side-nav .nav-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-nav [data-item="creators"] .nav-label { white-space: normal; line-height: 1.4; }
.side-nav .nav-tog { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border: 0; background: none; color: var(--text-3); border-radius: 7px; cursor: pointer; }
.side-nav .nav-tog:hover { background: var(--surface-2); color: var(--text); }
.side-nav .nav-tog svg { transition: transform .15s var(--ease); transform: rotate(-90deg); }
.side-nav .nav-tog[aria-expanded="true"] svg { transform: none; }
.side-nav .nav-sub { display: flex; flex-direction: column; gap: 1px; margin: 1px 0 6px 19px; padding-left: 10px; border-left: 1px solid var(--border-strong); }
.side-nav .nav-sub[hidden] { display: none; }
.side-nav .nav-sub a { display: block; padding: 5px 8px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.side-nav .nav-sub a:hover { background: var(--surface-2); color: var(--text); text-decoration: none; }
.side-nav .nav-sub a.active { color: var(--accent); background: var(--accent-soft); font-weight: 600; box-shadow: inset 2px 0 0 var(--accent); }
.side-nav .nav-group { margin-top: 6px; }
.side-nav .nav-sec-btn { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 8px 10px 4px; border: 0; background: none; cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; color: var(--text-3); letter-spacing: .06em; border-radius: 7px; }
.side-nav .nav-sec-btn:hover { color: var(--text); }
.side-nav .nav-sec-btn svg { transition: transform .15s var(--ease); }
.side-nav .nav-group.closed .nav-sec-btn svg { transform: rotate(-90deg); }
.side-nav .nav-group.closed.has-active .nav-sec-btn span::after { content: ''; display: inline-block; width: 6px; height: 6px; margin-left: 6px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.side-nav .nav-sec-body[hidden] { display: none; }
.side-nav a:focus-visible, .side-nav button:focus-visible, .side-mini:focus-visible { outline: 2px solid var(--accent-ring); outline-offset: 1px; }
.sidebar .work-status.active { background: var(--accent-soft); }

/* 아이콘만 (접은 사이드바): icons with tooltips; sub-menus and section names are hidden, every screen stays one click away. */
:root[data-nav="mini"] { --sidebar-w: 64px; }
:root[data-nav="mini"] .sidebar { padding: 14px 8px; }
:root[data-nav="mini"] .side-top { flex-direction: column; }
:root[data-nav="mini"] .brand-txt, :root[data-nav="mini"] .nav-label, :root[data-nav="mini"] .side-nav .cnt, :root[data-nav="mini"] .side-nav .nav-tog, :root[data-nav="mini"] .side-nav .nav-sub, :root[data-nav="mini"] .nav-sec-btn span, :root[data-nav="mini"] .nav-sec-btn svg, :root[data-nav="mini"] .credit-meter, :root[data-nav="mini"] .ws-txt, :root[data-nav="mini"] .ws-switch > svg, :root[data-nav="mini"] .work-status .grow, :root[data-nav="mini"] .work-status [data-ws-count] { display: none !important; }
:root[data-nav="mini"] .side-nav .nav-sec-body[hidden] { display: block; }
:root[data-nav="mini"] .side-nav .nav-sec-btn { padding: 0; height: 1px; margin: 6px 8px; background: var(--border); pointer-events: none; }
:root[data-nav="mini"] .side-nav .nav-link { justify-content: center; padding: 9px 0; }
:root[data-nav="mini"] .ws-switch { justify-content: center; padding: 6px 0; }
:root[data-nav="mini"] .work-status { justify-content: center; }

/* 휴대폰 '메뉴': every screen with its sub-views, grouped like the sidebar */
.mnav-all { max-height: min(70vh, 560px); overflow-y: auto; min-width: 240px; }
.mnav-all a.on { color: var(--accent); font-weight: 600; }
.mnav-subs { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 8px 6px 34px; }
.dropdown .mnav-subs a { width: auto; padding: 3px 8px; font-size: 12px; color: var(--text-2); background: var(--surface-2); border-radius: 6px; }
.dropdown .mnav-subs a.on { background: var(--accent-soft); color: var(--accent); }
@media (max-width: 860px) { :root[data-nav="mini"] { --sidebar-w: 0px; } }
@media (prefers-reduced-motion: reduce) { .side-nav .nav-tog svg, .side-nav .nav-sec-btn svg { transition: none; } }