/* 편집기 첫 화면 (React 편집기 공통) - 동작은 claude_common/react/components/HomePage.tsx, 규칙 claude_common/ui/doc-home.md
   머리줄(앱 아이콘·검색·프로필) + 카드 격자(맨 앞 '빈 ○○', 첫 쪽 미리보기, 왼쪽 위 원본 형식 뱃지, ⋮ 메뉴)·목록 보기
   readocapi에서 옮김(2026-10-06). 색·모서리는 --uk-* 만 */
/* ── 내 문서 목록 ── */
.list-shell { min-height: 100%; }
.list-top { display: flex; align-items: center; gap: 16px; padding: 10px 24px; background: var(--uk-surface); }
.list-search { flex: 1; min-width: 0; max-width: 720px; margin: 0 auto; display: flex; align-items: center; gap: 12px; height: 46px; padding: 0 18px; border-radius: var(--uk-r-pill); background: var(--uk-sunk); color: var(--uk-muted); }
.list-search:focus-within { background: var(--uk-surface); box-shadow: 0 1px 3px rgba(var(--uk-shc), .25); }
.list-search input { flex: 1; min-width: 0; border: 0; background: none; font-size: 16px; outline: none; color: var(--uk-fg); }
.list-h2 { margin: 0; font-size: 16px; font-weight: 500; }
/* 문서 카드 */
.list-main { padding: 20px 24px 40px; }
.list-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.list-tools { display: flex; align-items: center; gap: 4px; }
.list-filter { height: 36px; padding: 0 8px; border: 0; border-radius: var(--uk-r-sm); background: none; font-size: 14px; cursor: pointer; color: var(--uk-fg); }
.list-filter:hover, .list-icon-btn:hover, .card-more:hover, .card-more.is-active { background: var(--uk-sunk); }
.list-icon-btn, .card-more { width: 40px; height: 40px; display: grid; place-items: center; border: 0; border-radius: 50%; background: none; color: var(--uk-muted); cursor: pointer; }
.doc-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 20px; }
.doc-card { position: relative; border: 1px solid var(--uk-border); border-radius: var(--uk-r-sm); background: var(--uk-surface); transition: border-color .12s; }
/* ⋮ 메뉴가 카드 밖으로 나와 다음 줄 카드 위에 뜨게: 카드는 자르지 않고(미리보기만 둥글게 자름), 메뉴 연 카드를 위로 */
.doc-card:has(.card-more.is-active) { z-index: 20; }
.doc-card .thumb { border-radius: var(--uk-r-sm) var(--uk-r-sm) 0 0; }
.doc-card:hover { border-color: var(--uk-brand); }
.card-link { display: block; width: 100%; padding: 0; border: 0; background: none; text-align: left; font: inherit; cursor: pointer; color: inherit; text-decoration: none; }
.thumb-wrap { position: relative; }
.thumb-wrap > .fmt-badge { position: absolute; left: 10px; top: 10px; font-size: 12px; padding: 2px 8px; box-shadow: 0 1px 2px rgba(var(--uk-shc), .2); }
.new-thumb { display: grid; place-items: center; color: var(--uk-brand); }
.doc-card.is-new:hover .new-thumb { background: var(--uk-pick-light); }
.doc-row-new { display: flex; align-items: center; gap: 12px; width: 100%; padding: 4px 0; border: 0; background: none; color: var(--uk-brand); font: inherit; cursor: pointer; text-align: left; }
label.list-icon-btn { cursor: pointer; }
.card-link.is-trashed { opacity: .75; }
.thumb { position: relative; aspect-ratio: 794 / 1000; overflow: hidden; background: var(--uk-paper); border-bottom: 1px solid var(--uk-line); }
.thumb-page { position: absolute; left: 0; top: 0; width: 794px; padding: 94px; transform-origin: 0 0; pointer-events: none; color: var(--uk-fg); }
.thumb-img { display: block; width: 100%; }
.card-foot { padding: 12px 44px 12px 14px; }
.card-title { display: block; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-meta { display: flex; align-items: center; gap: 6px; margin-top: 6px; font-size: 13px; min-width: 0; }
.card-meta svg { flex: none; }
.card-when { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-card > .tool-pop { position: absolute; right: 4px; bottom: 8px; }
.doc-row .tool-pop { flex: none; }
.doc-list { list-style: none; margin: 0; padding: 0; background: var(--uk-surface); border-radius: var(--uk-r-md); }
.doc-list li + li { border-top: 1px solid var(--uk-line); }
.doc-row { display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; }
.doc-row-text { flex: 1; min-width: 0; display: flex; flex-direction: column; color: inherit; }
.doc-row-text span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.doc-row-when { font-size: 13px; flex: none; }
.empty { text-align: center; padding: 48px 16px; background: var(--uk-surface); border-radius: var(--uk-r-md); }
/* 형식 뱃지 (불러온 원본) */
.fmt-badge { display: inline-block; flex: none; padding: 1px 6px; border-radius: var(--uk-r-xs); font-size: 11px; font-weight: 700; line-height: 16px; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--uk-on-strong); background: var(--uk-muted); }
.fmt-badge.is-hwp, .fmt-badge.is-hwpx { background: var(--uk-brand); }
.fmt-badge.is-docx, .fmt-badge.is-doc { background: var(--uk-brand-dark); }
.fmt-badge.is-pdf { background: var(--uk-danger); }
.fmt-badge.is-pptx, .fmt-badge.is-ppt { background: var(--uk-warn); }
/* 파일 끌어다 놓기 */
.list-shell.is-dragging { outline: 3px dashed var(--uk-brand); outline-offset: -8px; }
.drop-hint { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); padding: 12px 20px; border-radius: var(--uk-r-sm); background: var(--uk-brand); color: var(--uk-on-strong); font-weight: 600; pointer-events: none; z-index: 50; }
@media (max-width: 600px) {
  .list-top { padding: 8px 12px; gap: 10px; }
  .list-main { padding-left: 12px; padding-right: 12px; }
  .doc-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .doc-row-when { display: none; }
}
.list-actions { display: flex; gap: 8px; }
.doc-row > svg { flex: none; }