/* --- sidebar.css --- */
.sidebar { width: 400px; height: 100%; background-color: var(--bg-white); border-right: 1px solid var(--border-color); padding: 32px; display: flex; flex-direction: column; flex-shrink: 0; overflow-y: auto; }
.sidebar-header h1 { font-size: 1.875rem; font-weight: 900; color: var(--primary-blue); line-height: 1.2; }
.sidebar-header p { font-size: 1rem; color: var(--text-sub); margin-top: 0.5rem; }
.part-header { font-size: 0.875rem; font-weight: 700; color: var(--text-sub); margin-top: 2rem; margin-bottom: 1rem; padding-left: 0.75rem; border-left: 3px solid var(--primary-blue); }
.unit-nav { display: flex; flex-direction: column; gap: 0.5rem; }
.unit-card-nav { display: flex; align-items: center; gap: 1rem; padding: 0.875rem; border-radius: 0.5rem; border: 1px solid transparent; cursor: pointer; transition: all 0.2s ease-in-out; }
.unit-card-nav:hover { background-color: #f1f3f5; }
.unit-card-nav.active { background-color: var(--primary-blue-light); border-color: #a5d8ff; font-weight: 700; }
.unit-card-nav .icon { font-size: 1.125rem; color: var(--primary-blue); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background-color: #e7f5ff; border-radius: 0.375rem; flex-shrink: 0; }
.unit-card-nav .title { font-size: 1rem; font-weight: 500; color: var(--text-dark); }
.unit-card-nav.active .title { font-weight: 700; }