/* 목록 줄(552-4) — `.ui-sidebar-row` = 옛 이름(M01 · M02 좌측 목록) · 자리 · 크기는 그대로 · 겉만 공통 값 새 줄(`.ui-list-row`)은 data-size 높이 단 · 상태 = :is(:hover, [data-state]) 로 부품 모음이 굳혀 보임 */ .ui-sidebar-row { display: flex; justify-content: space-between; gap: var(--spacing-8); padding: var(--spacing-4) var(--spacing-8); border: 0; border-radius: var(--radius-buttons); background: transparent; color: var(--color-text-body); font: inherit; font-size: var(--text-body-sm); text-align: left; cursor: pointer; } .ui-sidebar-row:is(:hover, [data-state="hover"]) { background: var(--color-hover); } .ui-sidebar-row:is(:active, [data-state="active"]) { background: var(--color-border); } .ui-sidebar-row.is-active { background: var(--color-accent-soft); color: var(--color-accent); } .ui-sidebar-row:is(:disabled, [aria-disabled="true"]) { background: transparent; color: var(--color-text-muted); opacity: 0.5; cursor: not-allowed; } /* 새 줄 — 높이 단 · 글 · 덧붙임 */ .ui-list-row { box-sizing: border-box; align-items: center; width: 100%; padding-block: 0; } .ui-list-row[data-size="28"] { min-height: 28px; } .ui-list-row[data-size="32"] { min-height: 32px; } .ui-list-row[data-size="36"] { min-height: 36px; } .ui-list-row__text { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; } .ui-list-row__label, .ui-list-row__sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ui-list-row__sub { color: var(--color-text-muted); font-size: var(--text-caption); } .ui-list-row__trailing { display: inline-flex; flex: none; align-items: center; gap: var(--spacing-4); color: var(--color-text-secondary); font-size: var(--text-caption); } .ui-list-row__no { display: inline-grid; flex: none; place-items: center; width: 18px; height: 18px; border-radius: var(--radius-pills); background: var(--color-surface); color: var(--color-text-secondary); font-size: var(--text-caption); } .ui-list-row.is-active .ui-list-row__no { background: var(--color-accent); color: var(--color-primary-text); } /* 끌기 손잡이 — 점 여섯(2 × 3) */ .ui-list-row__grip { flex: none; width: 8px; height: 14px; background: radial-gradient(circle, var(--color-text-muted) 1px, transparent 1.5px) 0 0 / 4px 4.6px; cursor: grab; } .ui-list-row--stripe { box-shadow: inset 3px 0 0 var(--ui-list-row-stripe, var(--color-border)); border-radius: 0 var(--radius-buttons) var(--radius-buttons) 0; } /* 숨김 — display 가 [hidden] 을 덮지 않게(공용 기본 꼴이 안 실린 곳 · 페이지 꾸밈 위에서도) */ :is(.ui-list-row__no, .ui-list-row__text, .ui-list-row__trailing, .ui-sidebar-row)[hidden] { display: none !important; }