/* 트리 - 동작은 tree.js, 규칙은 claude_common/ui/tree.md
   줄 높이 32px, 들여쓰기 14px, 세로 안내선 없음, 현재 줄 = 옅은 파랑 + 왼쪽 3px 선 + 굵게 */
.tree { display: flex; flex-direction: column; min-height: 0; font-size: 15px; }
.tree-tools { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 8px; border-bottom: 1px solid var(--uk-line); }
.tree-closeall { border: 0; background: none; color: var(--uk-muted); font: inherit; font-size: 12.5px; padding: 4px 6px; border-radius: var(--uk-r-sm); cursor: pointer; }
.tree-closeall:hover { background: var(--uk-head); color: var(--uk-fg); }
.tree-x { border: 0; background: none; color: var(--uk-muted); width: 28px; height: 28px; border-radius: var(--uk-r-sm); cursor: pointer; }
.tree-x:hover { background: var(--uk-head); color: var(--uk-fg); }
.tree-list, .tree-list ul { list-style: none; margin: 0; padding: 0; }
.tree-list { overflow: auto; padding: 4px 0; scrollbar-width: thin; } /* 얇은 스크롤 막대 */
.tree-row { display: flex; align-items: center; height: 32px; padding-right: 8px; border-left: 3px solid transparent; }
.tree-row:hover { background: var(--uk-head); }
.tree-row.is-current { background: var(--uk-pick-light); border-left-color: var(--uk-pick); }
.tree-row.is-current .tree-name { font-weight: 700; color: var(--uk-pick-dark); }
.tree-row.is-system .tree-name { color: var(--uk-muted); } /* 시스템 폴더 - 색이 곧 수정 불가 표시 */
.tree-arrow { flex: 0 0 auto; min-width: 24px; width: 24px; height: 24px; display: grid; place-items: center; border: 0; background: none; padding: 0; color: var(--uk-muted); border-radius: var(--uk-r-sm); cursor: pointer; }
.tree-arrow svg { transition: transform .15s ease; }
.tree-arrow.is-open svg { transform: rotate(90deg); }
.tree-arrow.is-empty { opacity: .3; cursor: default; } /* 하위가 없어도 흐린 화살표 - 눌리지 않는다 */
.tree-name { flex: 1 1 auto; min-width: 0; height: 100%; text-align: left; border: 0; background: none; padding: 0 4px; font: inherit; color: var(--uk-fg); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tree-arrow:focus-visible, .tree-name:focus-visible { outline: 2px solid var(--uk-brand); outline-offset: -2px; }
.tree-spin { width: 13px; height: 13px; border: 2px solid var(--uk-border); border-top-color: var(--uk-brand); border-radius: 50%; animation: tree-spin .7s linear infinite; }
@keyframes tree-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tree-arrow svg { transition: none; } .tree-spin { animation-duration: 1.5s; } }
/* 끌어다 놓기 - 놓을 수 있는 줄 = 초록 바탕 + 2px 초록 테두리(선택·현재 줄의 파랑과 다른 색), 못 놓는 줄 = 빨강 점선 + 금지 커서 */
.tree.is-dragging, .tree.is-dragging * { cursor: grabbing !important; -webkit-user-select: none; user-select: none; }
.tree.is-nodrop-cursor, .tree.is-nodrop-cursor * { cursor: not-allowed !important; }
.tree-row.is-drop { background: var(--uk-ok-light); box-shadow: inset 0 0 0 2px var(--uk-ok); }
.tree-row.is-nodrop { box-shadow: inset 0 0 0 2px var(--uk-danger-light); }
.tree-row.is-dragged { opacity: .45; }
.tree-ghost { position: fixed; left: 0; top: 0; z-index: 2147483000; pointer-events: none; padding: 6px 12px; border-radius: var(--uk-r-sm); background: var(--uk-brand); color: var(--uk-on-strong); font-size: 13px; font-weight: 600; box-shadow: var(--uk-up-lg); white-space: nowrap; }
@media (pointer: coarse) { .tree-name { -webkit-touch-callout: none; } } /* 길게 누를 때 뜨는 메뉴 막기 */
.tree-add { margin-left: auto; border: 0; background: none; color: var(--uk-brand-dark); font: inherit; font-size: 12.5px; font-weight: 600; padding: 4px 8px; border-radius: var(--uk-r-sm); cursor: pointer; }
.tree-add:hover { background: var(--uk-brand-light); }
.tree-add + .tree-x { margin-left: 0; }
.tree-list .inline-input { list-style: none; }