:root {
  --bg: #f6f5f2;
  --surface: #fffdf9;
  --surface2: #f7f4ec;
  --border: #e4e0d8;
  --border2: #ddd6c8;
  --text: #222;
  --text2: #555;
  --muted: #999;
  --sel-bg: #efe9dd;
  --sel-border: #d8cfbf;
  --accent: #2f6fdb;
  --danger: #a03030;
  --card: #ffffff;
  --card-empty: #faf8f3;
}
body.dark {
  --bg: #131316;
  --surface: #1d1e23;
  --surface2: #26272d;
  --border: #33343b;
  --border2: #3e3f47;
  --text: #e8e6e1;
  --text2: #b3b0aa;
  --muted: #7d7b76;
  --sel-bg: #33343c;
  --sel-border: #4b4c56;
  --accent: #5b8fe8;
  --danger: #e07a7a;
  --card: #232429;
  --card-empty: #1d1e23;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; overscroll-behavior: none; }
body {
  font-family: -apple-system, "Segoe UI", "Pretendard", "Noto Sans KR", sans-serif;
  background: var(--bg); color: var(--text);
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
#app { display: flex; flex-direction: column; height: 100dvh; }

/* ── 툴바 ─────────────────────────────── */
#toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: nowrap;
  padding: 6px 10px; padding-top: calc(6px + env(safe-area-inset-top));
  background: var(--surface); border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none; flex: none;
}
#toolbar::-webkit-scrollbar { display: none; }
.tb-group { display: flex; align-items: center; gap: 4px; flex: none; }
.tb-group:not(:last-child)::after {
  content: ""; width: 1px; height: 22px; background: var(--border); margin-left: 8px;
}
.tb-right { margin-left: auto; }
.tb-right::after { display: none; }

.tb-btn {
  min-width: 40px; height: 40px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; font-size: 17px; cursor: pointer; color: var(--text);
  display: inline-flex; align-items: center; justify-content: center; position: relative;
}
.tb-btn:active { background: var(--sel-bg); }
.tb-btn.selected { background: var(--sel-bg); border-color: var(--sel-border); }
.tb-btn:disabled { opacity: 0.3; }
.tb-text-btn { font-family: Georgia, serif; font-weight: 700; font-size: 19px; }
.tb-eraser svg { display: block; }
#eraser-badge, #photo-edit-badge {
  position: absolute; bottom: 1px; right: 2px; font-size: 9px; line-height: 1;
  padding: 1.5px 3px; border-radius: 4px; background: var(--sel-bg);
  border: 1px solid var(--sel-border); color: var(--text2);
}

.tb-size {
  width: 34px; height: 34px; border-radius: 8px; border: 1px solid transparent;
  background: transparent; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
.tb-size span { display: block; border-radius: 50%; background: var(--text2); }
.tb-size.selected { background: var(--sel-bg); border-color: var(--sel-border); }

/* ── 왼쪽 세로 레일 (색상 · 펜 프리셋 · 빠른 지우개) — 화면 컨셉1 ── */
#brush-rail {
  position: absolute; left: 8px; top: 8px; bottom: 8px; width: 68px;
  display: flex; flex-direction: column; align-items: stretch;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: 0 3px 14px rgba(0,0,0,0.14); z-index: 12; padding: 8px 0;
}
#rail-scroll {
  flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin;
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 6px;
}
#rail-scroll::-webkit-scrollbar { width: 5px; }
#rail-scroll::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }
#rail-colors, #rail-presets { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; }
.rail-div { width: 62%; height: 1px; background: var(--border); flex: none; }

.rail-color {
  width: 30px; height: 30px; border-radius: 50%; border: 2.5px solid transparent;
  background: var(--c); cursor: pointer; flex: none;
}
.rail-color.selected { border-color: var(--surface); outline: 2px solid var(--c); }
.rail-color-add {
  width: 30px; height: 30px; border-radius: 50%; border: 1.5px dashed var(--border2);
  background: transparent; color: var(--muted); font-size: 15px; cursor: pointer; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.rail-preset {
  width: 54px; padding: 4px 0 3px; border-radius: 10px; border: 1px solid var(--border2);
  background: var(--surface2); cursor: pointer; flex: none;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
}
.rail-preset .dot { width: 20px; height: 20px; border-radius: 50%; flex: none; }
.rail-preset .nm {
  font-size: 9.5px; line-height: 1.05; color: var(--text2); max-width: 50px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rail-preset.active { background: var(--sel-bg); border-color: var(--accent); }
.rail-preset.add { color: var(--muted); border-style: dashed; font-size: 15px; padding: 6px 0; }

#title-input {
  width: clamp(120px, 22vw, 220px); min-width: 96px; border: none; background: transparent;
  font-size: 15px; font-weight: 600;
  color: var(--text); padding: 6px 4px; border-radius: 6px; user-select: text; -webkit-user-select: text;
}
#title-input:focus { outline: none; background: var(--sel-bg); }

.tb-chip {
  height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--border2);
  background: var(--surface2); font-size: 12px; cursor: pointer; white-space: nowrap; color: var(--text2);
}
.tb-chip.ok { background: #e3f2e7; border-color: #b9dcc3; color: #256b3a; }
.tb-chip.dirty { background: #fdf3dc; border-color: #ecd9a8; color: #8a6d1d; }
.tb-chip.err { background: #fbe4e4; border-color: #eec1c1; color: #a03030; }
body.dark .tb-chip.ok { background: #1e3226; border-color: #2e5c3e; color: #7fd49a; }
body.dark .tb-chip.dirty { background: #3a3322; border-color: #6b5c26; color: #e6c86a; }
body.dark .tb-chip.err { background: #3a2222; border-color: #6b3030; color: #e08585; }

/* ── 캔버스 ───────────────────────────── */
#stage { flex: 1; position: relative; overflow: hidden; }
#canvas { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }

/* ── 줌·스냅 컨트롤 (상단 — 왼쪽 레일 오른쪽, 화면 컨셉1) ── */
#zoom-ctrl {
  position: absolute; left: 84px; top: 8px; max-width: calc(100% - 96px);
  display: flex; gap: 2px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 3px; box-shadow: 0 3px 14px rgba(0,0,0,0.14); z-index: 11;
  overflow-x: auto; scrollbar-width: none;
}
#zoom-ctrl::-webkit-scrollbar { display: none; }
#zoom-ctrl button {
  min-width: 36px; height: 36px; border: none; border-radius: 9px; background: transparent;
  font-size: 15px; cursor: pointer; color: var(--text); padding: 0 6px;
}
#zoom-ctrl button:active { background: var(--sel-bg); }
#zoom-ctrl #zoom-label { font-size: 12.5px; font-weight: 600; color: var(--text2); min-width: 48px; }
#zoom-ctrl button.locked { background: var(--sel-bg); box-shadow: inset 0 0 0 1px var(--sel-border); }

/* ── 텍스트 편집기 ─────────────────────── */
#text-editor { position: absolute; z-index: 20; }
#text-editor textarea {
  border: 1.5px dashed var(--accent); border-radius: 4px; background: transparent;
  outline: none; resize: none; overflow: hidden; padding: 2px 4px;
  font-family: -apple-system, "Segoe UI", "Noto Sans KR", sans-serif; line-height: 1.4;
  min-width: 40px; white-space: pre; user-select: text; -webkit-user-select: text;
}
#text-opts {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(64px + env(safe-area-inset-bottom));
  display: flex; gap: 6px; align-items: center; z-index: 21;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 6px 8px; box-shadow: 0 4px 18px rgba(0,0,0,0.18);
}
/* ID 셀렉터가 .hidden(display:none)보다 우선순위가 높아 숨김이 무시되던 버그 수정 */
#text-opts.hidden, #text-editor.hidden, #zoom-ctrl.hidden, #popover.hidden { display: none !important; }

/* 슬라이더 실측 미리보기 (화면 중앙) */
#size-preview {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  z-index: 30; pointer-events: none; border-radius: 50%;
  transition: opacity 0.15s; opacity: 0;
}
#size-preview.show { opacity: 1; }
#text-opts select, #text-opts button {
  height: 34px; border-radius: 8px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text); font-size: 13px; padding: 0 10px; cursor: pointer;
}
#text-opts .primary { background: var(--accent); border-color: var(--accent); color: #fff; }
#text-opts .danger { color: var(--danger); }

/* ── 오버레이 ─────────────────────────── */
.overlay {
  position: fixed; inset: 0; background: rgba(20, 18, 14, 0.5);
  display: flex; align-items: center; justify-content: center; z-index: 50; padding: 16px;
}
/* 숨김은 항상 이긴다 — ID/클래스 display 규칙과의 우선순위 전쟁 방지 */
.overlay.hidden, .hidden { display: none !important; }
.overlay-panel {
  background: var(--surface); border-radius: 16px; padding: 18px;
  width: min(860px, 100%); max-height: 86dvh; overflow-y: auto;
  box-shadow: 0 12px 40px rgba(0,0,0,0.3);
}
.overlay-panel.narrow { width: min(480px, 100%); }
.overlay-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; gap: 8px; flex-wrap: wrap; }
.overlay-head h2 { font-size: 18px; }
.overlay-panel h3 { font-size: 15px; margin: 16px 0 8px; color: var(--text2); }
.ov-help { font-size: 12.5px; color: var(--muted); margin: -6px 0 12px; }

.ov-btn {
  height: 38px; padding: 0 14px; border-radius: 9px; border: 1px solid var(--border2);
  background: var(--surface2); font-size: 14px; cursor: pointer; color: var(--text);
}
.ov-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.ov-btn.danger { color: var(--danger); }

.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.card {
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--card);
  cursor: pointer; display: flex; flex-direction: column;
}
.card.current { outline: 2px solid var(--accent); }
.card.picked { outline: 2.5px solid #3a9e5f; }
.diff-dot { display: inline-block; width: 11px; height: 11px; border-radius: 3px; margin-right: 4px; vertical-align: -1px; }
#compare-bar.hidden { display: none !important; }
.card img { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; display: block; }
.card .card-thumb-empty {
  width: 100%; aspect-ratio: 4/3; background: var(--card-empty);
  display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 24px;
}
.card .card-meta { padding: 8px 10px; border-top: 1px solid var(--border); }
.card .card-title { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card .card-date { font-size: 11px; color: var(--muted); margin-top: 2px; }
.card .card-actions { display: flex; gap: 6px; padding: 0 8px 8px; }
.card .card-actions button {
  flex: 1; height: 30px; font-size: 12px; border-radius: 7px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); cursor: pointer;
}
.card .card-actions button.danger { color: var(--danger); }

/* ── 폴더 (R18-02) ─────────────────────── */
.breadcrumb {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  font-size: 13.5px; color: var(--text2); margin: 4px 0 12px;
}
.breadcrumb .crumb {
  border: none; background: transparent; color: var(--accent); cursor: pointer;
  font-size: 13.5px; padding: 2px 4px; border-radius: 6px;
}
.breadcrumb .crumb:hover { background: var(--sel-bg); }
.breadcrumb .crumb.here { color: var(--text); font-weight: 600; cursor: default; }
.breadcrumb .sep { color: var(--muted); padding: 0 1px; }
.card.folder-card .folder-thumb {
  width: 100%; aspect-ratio: 4/3; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.card.folder-card .folder-thumb .folder-emoji {
  font-size: 30px; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}

/* ── 설정 ─────────────────────────────── */
.set-row { display: flex; align-items: center; gap: 10px; margin: 12px 0; font-size: 14px; flex-wrap: wrap; }
.set-row input[type="password"], .set-row input[type="text"] {
  flex: 1; min-width: 180px; height: 38px; border: 1px solid var(--border2); border-radius: 8px;
  padding: 0 10px; font-size: 14px; background: var(--surface2); color: var(--text);
  user-select: text; -webkit-user-select: text;
}
.set-row.chk { cursor: pointer; }
.set-help { font-size: 12.5px; color: var(--muted); line-height: 1.7; margin-top: 16px; border-top: 1px solid var(--border); padding-top: 12px; }
#token-status { font-size: 13px; }
#token-status.ok { color: #256b3a; }
#token-status.err { color: var(--danger); }
body.dark #token-status.ok { color: #7fd49a; }

/* ── 팝오버 ───────────────────────────── */
#popover {
  position: fixed; z-index: 60; min-width: 200px; max-width: 300px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px; box-shadow: 0 6px 24px rgba(0,0,0,0.22);
}
#popover .po-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-size: 13.5px; flex-wrap: wrap; }
#popover .po-row:first-child { margin-top: 0; }
#popover .po-title { font-size: 13px; font-weight: 700; color: var(--text2); margin-bottom: 6px; }
#popover .po-seg { display: flex; border: 1px solid var(--border2); border-radius: 8px; overflow: hidden; }
#popover .po-seg button {
  height: 32px; padding: 0 14px; border: none; background: var(--surface2);
  color: var(--text2); font-size: 13px; cursor: pointer;
}
#popover .po-seg button.on { background: var(--accent); color: #fff; }
#popover input[type="range"] { flex: 1; accent-color: var(--accent); min-width: 120px; }
#popover input[type="text"] {
  flex: 1; height: 34px; border: 1px solid var(--border2); border-radius: 8px;
  padding: 0 8px; font-size: 13.5px; background: var(--surface2); color: var(--text);
  user-select: text; -webkit-user-select: text; min-width: 100px;
}
#popover .po-val { display: inline-block; width: 42px; text-align: right; color: var(--text2); font-variant-numeric: tabular-nums; }
#popover .po-btn {
  height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--text); font-size: 13px; cursor: pointer;
}
#popover .po-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
#popover .po-btn.danger { color: var(--danger); }
.diag-box {
  font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px;
  background: var(--surface2); border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; min-height: 66px; white-space: pre-line; color: var(--text2); line-height: 1.6;
}
#diag-float {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%);
  z-index: 26; max-width: min(420px, 92%); background: var(--surface);
  box-shadow: 0 4px 16px rgba(0,0,0,0.2); cursor: pointer;
}
#diag-float.hidden { display: none !important; }

/* 빠른 펜↔지우개 토글 (레일 하단 고정) */
#quick-eraser {
  flex: none; margin: 8px 6px 0; height: 40px; border-radius: 10px;
  background: var(--surface2); border: 1px solid var(--border2); color: var(--text);
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
}
#quick-eraser.selected { background: var(--sel-bg); border-color: var(--accent); color: var(--accent); }

/* ── 이전 리비전 프리뷰 ── */
#preview-badge {
  position: absolute; left: 8px; top: 8px; z-index: 25;
  background: #d32f2f; color: #fff; font-size: 12.5px; font-weight: 800; letter-spacing: 0.4px;
  padding: 7px 11px; border-radius: 8px; box-shadow: 0 2px 12px rgba(211,47,47,0.45);
}
#preview-badge.hidden { display: none !important; }
#preview-bar {
  position: absolute; left: 50%; transform: translateX(-50%);
  bottom: calc(16px + env(safe-area-inset-bottom)); z-index: 25;
  display: flex; gap: 8px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.22); max-width: 92vw;
}
#preview-bar.hidden { display: none !important; }
#preview-label { font-size: 13px; color: var(--text2); font-weight: 600; }
/* 프리뷰 중엔 편집 툴바 비활성(보기 전용 명확화) — 줌·프리뷰 바는 유지 */
body.previewing #toolbar { opacity: 0.45; pointer-events: none; }

/* ── 화면 캡처 오버레이 ── */
#capture-overlay {
  position: fixed; inset: 0; z-index: 80; background: rgba(10,10,12,0.82);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; padding: 16px;
}
#capture-overlay.hidden { display: none !important; }
#capture-stage { position: relative; line-height: 0; box-shadow: 0 8px 40px rgba(0,0,0,0.5); }
#capture-canvas { display: block; max-width: 92vw; max-height: 78vh; cursor: crosshair; touch-action: none; }
#capture-sel {
  position: absolute; border: 1.5px solid #fff; background: rgba(90,150,240,0.14);
  box-shadow: 0 0 0 9999px rgba(10,10,12,0.5); pointer-events: none;
}
#capture-sel.hidden { display: none !important; }
#capture-bar {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap; justify-content: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 8px 12px; box-shadow: 0 4px 18px rgba(0,0,0,0.3); max-width: 92vw;
}
#capture-hint { font-size: 13px; color: var(--text2); }
.po-color-input {
  width: 46px; height: 34px; border: 1px solid var(--border2); border-radius: 8px;
  padding: 2px; background: var(--surface2); cursor: pointer;
}
.swatch-grid { display: grid; grid-template-columns: repeat(6, 30px); gap: 7px; margin: 4px 0 8px; }
.swatch {
  width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
  border: 1.5px solid rgba(0,0,0,0.12);
}
body.dark .swatch { border-color: rgba(255,255,255,0.18); }

/* 설정 select */
.set-row select {
  height: 36px; border: 1px solid var(--border2); border-radius: 8px;
  background: var(--surface2); color: var(--text); font-size: 13.5px; padding: 0 8px;
}

/* ── 토스트 ───────────────────────────── */
#toast {
  position: fixed; bottom: calc(20px + env(safe-area-inset-bottom)); left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(30, 28, 24, 0.92); color: #fff; font-size: 13.5px;
  padding: 10px 18px; border-radius: 20px; opacity: 0; pointer-events: none;
  transition: opacity 0.2s, transform 0.2s; z-index: 100; max-width: 90vw; text-align: center;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── 홈 화면 (삼성 노트식) ───────────────── */
#home {
  position: fixed; inset: 0; z-index: 40; display: flex;
  background: var(--bg); color: var(--text);
}
#home.hidden { display: none; }

#home-sidebar {
  width: 244px; flex: none; display: flex; flex-direction: column;
  background: var(--surface); border-right: 1px solid var(--border);
}
#home-side-head {
  display: flex; align-items: center; gap: 9px;
  padding: 16px 16px 12px; font-size: 17px; font-weight: 700; line-height: 1.2;
  border-bottom: 1px solid var(--border); flex: none;
}
.home-logo-ic { font-size: 18px; flex: none; }
.home-logo-tx { letter-spacing: -0.2px; }
#home-tree { flex: 1; overflow-y: auto; padding: 8px 6px 16px; }
#home-tree::-webkit-scrollbar { width: 7px; }
#home-tree::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; }

.tree-all, .tree-node {
  display: flex; align-items: center; gap: 8px; width: 100%;
  border-radius: 9px; cursor: pointer; color: var(--text); font-size: 14px; line-height: 1.3;
}
.tree-all { border: none; background: transparent; padding: 10px 10px; margin-bottom: 3px; text-align: left; }
.tree-node { padding: 8px 8px; margin-bottom: 1px; }
.tree-all:hover, .tree-node:hover { background: var(--sel-bg); }
.tree-all.active, .tree-node.active { background: var(--sel-bg); font-weight: 600; }
.tree-all-ic { font-size: 15px; flex: none; }
.tree-all-nm, .tree-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tree-label { border: none; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; padding: 0; }
.tree-caret {
  width: 16px; flex: none; border: none; background: transparent; color: var(--muted);
  font-size: 10px; cursor: pointer; padding: 0; line-height: 1;
}
.tree-caret.empty { cursor: default; }
.tree-dot { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.tree-count { font-size: 12px; color: var(--muted); flex: none; min-width: 18px; text-align: right; }

/* 휴지통 (사이드바 최하단) */
.tree-trash {
  display: flex; align-items: center; gap: 8px; width: auto; flex: none;
  margin: 0 8px 10px; padding: 10px 10px; border: none; border-top: 1px solid var(--border);
  border-radius: 0 0 9px 9px; background: transparent; color: var(--text2);
  font-size: 14px; cursor: pointer; text-align: left;
}
.tree-trash:hover { background: var(--sel-bg); }
.tree-trash.active { background: var(--sel-bg); color: var(--text); font-weight: 600; }
.tree-trash .trash-ic { font-size: 15px; flex: none; }
.tree-trash .trash-nm { flex: 1; }

/* 상단 텍스트 버튼 (＋ 폴더) — 이모지 2개 겹침 대체 */
.home-text-btn {
  flex: none; height: 38px; padding: 0 13px; border: 1px solid var(--border2); border-radius: 10px;
  background: var(--surface2); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.home-text-btn:hover { background: var(--sel-bg); }

#home-main { flex: 1; display: flex; flex-direction: column; min-width: 0; }
#home-topbar {
  display: flex; align-items: center; gap: 8px; padding: 10px 16px;
  border-bottom: 1px solid var(--border); flex: none;
}
.home-icon-btn {
  width: 38px; height: 38px; flex: none; border: 1px solid transparent; border-radius: 10px;
  background: transparent; color: var(--text); font-size: 17px; cursor: pointer;
}
.home-icon-btn:hover { background: var(--sel-bg); }
#home-menu { display: none; }
#home-search-wrap {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 7px; max-width: 460px;
  height: 38px; padding: 0 12px; border-radius: 12px;
  background: var(--surface2); border: 1px solid var(--border2);
}
.home-search-ic { font-size: 13px; opacity: 0.7; }
#home-search {
  flex: 1; border: none; background: transparent; color: var(--text);
  font-size: 14px; outline: none; min-width: 0;
}
#home-body { flex: 1; overflow-y: auto; padding: 18px 22px 90px; }
#home-titlebar { display: flex; align-items: center; gap: 8px; margin: 4px 2px 6px; }
#home-title { font-size: 22px; font-weight: 700; margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#home-back { flex: none; width: 32px; height: 32px; font-size: 18px; }
#home-back.hidden { display: none; }

/* 경로 브레드크럼 (제목 아래) */
#home-crumbs {
  display: flex; align-items: center; gap: 2px; margin: 0 2px 16px;
  overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; font-size: 13px;
}
#home-crumbs::-webkit-scrollbar { display: none; }
#home-crumbs.hidden { display: none; }
.crumb {
  flex: none; border: none; background: transparent; color: var(--muted);
  cursor: pointer; padding: 3px 6px; border-radius: 7px; font-size: 13px;
  max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb:hover { background: var(--surface2); color: var(--text); }
.crumb.crumb-current { color: var(--text); font-weight: 700; cursor: default; }
.crumb.crumb-current:hover { background: transparent; }
.crumb-sep { flex: none; color: var(--muted); opacity: 0.6; padding: 0 1px; }
.crumb-ellipsis { flex: none; color: var(--muted); padding: 3px 4px; }
.folder-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 12px; margin-bottom: 22px;
}
.folder-row.hidden { display: none; }

/* 카드 배지 (☁ 서버 전용 / ⬆ 미동기화) */
.card { position: relative; }
.card-badge {
  position: absolute; top: 7px; right: 7px; z-index: 2;
  min-width: 22px; height: 22px; padding: 0 5px; border-radius: 11px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; background: rgba(20,18,14,0.62); color: #fff;
  backdrop-filter: blur(2px); pointer-events: none;
}
.home-empty { color: var(--muted); font-size: 14px; grid-column: 1 / -1; padding: 24px 4px; }

/* ── 선택 삭제 모드 (R20-05) ── */
#home-selbar {
  display: flex; align-items: center; gap: 10px; padding: 9px 16px; flex: none;
  border-bottom: 1px solid var(--border); background: var(--surface2);
}
#home-selbar.hidden { display: none !important; }
#home-selcount { font-size: 14px; font-weight: 600; }
.home-selbar-sp { flex: 1; }
.sketch-card { cursor: pointer; -webkit-user-select: none; user-select: none; touch-action: none; }
.card-check {
  position: absolute; top: 7px; left: 7px; z-index: 3;
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid #fff; background: rgba(20,18,14,0.42); box-shadow: 0 1px 3px rgba(0,0,0,0.4);
  display: none; align-items: center; justify-content: center; color: #fff; font-size: 14px;
}
#home.select-mode .sketch-card .card-check { display: flex; }
.sketch-card.selected-card { outline: 2.5px solid var(--accent); outline-offset: -1px; }
.sketch-card.selected-card .card-check { background: var(--accent); border-color: #fff; }
/* R21-03 리프트 피드백: 드래그 무장(롱프레스 성립·마우스 드래그 시작) 순간 원본이 "들림" */
.sketch-card.dragging-src {
  opacity: 0.9; z-index: 5;
  transform: scale(1.05) translateY(-3px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.34);
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease;
}

/* 드롭 대상 하이라이트 (폴더 카드·트리 항목·모든 스케치) */
.drop-hover { outline: 2.5px dashed var(--accent) !important; outline-offset: -2px; background: var(--sel-bg) !important; }

/* 드래그 고스트 (반투명 카드 복제) */
#drag-ghost {
  position: fixed; z-index: 200; pointer-events: none; opacity: 0.78;
  width: 150px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border);
  background: var(--card); box-shadow: 0 8px 24px rgba(0,0,0,0.35); transform: translate(-50%, -50%);
}
#drag-ghost img, #drag-ghost .card-thumb-empty { width: 100%; aspect-ratio: 4/3; object-fit: contain; background: #fff; display: block; }
#drag-ghost .g-title { font-size: 12px; font-weight: 600; padding: 6px 8px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 휴지통 카드: 남은 일수 표시 */
.card .card-days { font-size: 11px; color: var(--danger); margin-top: 2px; font-weight: 600; }

/* 우하단 새 스케치 FAB */
#home-fab {
  position: fixed; right: calc(22px + env(safe-area-inset-right));
  bottom: calc(24px + env(safe-area-inset-bottom)); z-index: 42;
  width: 58px; height: 58px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--accent); color: #fff; font-size: 24px;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
}
#home-fab:active { transform: scale(0.94); }

#home-scrim {
  position: absolute; inset: 0; z-index: 1; background: rgba(10,10,12,0.4);
  display: none;
}

/* 좁은 폭(태블릿 세로·800px 미만): 사이드바 접힘(햄버거 토글) */
@media (max-width: 800px) {
  #home-menu { display: flex; align-items: center; justify-content: center; }
  #home-sidebar {
    position: absolute; left: 0; top: 0; bottom: 0; z-index: 3;
    transform: translateX(-100%); transition: transform 0.22s ease;
    box-shadow: 4px 0 20px rgba(0,0,0,0.22);
  }
  #home.side-open #home-sidebar { transform: translateX(0); }
  #home.side-open #home-scrim { display: block; }
  #home-body { padding: 16px 14px 90px; }
  #home-title { font-size: 20px; }
}