/* 탐색기 오른쪽 목록 - 동작은 explorer.js, 규칙은 claude_common/ui/explorer.md
   줄목록 40px(휴대폰 48px) · 자세히 34px · 바둑판 고정 116px. 선택 = 옅은 파랑, 놓을 자리 = 초록(선택과 다른 색), 잘라낸 것 = 흐리게 */
.explorer {
  --ex-folder: var(--uk-folder);            /* 폴더 그림 */
  --ex-folder-system: var(--uk-brand);     /* 시스템이 만든 폴더(옮기기·지우기 불가) */
  --ex-warn: var(--uk-warn-fg);              /* 잘라내기 표시 */
  --ex-cols: 24px minmax(50px, 1fr) minmax(84px, 190px) minmax(56px, 120px) minmax(48px, 130px);
  position: relative; display: flex; flex-direction: column; min-width: 0; min-height: 0;
  background: var(--uk-surface); color: var(--uk-fg); font-size: 14px;
}

/* 위쪽 진행 막대 - 220ms 뒤에 켠다(JS) */
.ex-progress { position: absolute; inset: 0 0 auto 0; height: 3px; overflow: hidden; opacity: 0; pointer-events: none; z-index: 3; transition: opacity .15s; }
.explorer.is-loading .ex-progress { opacity: 1; }
.ex-progress::before { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: var(--uk-brand); animation: ex-prog 1.1s ease-in-out infinite; }
@keyframes ex-prog { from { left: -40%; } to { left: 100%; } }

.ex-scroll { position: relative; flex: 1 1 auto; min-height: 0; overflow: auto; padding: 6px; scrollbar-width: thin; }
.explorer.is-marquee, .explorer.is-marquee * { -webkit-user-select: none; user-select: none; } /* 사각형 선택 중 글자 긁힘 막기 */
.ex-items { list-style: none; margin: 0; padding: 0; }
.ex-items:focus, .ex-items:focus-visible { outline: none; } /* 틀 전체 초점 링 대신 항목 표시 */

.ex-item { position: relative; cursor: default; user-select: none; -webkit-user-drag: element; } /* none으로 되돌리지 않는다 - 드래그가 죽는다 */
.ex-item:hover { background: var(--uk-head); }
.ex-item.is-selected { background: var(--uk-pick-light); }
.ex-item.is-cursor { box-shadow: inset 0 0 0 1px var(--uk-brand); }
.ex-items:not(:focus-within) .ex-item.is-cursor:not(.is-selected) { box-shadow: none; }
.ex-item.is-cut { opacity: .45; }
.ex-item.ex-droptarget, .ex-droptarget { background: color-mix(in srgb, var(--uk-ok) 16%, var(--uk-surface)) !important; outline: 2px solid var(--uk-ok); outline-offset: -2px; }
.ex-item.ex-dropdeny, .ex-dropdeny { background: var(--uk-danger-light) !important; outline: 2px dashed var(--uk-danger); outline-offset: -2px; }

.ex-thumb { flex: 0 0 auto; display: grid; place-items: center; border-radius: var(--uk-r-sm); overflow: hidden; color: var(--ex-folder); }
.ex-thumb svg { width: 100%; height: 100%; }
.ex-thumb.is-file { color: var(--uk-muted); }
.ex-thumb.is-file svg { width: 82%; height: 82%; }
.ex-thumb.is-system { color: var(--ex-folder-system); }
.ex-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; -webkit-user-drag: none; -webkit-touch-callout: none; } /* 그림 끌기 금지 - 같은 사진이 다시 올라간다 */
.ex-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-meta, .ex-col { font-size: 13px; color: var(--uk-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ex-check { display: none; }
.ex-more { display: none; }

/* 보기 1: 목록 */
.ex-items[data-view="list"] .ex-item { display: flex; align-items: center; gap: 10px; height: 40px; margin: 2px 4px; padding: 0 8px; border-radius: var(--uk-r-sm); }
.ex-items[data-view="list"] .ex-thumb { width: 30px; height: 30px; }
.ex-items[data-view="list"] .ex-name { flex: 1 1 auto; }

/* 보기 2: 자세히 - 머리글은 스크롤 안에 붙여 둔다(같은 폭) */
.ex-head { display: none; }
.explorer[data-view="details"] .ex-head {
  display: grid; grid-template-columns: var(--ex-cols); gap: 10px; align-items: center;
  position: sticky; top: 0; z-index: 2; height: 30px; margin: -6px -6px 2px; padding: 0 18px;
  background: var(--uk-surface); border-bottom: 1px solid var(--uk-line);
}
.ex-head button { border: 0; background: none; padding: 0; text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: var(--uk-muted); cursor: pointer; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ex-head button:hover { color: var(--uk-fg); }
.ex-head button.is-nosort { cursor: default; }
.ex-head button.is-nosort:hover { color: var(--uk-muted); }
.ex-arrow { font-size: 9px; margin-left: 3px; }
.ex-items[data-view="details"] .ex-item { display: grid; grid-template-columns: var(--ex-cols); gap: 10px; align-items: center; height: 34px; margin: 1px 4px; padding: 0 8px; border-radius: var(--uk-r-sm); }
.ex-items[data-view="details"] .ex-thumb { width: 24px; height: 24px; }
.ex-items[data-view="details"] .ex-meta { display: none; }

/* 보기 3: 큰 아이콘(바둑판) - 칸 고정 116px, 바깥 6px은 사각형 선택을 시작할 빈 자리 */
.ex-items[data-view="icons"] { display: grid; gap: 2px; justify-content: start; grid-template-columns: repeat(auto-fill, 116px); }
.ex-items[data-view="icons"] .ex-item { display: flex; flex-direction: column; align-items: center; gap: 6px; margin: 6px; padding: 4px 3px 3px; border-radius: var(--uk-r-md); text-align: center; }
.ex-items[data-view="icons"] .ex-thumb { width: 96px; height: 96px; }
.ex-items[data-view="icons"] .ex-thumb.is-file svg { width: 64%; height: 64%; }
.ex-items[data-view="icons"] .ex-name { width: 100%; white-space: normal; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow-wrap: anywhere; }
.ex-items[data-view="icons"] .ex-meta { display: none; }

.ex-emptybox { padding: 8px 0; }
.ex-marquee { position: absolute; z-index: 4; pointer-events: none; border: 1px solid var(--uk-brand); background: color-mix(in srgb, var(--uk-brand) 12%, transparent); }

/* 아래 상태 표시줄 - 고른 개수는 항목 수 바로 옆 */
.ex-status { flex: none; display: flex; align-items: center; gap: 16px; height: 32px; padding: 0 14px; border-top: 1px solid var(--uk-line); font-size: 12.5px; color: var(--uk-muted); white-space: nowrap; overflow: hidden; }
.ex-clip { display: inline-flex; align-items: center; gap: 4px; color: var(--ex-warn); }
.ex-clip[hidden] { display: none; }
.ex-clip-x { border: 0; background: none; color: inherit; cursor: pointer; padding: 2px 4px; border-radius: var(--uk-r-xs); font-size: 12px; }
.ex-clip-x:hover { background: var(--uk-head); }
.ex-sel { color: var(--uk-fg); }
.ex-sel:empty { display: none; }

/* 우클릭 메뉴 - 펼침 메뉴 층. 쓸 수 없는 것은 흐리게, 위험한 것은 빨강 */
.ex-ctx { position: fixed; z-index: 1000; min-width: 196px; padding: 5px; background: var(--uk-surface); border-radius: var(--uk-r-md); box-shadow: var(--uk-up-lg); }
.ex-ctx[hidden] { display: none; }
.ex-ctx button { display: flex; align-items: center; gap: 12px; width: 100%; height: 34px; padding: 0 10px; border: 0; border-radius: var(--uk-r-sm); background: none; font: inherit; font-size: 13.5px; color: var(--uk-fg); text-align: left; cursor: pointer; }
.ex-ctx button:hover:not(:disabled), .ex-ctx button:focus-visible { background: var(--uk-head); outline: none; }
.ex-ctx button:disabled { opacity: .4; cursor: default; }
.ex-ctx button.is-danger { color: var(--uk-danger); }
.ex-ctx kbd { margin-left: auto; font-family: inherit; font-size: 11.5px; line-height: 1; color: var(--uk-muted); border: 0; background: none; padding: 0; }
.ex-ctx-sep { height: 1px; margin: 4px 6px; background: var(--uk-line); }

/* 끌기 표시 - 개수·이름 */
.ex-ghost { position: fixed; top: -100px; left: 0; padding: 6px 12px; border-radius: var(--uk-r-sm); background: var(--uk-brand); color: var(--uk-on-strong); font-size: 13px; font-weight: 600; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

.ex-rename { width: 100%; min-width: 0; font: inherit; color: var(--uk-fg); background: var(--uk-surface); border: 1px solid var(--uk-brand); border-radius: var(--uk-r-xs); padding: 2px 4px; outline: none; box-shadow: 0 0 0 3px var(--uk-brand-light); }
.ex-items[data-view="icons"] .ex-rename { text-align: center; }

/* 터치: 선택 체크는 터치 기기에서만, 줄 끝 ⋮ */
@media (pointer: coarse) {
  .ex-more { display: grid; place-items: center; flex: none; width: 40px; height: 40px; margin-right: -8px; border: 0; background: none; color: var(--uk-muted); font-size: 18px; border-radius: var(--uk-r-sm); }
  .ex-items[data-view="icons"] .ex-more { position: absolute; top: 2px; right: 2px; }
  .explorer.is-selecting .ex-more { visibility: hidden; }
  .explorer.is-selecting .ex-check { display: grid; place-items: center; position: absolute; top: 6px; right: 6px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--uk-border); background: var(--uk-surface); color: transparent; font-size: 12px; font-weight: 700; }
  .ex-items[data-view="list"] .ex-check, .ex-items[data-view="details"] .ex-check { top: 50% !important; transform: translateY(-50%); }
  .explorer.is-selecting .ex-item.is-selected .ex-check { background: var(--uk-pick); border-color: var(--uk-pick); color: var(--uk-on-strong); }
}
/* 좁은 화면 - tree.md와 같은 판정 */
@media (max-width: 820px), (pointer: coarse) and (max-width: 1024px) {
  .ex-items[data-view="list"] .ex-item { height: 48px; }
  .ex-items[data-view="icons"] { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
  .ex-items[data-view="icons"] .ex-item { margin: 4px; }
  .ex-items[data-view="icons"] .ex-thumb { width: 100%; max-width: 96px; height: auto; aspect-ratio: 1; }
  .ex-status { display: none; }
}
@media (prefers-reduced-motion: reduce) { .ex-progress::before { animation-duration: 2.4s; } }