.workspace { min-height: 100dvh; }
.sidebar { position: fixed; inset: 0 auto 0 0; width: var(--rail); height: 100dvh; background: var(--sidebar); padding: 12px var(--space-3); display: flex; flex-direction: column; z-index: 30; overflow: hidden; }
.sidebar-scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-block: var(--space-1); }
.brand-row { display: flex; align-items: center; gap: var(--space-2); min-height: 44px; padding: 0 var(--space-1) var(--space-3); flex: none; }
.brand-mark { width: 26px; height: 26px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; border-radius: var(--radius); flex: none; }
.brand-name { font-size: var(--text-ui); font-weight: 600; letter-spacing: var(--nav-tracking); }
.brand-caption { margin-left: auto; color: var(--muted); font-size: var(--text-xs); }
.sidebar-add { width: 100%; min-height: var(--nav-height); color: var(--accent); justify-content: flex-start; padding: var(--nav-inset); border: 0; gap: var(--nav-inset); margin-block: 10px 0; flex: none; font-size: var(--text-ui); line-height: var(--nav-line); }
.sidebar-add:hover { background: var(--selected); }
.sidebar-add .icon { width: var(--icon-md); height: var(--icon-md); }
.nav-list { display: grid; }
.nav-link { min-height: var(--nav-height); padding: var(--nav-inset); display: flex; align-items: center; gap: var(--nav-inset); border-radius: var(--radius); color: var(--secondary); font-size: var(--text-ui); line-height: var(--nav-line); letter-spacing: var(--nav-tracking); }
.nav-link > .icon { width: var(--icon-md); height: var(--icon-md); } /* 20px: the 24px glyphs read too heavy next to the labels (user) */
.nav-link:hover { background: var(--line); }
.nav-link[aria-current="page"] { background: var(--selected); color: var(--accent-hover); font-weight: 400; }
.nav-label { flex: 1; min-width: 0; }
.nav-count { font-size: var(--text-xs); color: var(--muted); font-variant-numeric: tabular-nums; }
.nav-link[aria-current="page"] .nav-count { color: var(--accent-hover); }
.nav-group-title { display: flex; align-items: center; justify-content: space-between; padding: var(--space-6) 0 var(--space-1) var(--space-1); color: var(--muted); font-size: var(--text-sm); font-weight: 600; }
.project-nav .nav-link { gap: var(--nav-inset); }
.project-nav .project-mark { width: var(--icon-md); text-align: center; font-size: var(--task-circle); }
.sidebar-footer { flex: none; padding-top: var(--space-3); border-top: 1px solid var(--line); }
.account-chip { display: flex; align-items: center; padding: 12px 8px 0; gap: 10px; border-top: 1px solid var(--line); margin-top: 12px; }
.avatar { background: var(--line); color: var(--secondary); height: 30px; width: 30px; border-radius: 50%; display: grid; place-items: center; font-size: var(--text-xs); font-weight: 600; }
.account-label { font-size: var(--text-xs); min-width: 0; }
.account-label strong { display: block; }
.sync-label { display: flex; align-items: center; gap: var(--space-1); color: var(--muted); font-size: var(--text-xs); }
.sync-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--success); }
.main { margin-left: var(--rail); min-height: 100dvh; }
/* Collapsible sidebar (user: "좌측 사이드 메뉴도 열고 닫을 수 있도록"): the html class zeroes the rail
   so the main column, the side panel width and the toast all follow; the sidebar slides out. */
html.is-sidebar-collapsed { --rail: 0px; }
.is-sidebar-collapsed .sidebar { width: 280px; transform: translateX(-100%); visibility: hidden; }
.sidebar.is-animating { transition: transform 240ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 240ms; }
.is-sidebar-collapsed .sidebar.is-animating { transition: transform 240ms cubic-bezier(.2, .7, .2, 1), visibility 0s linear 240ms; }
.main.is-sidebar-animating { transition: margin-left 240ms cubic-bezier(.2, .7, .2, 1); }
.sidebar-collapse { margin-right: var(--space-1); color: var(--muted); }
.sidebar-collapse[aria-pressed="true"] { color: var(--accent); }
.topbar { height: var(--topbar-height); display: flex; align-items: center; padding: var(--space-3) var(--space-5); gap: var(--space-2); }
.breadcrumb { color: var(--muted); font-size: var(--text-xs); display: flex; align-items: center; gap: var(--space-3); }
.breadcrumb span:last-child { color: var(--secondary); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--space-1); }
.topbar-actions .button { font-size: var(--text-xs); }
.mobile-menu { display: none; }
.page { padding: var(--page-top) var(--page-inset) 84px; max-width: calc(var(--page-width) + 2 * var(--page-inset)); margin-inline: auto; }
.page-wide { max-width: calc(var(--wide-width) + 2 * var(--page-inset)); }
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-3); }
.page-header > div:first-child { min-width: 0; }
.page-header h1 { display: flex; align-items: center; gap: var(--space-3); margin-left: -1px; width: fit-content; }
.eyebrow { font-size: var(--text-xs); color: var(--muted); margin-bottom: 8px; }
.page-subtitle { color: var(--secondary); font-size: var(--text-sm); line-height: var(--task-line); margin-top: 9px; display: flex; align-items: center; gap: var(--space-1); }
.page-subtitle .icon { width: var(--icon-sm); height: var(--icon-sm); }
.header-actions { display: flex; align-items: center; gap: var(--space-1); padding-top: 1px; }
.filter-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--line); margin-bottom: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.filter-tab { display: flex; align-items: center; gap: 6px; min-height: var(--nav-height); color: var(--muted); white-space: nowrap; font-size: var(--text-sm); border-bottom: 2px solid transparent; padding-bottom: 2px; }
.filter-tab:hover { color: var(--ink); }
.filter-tab.active { color: var(--ink); border-bottom-color: var(--ink); font-weight: 600; }
.section-heading { display: flex; align-items: center; justify-content: space-between; min-height: var(--section-height); padding: var(--section-pad-top) 0 var(--section-pad-bottom); border-bottom: 1px solid var(--line); gap: var(--space-3); }
.section-heading h2 { font-size: var(--text-base); line-height: var(--section-line); font-weight: 700; }
.section-count { margin-left: var(--space-2); font-weight: 400; font-size: var(--text-xs); color: var(--muted); }
.task-section + .task-section { margin-top: var(--section-gap); }
.section-danger { color: var(--danger); }
.section-caption { font-size: var(--text-xs); color: var(--muted); }
.empty-notice { padding-block: var(--space-3); color: var(--muted); font-size: var(--text-sm); }
.sidebar-backdrop { display: none; }
.nav-row { position: relative; display: flex; align-items: center; border-radius: var(--radius); }
.nav-row > .nav-link { flex: 1; min-width: 0; padding-right: 40px; }
.nav-row > .nav-link:hover { background: transparent; }
.nav-row:hover, .nav-row:focus-within, .nav-row:has(:popover-open) { background: var(--line); }
.nav-row:has(> .nav-link[aria-current="page"]) { background: var(--selected); }
.nav-row:has(> .nav-link[aria-current="page"]):hover { background: var(--selected); }
/* Dragging a project row in the sidebar (sidebar_reorder.js). */
body.is-nav-sorting { cursor: grabbing; user-select: none; }
body.is-nav-sorting .nav-row, body.is-nav-sorting .nav-link { cursor: grabbing; }
.nav-row.is-dragging { background: var(--selected); box-shadow: 0 2px 8px rgb(0 0 0 / 14%); z-index: 2; }
.nav-row.is-dragging .nav-menu-button { visibility: hidden; }
.nav-menu-button { position: absolute; right: 6px; top: 50%; width: 28px; height: 28px; transform: translateY(-50%); border: 1px solid transparent; border-radius: 6px; color: var(--secondary); opacity: 0; }
.nav-menu-button .icon { width: 18px; height: 18px; }
.nav-row:hover .nav-menu-button, .nav-row:focus-within .nav-menu-button, .nav-row:has(:popover-open) .nav-menu-button { opacity: 1; border-color: var(--border); }
.nav-menu-button:hover, .nav-row:has(:popover-open) .nav-menu-button { background: var(--surface); color: var(--ink); }
.nav-row:hover .nav-count, .nav-row:focus-within .nav-count, .nav-row:has(:popover-open) .nav-count { visibility: hidden; }
.page-filter { display: inline-flex; align-items: center; gap: var(--space-1); margin-left: var(--space-3); padding: 0 var(--space-2); border: 1px solid var(--line); border-radius: var(--radius-chip); font-size: var(--text-sm); font-weight: 400; color: var(--secondary); vertical-align: middle; }
.archived-projects { list-style: none; padding: 0; margin: var(--space-3) 0 0; display: grid; gap: var(--space-2); }
.archived-projects li { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.archived-projects li > span:first-child { display: inline-flex; align-items: center; gap: var(--space-2); }
.archived-actions { display: flex; gap: var(--space-2); }
.archived-actions form { display: contents; }
.button-danger { color: var(--danger); }

/* 라벨 관리 페이지 */
.label-row { display: flex; align-items: center; gap: var(--space-2); min-height: var(--nav-height); border-bottom: 1px solid var(--line); }
.label-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: var(--space-2); color: var(--ink); text-decoration: none; }
.label-link .label-mark { font-size: var(--task-circle); width: var(--icon-lg); text-align: center; }
.label-link .label-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-tools { display: flex; align-items: center; gap: 2px; }
.label-favorite[aria-pressed="true"] { color: var(--accent); }
.label-edit { position: relative; }
.label-edit > summary { list-style: none; cursor: pointer; }
.label-edit > summary::-webkit-details-marker { display: none; }
.label-edit[open] > .label-form { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--picker-shadow); padding: var(--space-2); }
.label-form { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }
.label-form input[type="text"], .label-form select { min-height: var(--control); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); }
.label-adder[open] > .label-form { padding: var(--space-3); }

/* 필터 관리 페이지 · 템플릿 목록 */
.filter-query { font-size: var(--text-xs); color: var(--secondary); background: var(--subtle); padding: 1px 6px; border-radius: var(--radius-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 40%; }
.filter-mark .icon { width: var(--icon-sm); height: var(--icon-sm); color: var(--project-color); }
.filter-query-input { min-width: 220px; }
.filter-help { margin-top: var(--space-4); }
.filter-help code { font-size: var(--text-xs); background: var(--subtle); padding: 1px 5px; border-radius: var(--radius-sm); }
.template-list .template-apply { display: inline-flex; gap: var(--space-1); align-items: center; }
.template-list .template-apply input { min-height: var(--control); padding: 0 var(--space-2); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--ink); font: inherit; font-size: var(--text-sm); width: 160px; }