/* =========================================================
   가지 (Gaji) — 라이트 기본 + 버건디 농축 / 다크 토글
   도야 버건디 토큰: accent #6E1423 / rose #E6A9B0 / brass #a8895c / data #4d7388
   ========================================================= */

:root {
  --gaji-accent: #6E1423;
  --gaji-accent-hover: #8a2030;
  --gaji-rose: #E6A9B0;
  --gaji-brass: #a8895c;
  --gaji-data: #4d7388;

  --bg: #F4F1EA;          /* 따뜻한 돌-크림 캔버스 */
  --bg-panel: #FFFFFF;
  --ink: #2A2620;
  --ink-soft: #6B6357;
  --ink-faint: #9A9182;
  --line: #DAD3C6;
  --line-soft: #ECE8DF;
  --topbar-h: 48px;
}

html[data-theme='dark'] {
  --bg: #0B0B0D;
  --bg-panel: #15151A;
  --ink: #E8E3DA;
  --ink-soft: #b7b0a4;
  --ink-faint: #79736a;
  --line: #33323a;
  --line-soft: #222127;
  --gaji-data: #8fb6c9;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; } /* display:flex 등이 hidden을 이기지 않게 */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: 'Pretendard', system-ui, -apple-system, 'Segoe UI', sans-serif;
  background: var(--bg);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

/* ---------- 상단바 ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  height: var(--topbar-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 14px;
  background: color-mix(in srgb, var(--bg-panel) 88%, transparent);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: baseline; gap: 6px; user-select: none; }
.brand-mark {
  font-weight: 800; font-size: 17px; letter-spacing: 1px;
  color: #fff; background: var(--gaji-accent);
  padding: 2px 9px; border-radius: 7px;
}
.brand-sub { font-size: 11px; color: var(--ink-faint); letter-spacing: 2px; font-weight: 600; }

.map-title-wrap { flex: 1; min-width: 0; position: relative; }
.map-title {
  max-width: 100%;
  font-size: 13.5px; font-weight: 600; color: var(--ink-soft);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: none; border: 0; cursor: pointer; padding: 4px 6px; border-radius: 7px;
}
.map-title:hover { background: var(--line-soft); color: var(--ink); }
.map-title .caret { color: var(--ink-faint); font-size: 10px; }

.map-menu {
  position: absolute; top: 36px; left: 0; z-index: 60;
  width: 280px; max-height: 60vh; overflow: auto;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.22); padding: 6px;
}
.map-menu-item {
  display: block; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; background: none; border-radius: 8px;
  font-size: 13px; color: var(--ink); cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.map-menu-item:hover { background: var(--line-soft); }
.map-menu-item.current { color: var(--gaji-accent); font-weight: 700; }
.map-menu-new {
  width: 100%; margin-top: 4px; padding: 9px 10px;
  border: 1px dashed var(--line); background: none; border-radius: 8px;
  font-size: 13px; color: var(--gaji-accent); font-weight: 600; cursor: pointer;
}
.map-menu-new:hover { border-color: var(--gaji-accent); background: var(--gaji-accent); color: #fff; }

.mode-select {
  font-size: 12px; color: var(--ink-soft);
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 8px;
  padding: 4px 6px; cursor: pointer; font-family: inherit;
}

/* ---------- 버튼 ---------- */
.btn-primary {
  background: var(--gaji-accent); color: #fff; border: 0;
  font-size: 13px; font-weight: 700; padding: 7px 14px; border-radius: 9px; cursor: pointer;
}
.btn-primary:hover { background: var(--gaji-accent-hover); }
.btn-ghost {
  background: none; color: var(--ink-soft); border: 1px solid var(--line);
  font-size: 13px; padding: 7px 12px; border-radius: 9px; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--gaji-accent); color: var(--gaji-accent); }

/* ---------- AI 고스트 프리뷰 패널 ---------- */
.ai-panel {
  position: fixed; right: 18px; bottom: 18px; z-index: 45;
  width: min(380px, 92vw);
  background: var(--bg-panel); border: 1px solid var(--gaji-rose); border-radius: 14px;
  box-shadow: 0 20px 60px rgba(110,20,35,0.22);
  overflow: hidden;
}
.ai-head {
  display: flex; align-items: baseline; gap: 8px;
  padding: 12px 14px 8px;
}
.ai-target { font-size: 12px; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ai-body { max-height: 46vh; overflow: auto; padding: 4px 10px; }
.ai-item {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 8px 8px; border-radius: 8px; cursor: pointer;
}
.ai-item:hover { background: var(--line-soft); }
.ai-item input { margin-top: 3px; accent-color: var(--gaji-accent); }
.ai-item .ai-text { font-size: 13.5px; color: var(--ink); font-weight: 600; }
.ai-item .ai-note { font-size: 11.5px; color: var(--ink-faint); margin-top: 1px; line-height: 1.5; }
.ai-item.dim { opacity: 0.5; }
.ai-skel { height: 14px; margin: 12px 8px; border-radius: 6px; background: var(--line-soft); animation: pulse 1.1s infinite; }
.ai-foot {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-top: 1px solid var(--line-soft); gap: 10px;
}
.ai-hint { font-size: 11px; color: var(--ink-faint); }
.ai-actions { display: flex; gap: 8px; }

.topbar-right { display: flex; align-items: center; gap: 6px; }

.status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11.5px; color: var(--ink-faint);
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: 999px;
  user-select: none;
}
.status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gaji-data); transition: background .2s; }
.status[data-state='saving'] .dot { background: var(--gaji-brass); animation: pulse 1s infinite; }
.status[data-state='saved']  .dot { background: #2bd16f; }
.status[data-state='error']  .dot { background: #d14d4d; }
@keyframes pulse { 0%,100%{opacity:1} 50%{opacity:.3} }

.icon-btn {
  width: 30px; height: 30px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--bg-panel);
  color: var(--ink-soft); font-size: 15px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: border-color .15s, color .15s;
}
.icon-btn:hover { border-color: var(--gaji-accent); color: var(--gaji-accent); }

/* ---------- 캔버스 ---------- */
#map {
  position: fixed; inset: var(--topbar-h) 0 0 0;
  background-color: var(--bg);
  /* 황동 도트 그리드 (면 채움 아님 — 1px 점) */
  background-image: radial-gradient(circle, rgba(168,137,92,0.10) 1px, transparent 1.4px);
  background-size: 26px 26px;
}
/* mind-elixir 내부 캔버스는 투명 처리해 도트 그리드가 비치게 */
#map .map-container, #map .map-canvas { background: transparent !important; }

/* ---------- 빈 상태 힌트 ---------- */
.hint {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 20; pointer-events: none;
  font-size: 13px; color: var(--ink-faint);
  background: color-mix(in srgb, var(--bg-panel) 90%, transparent);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px;
  transition: opacity .4s ease, transform .4s ease;
}
.hint.gone { opacity: 0; transform: translate(-50%, 8px); }

/* ---------- 토스트 ---------- */
.toast {
  position: fixed; left: 50%; bottom: 70px; transform: translateX(-50%);
  z-index: 40;
  background: var(--gaji-accent); color: #fff;
  font-size: 13px; font-weight: 600;
  padding: 9px 16px; border-radius: 10px;
  box-shadow: 0 8px 24px rgba(110,20,35,0.28);
  animation: toastin .2s ease;
}
@keyframes toastin { from{opacity:0; transform:translate(-50%,8px)} to{opacity:1; transform:translate(-50%,0)} }

/* ---------- kbd ---------- */
kbd {
  font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace;
  font-size: 11px; color: var(--ink);
  background: var(--bg-panel); border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 5px;
  padding: 1px 6px; min-width: 16px; display: inline-block; text-align: center;
}

/* ---------- 단축키 치트시트 ---------- */
.cheats {
  position: fixed; inset: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--bg) 60%, rgba(0,0,0,0.45));
  backdrop-filter: blur(3px);
}
.cheats-card {
  width: min(560px, 92vw); background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px 18px;
  box-shadow: 0 24px 70px rgba(0,0,0,0.25);
}
.cheats-head { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.cheats-head h2 { font-size: 18px; margin: 0; flex: 1; }
.eyebrow {
  font-size: 10px; letter-spacing: 3px; font-weight: 700;
  color: var(--gaji-brass);
}
.cheats-grid {
  display: grid; grid-template-columns: 150px 1fr; gap: 10px 14px;
  font-size: 13px; color: var(--ink-soft); align-items: center;
}
.cheats-grid .hot { color: var(--gaji-accent); font-weight: 700; }
.cheats-foot {
  margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 11px; color: var(--ink-faint);
  font-family: ui-monospace, monospace;
}

/* 황동 1px 코너 프레임 (도야 .framed) */
.framed { position: relative; }
.framed::before, .framed::after {
  content: ''; position: absolute; width: 14px; height: 14px;
  border: 1px solid var(--gaji-brass); pointer-events: none;
}
.framed::before { top: 8px; left: 8px; border-right: 0; border-bottom: 0; }
.framed::after  { bottom: 8px; right: 8px; border-left: 0; border-top: 0; }

.mono { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-variant-numeric: tabular-nums; }

/* ---------- 포커스 배지 ---------- */
.focus-badge {
  position: fixed; top: 58px; left: 50%; transform: translateX(-50%); z-index: 25;
  background: var(--gaji-accent); color: #fff; font-size: 12px; font-weight: 600;
  padding: 6px 14px; border-radius: 999px; box-shadow: 0 6px 18px rgba(110,20,35,0.3);
}

/* ---------- 우클릭 컨텍스트 메뉴 ---------- */
.ctx-menu {
  position: fixed; z-index: 70; min-width: 210px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.24); padding: 6px;
}
.ctx-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; text-align: left; border: 0; background: none; cursor: pointer;
  padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--ink);
}
.ctx-item:hover { background: var(--line-soft); }
.ctx-item span { font-size: 11px; color: var(--ink-faint); font-family: ui-monospace, monospace; }
.ctx-item.ctx-danger { color: #c0392b; }
.ctx-div { height: 1px; background: var(--line-soft); margin: 4px 6px; }
.ctx-row.ctx-colors { display: flex; gap: 6px; padding: 6px 8px 8px; flex-wrap: wrap; }
.sw { width: 20px; height: 20px; border-radius: 6px; border: 1px solid var(--line); cursor: pointer; }
.sw:hover { transform: scale(1.12); }
.sw-x { background: var(--bg-panel); color: var(--ink-faint); font-size: 11px; }

/* ---------- 이모지 피커 ---------- */
.emoji-pop {
  position: fixed; z-index: 70; width: 224px;
  display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 8px;
  background: var(--bg-panel); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: 0 16px 44px rgba(0,0,0,0.24);
}
.emoji-pop .emo { border: 0; background: none; cursor: pointer; font-size: 18px; padding: 4px; border-radius: 7px; }
.emoji-pop .emo:hover { background: var(--line-soft); }
.emoji-pop .emo.on { background: var(--gaji-rose); }

/* ---------- 커맨드 팔레트 ---------- */
.palette {
  position: fixed; inset: 0; z-index: 80;
  display: flex; justify-content: center; align-items: flex-start; padding-top: 12vh;
  background: color-mix(in srgb, var(--bg) 50%, rgba(0,0,0,0.4)); backdrop-filter: blur(3px);
}
.palette-box {
  width: min(580px, 94vw); background: var(--bg-panel);
  border: 1px solid var(--line); border-radius: 14px; overflow: hidden;
  box-shadow: 0 24px 70px rgba(0,0,0,0.3);
}
.palette-box input {
  width: 100%; border: 0; border-bottom: 1px solid var(--line); background: none;
  padding: 16px 18px; font-size: 15px; color: var(--ink); font-family: inherit; outline: none;
}
.palette-box ul { list-style: none; margin: 0; padding: 6px; max-height: 50vh; overflow: auto; }
.pal-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 13.5px; color: var(--ink);
}
.pal-item.active, .pal-item:hover { background: var(--line-soft); }
.pal-item .pal-hint { font-size: 11px; color: var(--ink-faint); font-family: ui-monospace, monospace; }
.pal-empty { padding: 16px; text-align: center; color: var(--ink-faint); font-size: 13px; }
.palette-foot { padding: 9px 14px; border-top: 1px solid var(--line-soft); font-size: 11px; color: var(--ink-faint); }

/* ---------- 노트 패널 ---------- */
.note-panel {
  position: fixed; right: 18px; top: 60px; z-index: 45; width: min(360px, 92vw);
  background: var(--bg-panel); border: 1px solid var(--gaji-rose); border-radius: 14px;
  box-shadow: 0 18px 50px rgba(110,20,35,0.18); overflow: hidden;
}
.note-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 12px 6px; }
.note-panel textarea {
  width: 100%; min-height: 220px; border: 0; background: none; resize: vertical;
  padding: 6px 14px 14px; font-size: 14px; line-height: 1.6; color: var(--ink);
  font-family: inherit; outline: none;
}

/* ---------- mind-elixir 노드 미세 조정 ---------- */
/* 루트만 버건디 채움(테마에서 처리), 선택 링은 버건디 */
me-tpc { transition: box-shadow .12s ease; cursor: grab; } /* 끌 수 있음 신호 */
me-tpc:active { cursor: grabbing; }
me-root > me-tpc { cursor: default; }            /* 루트는 드래그 불가 */
[contenteditable="true"] { cursor: text !important; } /* 편집 중엔 텍스트 커서 */
/* 관계선(arrow) · 요약(summary) · 하이퍼링크 = 황동/버건디 */
#map .topiclinks path { stroke: var(--gaji-brass); }
#map .topiclinks tspan, #map .topiclinks text { fill: var(--gaji-accent); }
#map .summary path { stroke: var(--gaji-brass); fill: none; }
#map .summary tspan, #map .summary text { fill: var(--gaji-accent); }
html[data-theme='dark'] #map .summary tspan, html[data-theme='dark'] #map .summary text { fill: var(--gaji-rose); }
#map .hyper-link { color: var(--gaji-brass); }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}