// 개념 우주 메인 화면: 우주(단원) → 은하(절) → 별자리(용어) 탐색, 검색, 상세, 경로 찾기, 비교.
import { api, esc, toast, STATUS_LABEL, REL_TYPE_LABEL, METHOD_LABEL, debounce } from "./common.js";
import { buildIndex, search, initialGroup } from "./search.js";
import { universeLayout, sectionLayout, fit, cullLabels, labelWidth, shortestPath } from "./layout.js";

const $ = (s, el = document) => el.querySelector(s);
const $$ = (s, el = document) => [...el.querySelectorAll(s)];
const NS = "http://www.w3.org/2000/svg";

const S = {
  data: null,
  byId: new Map(),
  galaxyById: new Map(),
  sectionById: new Map(),
  sectionsByGalaxy: new Map(),
  termsBySection: new Map(),
  termsByGalaxy: new Map(),
  adj: new Map(),
  degree: new Map(),
  index: null,
  route: { name: "universe" },
  view: null, // {kind, id}
  selected: null,
  mode: "map",
  cam: { s: 1, tx: 0, ty: 0 },
  world: null, // 연속 우주 좌표·요소
  level: "universe",
  path: null, // {ids:Set, rels:Set, steps}
  detailCache: new Map(),
};

const map = $(".map");
const objects = $(".objects");
const linksG = $(".links-g");
const svg = $(".links");
const detail = $("#detail");

// ------------------------------------------------------------------ 데이터

async function load() {
  stars();
  try {
    [S.data, S.member] = await Promise.all([api("/api/atlas"), api("/api/members/me").catch(() => ({ can_view: false }))]);
    const acc = $("[data-account]");
    if (S.member.logged_in) { acc.textContent = `${S.member.name} 님`; acc.href = "/account"; }
    if (S.member.admin) {
      // 교수자에게만 관리 메뉴
      acc.insertAdjacentHTML("beforebegin", `<a href="/members">회원 관리</a><a href="/admin">관리</a>`);
      if (!S.member.logged_in) acc.remove();
    }
  } catch (e) {
    $(".map-loading").textContent = "데이터를 불러오지 못했습니다. 잠시 후 새로고침해 주세요. (" + e.message + ")";
    throw e;
  }
  const d = S.data;
  for (const g of d.galaxies) {
    S.galaxyById.set(g.galaxy_id, g);
    S.sectionsByGalaxy.set(g.galaxy_id, []);
    S.termsByGalaxy.set(g.galaxy_id, []);
  }
  for (const s of d.sections) {
    S.sectionById.set(s.id, s);
    if (S.sectionsByGalaxy.has(s.galaxy_id)) S.sectionsByGalaxy.get(s.galaxy_id).push(s);
    S.termsBySection.set(s.id, []);
  }
  for (const t of d.terms) {
    S.byId.set(t.i, t);
    S.adj.set(t.i, []);
    if (S.termsByGalaxy.has(t.g)) S.termsByGalaxy.get(t.g).push(t);
    if (S.termsBySection.has(t.s)) S.termsBySection.get(t.s).push(t);
  }
  for (const r of d.relations) {
    S.adj.get(r.s)?.push(r);
    S.adj.get(r.t)?.push(r);
  }
  for (const [id, list] of S.adj) S.degree.set(id, list.length);
  // 용어가 없는 절은 숨김
  for (const [gid, secs] of S.sectionsByGalaxy) {
    S.sectionsByGalaxy.set(gid, secs.filter((s) => (S.termsBySection.get(s.id) || []).length));
  }
  S.index = buildIndex(d.terms);
  buildWorld();
  $(".map-loading").remove();
  const gen = (d.meta.generated_at || "").slice(0, 10);
  $(".footer-data").textContent = `용어 ${d.terms.length.toLocaleString()}개 · 관계 ${d.relations.length.toLocaleString()}개` + (gen ? ` · 데이터 ${gen}` : "");
}

const glow = (gid) => S.galaxyById.get(gid)?.color || "#c2b4ff";
const termGalaxy = (t) => S.galaxyById.get(t.g);
const statusBadge = (st) => (S.data.meta.show_status_badges && st && st !== "confirmed" ? `<span class="badge ${st}">${STATUS_LABEL[st] || st}</span>` : "");
const announce = (msg) => { $("#announce").textContent = msg; };

function stars() {
  const field = $(".starfield");
  let seed = 17;
  const next = () => ((seed = (seed * 16807) % 2147483647) / 2147483647);
  for (let i = 0; i < 170; i++) {
    const dot = document.createElement("i");
    dot.className = "spark" + (i % 16 === 0 ? " big" : "");
    dot.style.left = next() * 100 + "%";
    dot.style.top = next() * 100 + "%";
    dot.style.opacity = 0.1 + next() * 0.4;
    field.appendChild(dot);
  }
}

// ------------------------------------------------------------------ 라우팅

function parseHash() {
  const parts = location.hash.replace(/^#\/?/, "").split("/").filter(Boolean).map(decodeURIComponent);
  const [name, a, b] = parts;
  if (name === "g" && a) return { name: "galaxy", id: a };
  if (name === "s" && a) return { name: "section", id: a };
  if (name === "t" && a) return { name: "term", id: a };
  if (name === "path") return { name: "path", a, b };
  if (name === "compare") return { name: "compare", a, b };
  if (name === "search") return { name: "search", q: a || "" };
  if (name === "quiz") return { name: "quiz", wrong: a === "wrong", galaxy: a && a !== "wrong" ? a : null };
  return { name: "universe" };
}

let flyOnRoute = true;
let clearOnRoute = false;
export function go(hash, { fly = true, clear = false } = {}) {
  flyOnRoute = fly;
  clearOnRoute = clear;
  if (location.hash === hash) onRoute();
  else location.hash = hash;
}

function onRoute() {
  const r = (S.route = parseHash());
  const fly = flyOnRoute;
  const clear = clearOnRoute;
  flyOnRoute = true;
  clearOnRoute = false;
  let view = S.view;
  // 선택한 별은 지도를 옮겨도 유지 (빈 곳 클릭·Esc·선택 해제로만 풀림)
  if (clear || !["universe", "galaxy", "section", "quiz"].includes(r.name)) S.selected = null;
  if (r.name === "universe") view = { kind: "universe" };
  else if (r.name === "galaxy") view = S.galaxyById.has(r.id) ? { kind: "galaxy", id: r.id } : { kind: "universe" };
  else if (r.name === "section") view = S.sectionById.has(r.id) ? { kind: "section", id: r.id } : { kind: "universe" };
  else if (r.name === "term") {
    const t = S.byId.get(r.id);
    if (!t) {
      toast("이 용어는 아직 공개되지 않았거나 존재하지 않습니다.", true);
      view = { kind: "universe" };
    } else {
      S.selected = t.i;
      view = t.s && S.sectionById.has(t.s) ? { kind: "section", id: t.s } : { kind: "galaxy", id: t.g };
      pushTrail(t.i);
    }
  } else if (r.name === "path" || r.name === "compare") {
    const t = S.byId.get(r.a);
    if (t) {
      S.selected = t.i;
      if (!view || view.kind === "universe") view = { kind: "section", id: t.s };
    }
  }
  if (!view) view = { kind: "universe" };
  S.path = null;
  if (r.name === "path" && r.a && r.b) computePath(r.a, r.b);
  S.view = view;
  if (S.mode === "list") renderList();
  else if (fly) flyToRoute(r);
  else draw();
  renderPanel();
  renderCrumbs();
  renderTrail();
  if (r.name === "compare" && r.a && r.b) openCompare(r.a, r.b);
  $$(".topnav a").forEach((a) => {
    const href = a.getAttribute("href");
    const cur = (r.name === "path" && href === "/#/path") || (r.name === "compare" && href === "/#/compare") ||
      (!["path", "compare"].includes(r.name) && href === "/#/");
    if (cur) a.setAttribute("aria-current", "page"); else a.removeAttribute("aria-current");
  });
  $("[data-feedback-link]").href = "/feedback?page=" + encodeURIComponent(location.href) + (S.selected ? "&term=" + S.selected : "");
}

// ------------------------------------------------------------------ 연속 우주 (확대할수록 세부로)
//
// 모든 은하·절·용어를 하나의 좌표계에 배치하고, 화면 배율에 따라 보여 줄 단계를 정한다.
//   멀리: 은하(행성) + 용어 점  →  은하가 커지면 별자리(절) 원  →  별자리가 커지면 용어 별과 이름

const LOD = { galaxyOpen: 190, sectionOpen: 150, sectionText: 46, itemLabels: 330 };

function buildWorld() {
  const W = { gal: new Map(), sec: new Map(), term: new Map(), bounds: null };
  // 1) 절마다 용어 배치 (자연 배율: 1 = 별 간격 약 25px)
  for (const [gid, secs] of S.sectionsByGalaxy) {
    for (const sec of secs) {
      const terms = S.termsBySection.get(sec.id) || [];
      const byItem = new Map(sec.items.map((it) => [it.id, { id: it.id, title: `${it.number}. ${it.title}`, terms: [] }]));
      const other = { id: "_other", title: "그 밖의 용어", terms: [] };
      for (const t of terms) (byItem.get(t.it) || other).terms.push(t);
      const used = [...byItem.values(), other].filter((g) => g.terms.length);
      for (const g of used) g.terms.sort((a, b) => S.degree.get(b.i) - S.degree.get(a.i) || a.n.localeCompare(b.n, "ko"));
      const L = sectionLayout(used);
      const b = L.bounds;
      const cx = (b.minX + b.maxX) / 2, cy = (b.minY + b.maxY) / 2;
      const E = Math.max(b.maxX - b.minX, b.maxY - b.minY) / 2;
      W.sec.set(sec.id, { sec, gid, L, cx, cy, E, used, x: 0, y: 0, mode: "hidden", itemEls: null });
    }
  }
  // 2) 은하 안에서 절을 원형으로
  for (const g of S.data.galaxies) {
    const secs = (S.sectionsByGalaxy.get(g.galaxy_id) || []).map((s) => W.sec.get(s.id));
    const gap = 60;
    let R = 0, maxr = 0;
    if (secs.length === 1) {
      maxr = secs[0].E;
      secs[0].ox = 0; secs[0].oy = 0;
    } else if (secs.length) {
      maxr = Math.max(...secs.map((s) => s.E));
      const circ = secs.reduce((a, s) => a + 2 * s.E + gap, 0);
      R = Math.max(circ / (2 * Math.PI), maxr * 1.15);
      let angle = -Math.PI / 2;
      for (const s of secs) {
        const share = ((2 * s.E + gap) / circ) * Math.PI * 2;
        const a = angle + share / 2;
        s.ox = Math.cos(a) * R; s.oy = Math.sin(a) * R;
        angle += share;
      }
    }
    W.gal.set(g.galaxy_id, { g, secs, E: R + maxr + 40, x: 0, y: 0, mode: "planet" });
  }
  // 3) 우주: 고정 슬롯을 은하 크기에 맞게 벌림
  const slots = universeLayout(S.data.galaxies).pos;
  const ids = [...W.gal.keys()];
  let U = 1;
  for (let i = 0; i < ids.length; i++) for (let j = i + 1; j < ids.length; j++) {
    const a = slots[ids[i]], b = slots[ids[j]];
    const d = Math.hypot(a.x - b.x, a.y - b.y) || 1;
    U = Math.max(U, (1.12 * (W.gal.get(ids[i]).E + W.gal.get(ids[j]).E)) / d);
  }
  let minX = Infinity, maxX = -Infinity, minY = Infinity, maxY = -Infinity;
  for (const [gid, G] of W.gal) {
    G.x = slots[gid].x * U; G.y = slots[gid].y * U;
    minX = Math.min(minX, G.x - G.E); maxX = Math.max(maxX, G.x + G.E);
    minY = Math.min(minY, G.y - G.E); maxY = Math.max(maxY, G.y + G.E);
    for (const s of G.secs) {
      s.x = G.x + s.ox; s.y = G.y + s.oy;
      for (const grp of s.used) for (const t of grp.terms) {
        const p = s.L.pos[t.i];
        W.term.set(t.i, { t, x: s.x + p.x - s.cx, y: s.y + p.y - s.cy, sec: s, el: null, shown: false });
      }
    }
  }
  W.bounds = { minX, maxX, minY, maxY };
  S.world = W;
  createWorldElements();
}

function createWorldElements() {
  const W = S.world;
  objects.replaceChildren();
  for (const [gid, G] of W.gal) {
    const g = G.g;
    const b = document.createElement("button");
    b.type = "button";
    b.className = "galaxy";
    b.style.setProperty("--glow", g.color);
    b.innerHTML = `<span class="g-name">${esc(g.name)}</span><span class="g-sub">${esc(g.sub || "")}</span><span class="g-count">${g.chapter_no}장 · 용어 ${g.count}개</span>`;
    b.setAttribute("aria-label", `${g.chapter_no}장 ${g.name}: ${g.sub || ""}. 용어 ${g.count}개`);
    b.addEventListener("click", () => go("#/g/" + gid));
    objects.appendChild(b);
    G.el = b;
    const lab = document.createElement("div");
    lab.className = "galaxy-title";
    lab.style.setProperty("--glow", g.color);
    lab.innerHTML = `<strong>${esc(g.name)}</strong><small>${esc(g.sub || "")}</small>`;
    objects.appendChild(lab);
    G.labelEl = lab;
  }
  for (const [sid, s] of W.sec) {
    const sec = s.sec;
    const g = S.galaxyById.get(s.gid);
    const n = (S.termsBySection.get(sid) || []).length;
    const sample = s.used.flatMap((x) => x.terms).sort((a, b) => S.degree.get(b.i) - S.degree.get(a.i)).slice(0, 3).map((t) => t.n).join(", ");
    const b = document.createElement("button");
    b.type = "button";
    b.className = "cluster";
    b.style.setProperty("--glow", g.color);
    b.innerHTML = `<span class="c-body"><span class="c-name">${esc(sec.number)}절 ${esc(sec.title)}</span><span class="c-sub">${esc(sec.easy_sub || ("예: " + sample))}</span><span class="c-count">용어 ${n}개</span></span>`;
    b.setAttribute("aria-label", `${g.name} ${sec.number}절 ${sec.title}, 용어 ${n}개. 예: ${sample}`);
    b.addEventListener("click", () => go("#/s/" + sid));
    objects.appendChild(b);
    s.el = b;
    const title = document.createElement("a");
    title.className = "sec-title";
    title.href = "#/s/" + sid;
    title.style.setProperty("--glow", g.color);
    title.textContent = `${sec.number}절 ${sec.title}`;
    objects.appendChild(title);
    s.titleEl = title;
  }
}

function starEl(t) {
  const b = document.createElement("button");
  b.type = "button";
  b.className = "star" + (t.k === "person" ? " person" : "");
  b.style.setProperty("--glow", glow(t.g));
  b.dataset.term = t.i;
  const st = t.st !== "confirmed" && S.data.meta.show_status_badges ? ` (${STATUS_LABEL[t.st]})` : "";
  b.setAttribute("aria-label", `${t.n}${st}, ${termGalaxy(t)?.name || ""}`);
  b.innerHTML = `<span class="dot" aria-hidden="true"></span><span class="nm">${esc(t.n)}</span>`;
  b.addEventListener("click", (e) => {
    e.stopPropagation();
    go("#/t/" + t.i, { fly: false });
  });
  return b;
}

function shortLabel(r) {
  const base = REL_TYPE_LABEL[r.ty] || "관련";
  if (r.m === "wireframe" || r.m === "manual" || r.m === "curated") return r.l && r.l.length <= 16 ? r.l : base;
  return base;
}

// ------------------------------------------------------------------ 카메라

const toScreen = (x, y) => [x * S.cam.s + S.cam.tx, y * S.cam.s + S.cam.ty];

function camFor(bounds, pad = 30) {
  const w = map.clientWidth, h = map.clientHeight;
  const c = fit(bounds, w, h - 50, { max: 6, min: 0.005, margin: pad });
  c.ty += 25;
  return c;
}

function boundsOf(x, y, r) {
  return { minX: x - r, maxX: x + r, minY: y - r, maxY: y + r };
}

function minScale() {
  return camFor(S.world.bounds).s * 0.6;
}

function targetCam(r) {
  const W = S.world;
  const w = map.clientWidth, h = map.clientHeight;
  const sel = ["term", "path", "compare"].includes(r?.name) && S.selected && W.term.get(S.selected);
  if (sel) {
    // 별 이름이 읽히고 그 절이 펼쳐질 만큼 확대, 이미 충분하면 배율 유지
    const need = Math.max(0.95, (LOD.sectionOpen * 1.3) / sel.sec.E);
    const s = Math.max(S.cam.s, need);
    return { s, tx: w / 2 - sel.x * s, ty: h / 2 - sel.y * s };
  }
  const v = S.view;
  if (v.kind === "section") {
    const s = W.sec.get(v.id);
    if (s) return camFor(boundsOf(s.x, s.y, s.E));
  }
  if (v.kind === "galaxy") {
    const G = W.gal.get(v.id);
    if (G) return camFor(boundsOf(G.x, G.y, G.E));
  }
  return camFor(W.bounds);
}

let anim = null;
function flyTo(cam, ms = 520) {
  cancelAnimationFrame(anim);
  const from = { ...S.cam };
  const w = map.clientWidth / 2, h = map.clientHeight / 2;
  // 화면 중앙의 세계 좌표를 보간하고 배율은 로그로 보간
  const c0 = { x: (w - from.tx) / from.s, y: (h - from.ty) / from.s };
  const c1 = { x: (w - cam.tx) / cam.s, y: (h - cam.ty) / cam.s };
  const t0 = performance.now();
  const reduce = window.matchMedia("(prefers-reduced-motion: reduce)").matches;
  const step = (now) => {
    let k = reduce ? 1 : Math.min(1, (now - t0) / ms);
    k = k < 0.5 ? 2 * k * k : 1 - Math.pow(-2 * k + 2, 2) / 2;
    const s = Math.exp(Math.log(from.s) + (Math.log(cam.s) - Math.log(from.s)) * k);
    const x = c0.x + (c1.x - c0.x) * k, y = c0.y + (c1.y - c0.y) * k;
    S.cam = { s, tx: w - x * s, ty: h - y * s };
    draw();
    if (k < 1) anim = requestAnimationFrame(step);
    else updateContext();
  };
  anim = requestAnimationFrame(step);
}

function flyToRoute(r) {
  if (!S.world) return;
  const sel = S.selected && S.world.term.get(S.selected);
  if (sel && r.name === "term") {
    // 이미 보이는 별을 눌렀으면 움직이지 않음
    const [sx, sy] = toScreen(sel.x, sel.y);
    const ok = S.cam.s >= 0.85 && sel.sec.mode === "open" && sx > 80 && sx < map.clientWidth - 80 && sy > 90 && sy < map.clientHeight - 50;
    if (ok) { draw(); return; }
  }
  flyTo(targetCam(r));
}

function zoomAt(factor, px, py) {
  cancelAnimationFrame(anim);
  const s0 = S.cam.s;
  const s1 = Math.min(6, Math.max(minScale(), s0 * factor));
  S.cam.tx = px - ((px - S.cam.tx) * s1) / s0;
  S.cam.ty = py - ((py - S.cam.ty) * s1) / s0;
  S.cam.s = s1;
  draw();
  scheduleContext();
}

// ------------------------------------------------------------------ 그리기

const dotsCanvas = (() => {
  const c = document.createElement("canvas");
  c.className = "dots";
  c.setAttribute("aria-hidden", "true");
  map.insertBefore(c, svg);
  return c;
})();

let drawQueued = false;
function draw() {
  if (drawQueued) return;
  drawQueued = true;
  requestAnimationFrame(() => { drawQueued = false; drawNow(); });
}

function drawNow() {
  const W = S.world;
  if (!W || S.mode !== "map") return;
  const { s } = S.cam;
  const w = map.clientWidth, h = map.clientHeight;
  const margin = 80;
  const inView = (x, y, r = 0) => x + r > -margin && x - r < w + margin && y + r > -margin && y - r < h + margin;
  svg.setAttribute("viewBox", `0 0 ${w} ${h}`);

  // 캔버스: 펼쳐지지 않은 절의 용어를 작은 점으로
  const dpr = window.devicePixelRatio || 1;
  if (dotsCanvas.width !== Math.round(w * dpr) || dotsCanvas.height !== Math.round(h * dpr)) {
    dotsCanvas.width = Math.round(w * dpr);
    dotsCanvas.height = Math.round(h * dpr);
  }
  const ctx = dotsCanvas.getContext("2d");
  ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
  ctx.clearRect(0, 0, w, h);

  let level = "universe";
  for (const [, G] of W.gal) {
    const [gx, gy] = toScreen(G.x, G.y);
    const rpx = G.E * s;
    const open = rpx >= LOD.galaxyOpen;
    G.mode = open ? "open" : "planet";
    if (open && inView(gx, gy, rpx)) level = level === "universe" ? "galaxy" : level;
    const visible = inView(gx, gy, rpx);
    G.el.hidden = open || !visible;
    if (!G.el.hidden) G.el.style.transform = `translate(calc(${gx}px - 50%), ${gy - 18}px)`;
    const ty = gy - rpx + 10;
    G.labelEl.hidden = !open || !visible || ty < 48 || gx < 0 || gx > w;
    if (!G.labelEl.hidden) G.labelEl.style.transform = `translate(calc(${gx}px - 50%), ${ty}px)`;
    for (const sec of G.secs) {
      const [sx, sy] = toScreen(sec.x, sec.y);
      const spx = sec.E * s;
      const secVisible = open && inView(sx, sy, spx);
      const secOpen = secVisible && spx >= LOD.sectionOpen;
      sec.mode = !secVisible ? (open ? "offscreen" : "hidden") : secOpen ? "open" : "cluster";
      if (secOpen) level = "section";
      // 절 원(접힌 상태)
      sec.el.hidden = sec.mode !== "cluster";
      if (!sec.el.hidden) {
        const d = spx * 2;
        sec.el.style.width = d + "px";
        sec.el.style.height = d + "px";
        sec.el.style.transform = `translate(${sx - d / 2}px, ${sy - d / 2}px)`;
        sec.el.classList.toggle("tiny", spx < LOD.sectionText);
      }
      sec.titleEl.hidden = sec.mode !== "open";
      if (!sec.titleEl.hidden) sec.titleEl.style.transform = `translate(calc(${sx}px - 50%), ${sy - spx - 4}px)`;
      // 항목(소주제) 라벨
      const showItems = sec.mode === "open" && spx >= LOD.itemLabels && sec.used.length > 1;
      if (showItems && !sec.itemEls) {
        sec.itemEls = sec.used.map((grp) => {
          const el = document.createElement("div");
          el.className = "item-label";
          el.style.setProperty("--glow", glow(sec.gid));
          el.textContent = grp.title;
          el.title = grp.title;
          objects.appendChild(el);
          return { el, c: sec.L.centers[grp.id] };
        });
      }
      if (sec.itemEls) for (const it of sec.itemEls) {
        it.el.hidden = !showItems;
        if (showItems) {
          const [ix, iy] = toScreen(sec.x + it.c.x - sec.cx, sec.y + it.c.y - sec.cy - it.c.r);
          it.el.style.transform = `translate(calc(${ix}px - 50%), ${iy - 20}px)`;
        }
      }
      // 점(펼쳐지지 않은 절)
      if (sec.mode !== "open" && inView(...toScreen(sec.x, sec.y), sec.E * s)) {
        ctx.fillStyle = S.galaxyById.get(sec.gid).color;
        ctx.globalAlpha = open ? 0.55 : 0.45;
        const r = Math.max(0.8, Math.min(2, s * 3));
        for (const grp of sec.used) for (const t of grp.terms) {
          const p = W.term.get(t.i);
          const [x, y] = toScreen(p.x, p.y);
          if (x < -5 || x > w + 5 || y < -5 || y > h + 5) continue;
          ctx.beginPath();
          ctx.arc(x, y, r, 0, Math.PI * 2);
          ctx.fill();
        }
      }
    }
  }
  ctx.globalAlpha = 1;
  S.level = level;

  // 별(펼쳐진 절의 용어)
  const sel = S.selected;
  const neighbors = new Set();
  if (sel) for (const r of S.adj.get(sel) || []) neighbors.add(r.s === sel ? r.t : r.s);
  const shown = [];
  for (const [id, p] of W.term) {
    const [x, y] = toScreen(p.x, p.y);
    const vis = p.sec.mode === "open" && x > -40 && x < w + 40 && y > -30 && y < h + 30;
    if (vis) {
      if (!p.el) { p.el = starEl(p.t); objects.appendChild(p.el); }
      p.el.hidden = false;
      p.el.style.transform = `translate(calc(${x}px - 50%), ${y - 6}px)`;
      p.sx = x; p.sy = y;
      const cls = "star" + (p.t.k === "person" ? " person" : "") +
        (id === sel ? " selected" : neighbors.has(id) ? " nb" : sel ? " dim" : "") +
        (S.path?.ids.has(id) ? " on-path" : "") + (p.hideLabel && id !== sel ? " hide-label" : "");
      if (p.el.className !== cls) p.el.className = cls;
      p.el.setAttribute("aria-pressed", String(id === sel));
      shown.push(p);
    } else if (p.el && !p.el.hidden) {
      p.el.hidden = true;
    }
    p.shown = vis;
  }
  // 선택한 별은 절이 접혀 있어도 표시
  if (sel && W.term.has(sel) && !W.term.get(sel).shown) {
    const p = W.term.get(sel);
    const [x, y] = toScreen(p.x, p.y);
    if (x > -40 && x < w + 40 && y > -30 && y < h + 30) {
      if (!p.el) { p.el = starEl(p.t); objects.appendChild(p.el); }
      p.el.hidden = false;
      p.el.className = "star selected" + (p.t.k === "person" ? " person" : "");
      p.el.style.transform = `translate(calc(${x}px - 50%), ${y - 6}px)`;
      p.sx = x; p.sy = y; p.shown = true;
      shown.push(p);
    }
  }
  drawLinks(shown);
  scheduleLabels(shown);
  $(".map-hint").textContent = {
    universe: "휠·두 손가락으로 확대하면 은하 → 별자리(절) → 별(용어)로 들어갑니다",
    galaxy: "더 확대하면 별자리(절) 안의 용어 별이 펼쳐집니다",
    section: "별을 누르면 설명과 연결된 개념을 봅니다 · 이름이 숨은 별은 더 확대하세요",
  }[level];
}

// 관계 그리기: 각 용어를 '지금 화면에서 보이는 모습'(별·별자리 원·은하 행성)에 붙여 연결한다.
// 상대가 화면 밖이면 별에서 짧은 꼬리선을 내고, 화면 가장자리에 은하(또는 절)별 연결 표지를 둔다.
function anchorOf(id) {
  const W = S.world;
  const p = W.term.get(id);
  if (!p) return null;
  if (p.shown) return { key: "t:" + id, x: p.sx, y: p.sy, kind: "star", gid: p.t.g };
  const sec = p.sec;
  if (sec.mode === "cluster") {
    const [x, y] = toScreen(sec.x, sec.y);
    return { key: "s:" + sec.sec.id, x, y, kind: "sec", gid: sec.gid, r: sec.E * S.cam.s };
  }
  const G = W.gal.get(p.t.g);
  if (G.mode === "planet" && !G.el.hidden) {
    const [x, y] = toScreen(G.x, G.y);
    return { key: "g:" + p.t.g, x, y, kind: "gal", gid: p.t.g };
  }
  return null;
}

function drawLinks(shown) {
  const W = S.world;
  const sel = S.selected;
  const w = map.clientWidth, h = map.clientHeight;
  const onScreen = (x, y) => x > 8 && x < w - 8 && y > 50 && y < h - 8;
  const plain = [];           // 별 ↔ 별 개별 관계
  const bundles = new Map();  // 묶음선: 앵커쌍 → {a, b, n}
  const outward = new Map();  // 화면 밖 대상: 그룹 → {gid, label, n, names, wx, wy, fly}
  const stubs = [];
  const selOff = [];          // 선택한 별의 화면 밖 이웃
  const anchors = new Map();
  const A = (id) => { if (!anchors.has(id)) anchors.set(id, anchorOf(id)); return anchors.get(id); };

  for (const r of S.data.relations) {
    const isSel = sel && (r.s === sel || r.t === sel);
    const a = A(r.s), b = A(r.t);
    if (isSel) {
      const other = r.s === sel ? r.t : r.s;
      const o = W.term.get(other);
      if (o && !(o.shown && onScreen(o.sx, o.sy))) selOff.push({ r, o });
      continue; // 선택한 별의 관계는 아래에서 실제 위치까지 강조선으로
    }
    if (a && b) {
      if (a.key === b.key) continue;
      if (a.kind === "star" && b.kind === "star") { plain.push(r); continue; }
      const k = a.key < b.key ? a.key + "|" + b.key : b.key + "|" + a.key;
      const e = bundles.get(k) || { a, b, n: 0 };
      e.n++;
      bundles.set(k, e);
      continue;
    }
    if (!a && !b) continue;
    // 한쪽만 보임 → 화면 밖으로 나가는 연결
    const src = a || b;
    const tgtId = a ? r.t : r.s;
    const T = W.term.get(tgtId);
    if (!T) continue;
    const otherGalaxy = T.t.g !== src.gid;
    const gkey = otherGalaxy ? "g:" + T.t.g : "s:" + T.sec.sec.id;
    let o = outward.get(gkey);
    if (!o) {
      const G = W.gal.get(T.t.g);
      o = otherGalaxy
        ? { gid: T.t.g, label: G.g.name, n: 0, names: new Set(), wx: G.x, wy: G.y, fly: "#/g/" + T.t.g }
        : { gid: T.t.g, label: `${T.sec.sec.number}절 ${T.sec.sec.title}`, n: 0, names: new Set(), wx: T.sec.x, wy: T.sec.y, fly: "#/s/" + T.sec.sec.id };
      outward.set(gkey, o);
    }
    o.n++;
    if (o.names.size < 8) o.names.add(T.t.n);
    if (src.kind === "star" && stubs.length < 400) stubs.push({ src, T });
  }

  // ---- SVG: 매 프레임 다시 그림 (선 수가 많지 않음)
  let html = "";
  const qpath = (ax, ay, bx, by, bend, back = 0) => {
    const mx = (ax + bx) / 2, my = (ay + by) / 2;
    const cx = mx - (by - ay) * bend, cy = my + (bx - ax) * bend;
    const len = Math.hypot(bx - cx, by - cy) || 1;
    return { d: `M ${ax.toFixed(1)} ${ay.toFixed(1)} Q ${cx.toFixed(1)} ${cy.toFixed(1)} ${(bx - ((bx - cx) / len) * back).toFixed(1)} ${(by - ((by - cy) / len) * back).toFixed(1)}`, cx, cy };
  };
  for (const [, e] of bundles) {
    const { d } = qpath(e.a.x, e.a.y, e.b.x, e.b.y, e.a.kind === "gal" && e.b.kind === "gal" ? 0.06 : 0.1);
    const wdt = Math.min(6, 0.8 + Math.log2(e.n + 1) * 0.9);
    const cross = e.a.gid !== e.b.gid;
    html += `<path class="bundle${cross ? " cross" : ""}" style="stroke-width:${wdt}" d="${d}"/>`;
  }
  for (const r of plain) {
    const a = anchors.get(r.s), b = anchors.get(r.t);
    const arrow = r.d && r.ty !== "contrasts_with" && r.ty !== "related_to";
    const cross = a.gid !== b.gid;
    const onPath = S.path?.rels.has(r.i);
    const { d } = qpath(a.x, a.y, b.x, b.y, 0.12, arrow ? 9 : 0);
    html += `<path class="t-${r.ty}${r.st !== "confirmed" ? " draft" : ""}${cross ? " cross" : ""}${onPath ? " path-hi" : ""}" d="${d}"${arrow ? ' marker-end="url(#arrow)"' : ""}/>`;
  }
  for (const { src, T } of stubs) {
    const [tx, ty] = toScreen(T.x, T.y);
    const dx = tx - src.x, dy = ty - src.y, len = Math.hypot(dx, dy) || 1;
    const L = 24;
    html += `<path class="stub" style="stroke:${glow(T.t.g)}" d="M ${src.x.toFixed(1)} ${src.y.toFixed(1)} L ${(src.x + (dx / len) * L).toFixed(1)} ${(src.y + (dy / len) * L).toFixed(1)}"/>`;
  }
  // 선택한 별: 모든 관계를 실제 위치까지 강조
  let labels = 0;
  if (sel && W.term.get(sel)) {
    const me = W.term.get(sel);
    const [mx, my] = me.shown ? [me.sx, me.sy] : toScreen(me.x, me.y);
    for (const r of S.adj.get(sel) || []) {
      const o = W.term.get(r.s === sel ? r.t : r.s);
      if (!o) continue;
      const [ox, oy] = o.shown ? [o.sx, o.sy] : toScreen(o.x, o.y);
      const [ax, ay, bx, by] = r.s === sel ? [mx, my, ox, oy] : [ox, oy, mx, my];
      const arrow = r.d && r.ty !== "contrasts_with" && r.ty !== "related_to";
      const pth = qpath(ax, ay, bx, by, 0.12, arrow ? 9 : 0);
      const onPath = S.path?.rels.has(r.i);
      html += `<path class="hi t-${r.ty}${onPath ? " path-hi" : ""}${o.t.g !== me.t.g ? " cross" : ""}" d="${pth.d}"${arrow ? ' marker-end="url(#arrow-hi)"' : ""}/>`;
      if (labels < 12) {
        const k1 = r.s === sel ? 0.3 : 0.7;
        const qx = (1 - k1) ** 2 * ax + 2 * (1 - k1) * k1 * pth.cx + k1 ** 2 * bx;
        const qy = (1 - k1) ** 2 * ay + 2 * (1 - k1) * k1 * pth.cy + k1 ** 2 * by;
        html += `<text x="${qx.toFixed(1)}" y="${(qy - 4).toFixed(1)}">${esc(shortLabel(r))}</text>`;
        labels++;
      }
    }
  }
  // 경로 찾기: 경로 위 관계 강조
  if (S.path?.steps) for (const st of S.path.steps) {
    const a = W.term.get(st.rel.s), b = W.term.get(st.rel.t);
    if (!a || !b || (st.rel.s === sel || st.rel.t === sel)) continue;
    const [ax, ay] = a.shown ? [a.sx, a.sy] : toScreen(a.x, a.y);
    const [bx, by] = b.shown ? [b.sx, b.sy] : toScreen(b.x, b.y);
    html += `<path class="path-hi" d="${qpath(ax, ay, bx, by, 0.12).d}"/>`;
  }
  linksG.innerHTML = html;

  // ---- 화면 가장자리 표지
  for (const el of objects.querySelectorAll(".edge-chip")) el.remove();
  const placed = [];
  // 절·은하 제목과 위쪽 도구 막대는 가리지 않도록 장애물로 등록
  const mrect = map.getBoundingClientRect();
  const compact = w < 600;
  const topY = Math.max(62, ...[...document.querySelectorAll(".map-bar > *")].map((el) => el.getBoundingClientRect().bottom - mrect.top + 18));
  for (const el of [...objects.querySelectorAll(".sec-title:not([hidden]), .galaxy-title:not([hidden])"), ...document.querySelectorAll(".map-bar > *")]) {
    const r = el.getBoundingClientRect();
    placed.push({ x: r.left - mrect.left + r.width / 2, y: r.top - mrect.top + r.height / 2, w: r.width + 10 });
  }
  const place = (tx, ty, width, ox = w / 2, oy = (h + 50) / 2) => {
    let x = tx, y = ty;
    const cx0 = ox, cy0 = oy;
    const inside = x > 70 && x < w - 70 && y > topY && y < h - 30;
    if (!inside) {
      // 출발점(화면 중심 또는 선택한 별)에서 대상 쪽으로 쏜 반직선이 가장자리와 만나는 점
      const dx = tx - cx0, dy = ty - cy0;
      const sx = dx > 0 ? (w - 16 - width / 2 - cx0) / dx : (16 + width / 2 - cx0) / dx;
      const sy = dy > 0 ? (h - 22 - cy0) / dy : (topY - cy0) / dy;
      const k = Math.min(Math.abs(sx) || Infinity, Math.abs(sy) || Infinity);
      x = cx0 + dx * k; y = cy0 + dy * k;
    }
    for (let i = 0; i < 12; i++) {
      const hit = placed.find((p) => Math.abs(p.x - x) < (p.w + width) / 2 + 4 && Math.abs(p.y - y) < 26);
      if (!hit) break;
      const gapX = (hit.w + width) / 2 + 6;
      if (x < 120 || x > w - 120) y = hit.y + (y < h / 2 ? 28 : -28);
      if (y < topY) y = topY;
      else x = x <= hit.x ? hit.x - gapX : hit.x + gapX;
    }
    placed.push({ x, y, w: width });
    return [x, y, inside];
  };
  const chip = (html2, title, color, tx, ty, width, onClick, cls = "", origin = []) => {
    const [x, y, inside] = place(tx, ty, width, ...origin);
    const el = document.createElement("button");
    el.type = "button";
    el.className = "edge-chip " + cls + (inside ? " inside" : "");
    el.style.setProperty("--glow", color);
    el.style.transform = `translate(calc(${x}px - 50%), calc(${y}px - 50%))`;
    el.innerHTML = html2;
    el.title = title;
    el.setAttribute("aria-label", title);
    el.addEventListener("click", onClick);
    objects.appendChild(el);
  };
  // 선택한 별의 화면 밖 이웃은 이름으로
  const meP = sel && W.term.get(sel);
  const me = meP ? (meP.shown ? { sx: meP.sx, sy: meP.sy } : null) : null;
  if (meP && !(meP.shown && onScreen(meP.sx, meP.sy))) {
    const [tx, ty] = toScreen(meP.x, meP.y);
    chip(`<i></i>선택: ${esc(meP.t.n)}<small>돌아가기</small>`, `선택한 ‘${meP.t.n}’ 위치로 돌아가기`, glow(meP.t.g), tx, ty,
      labelWidth(meP.t.n, 11.5) + 118, () => go("#/t/" + sel), "named selected-chip");
  }
  const short = (t, n) => (compact && t.length > n ? t.slice(0, n) + "…" : t);
  for (const { r, o } of selOff.slice(0, compact ? 5 : 10)) {
    if (o.shown && onScreen(o.sx, o.sy)) continue;
    const [tx, ty] = toScreen(o.x, o.y);
    const where = o.t.g !== S.byId.get(sel).g ? S.galaxyById.get(o.t.g).name : o.sec.sec.title;
    const arrow = r.ty === "contrasts_with" || r.ty === "related_to" ? "↔" : r.s === sel ? "→" : "←";
    const whereTxt = compact ? "" : where;
    chip(`<i></i>${esc(short(o.t.n, 8))}${whereTxt ? `<small>${esc(whereTxt)}</small>` : ""}`, `${shortLabel(r)} ${arrow} ${o.t.n} (${where})`, glow(o.t.g), tx, ty,
      labelWidth(short(o.t.n, 8) + whereTxt, 11.5) + 34, () => go("#/t/" + o.t.i), "named", me ? [me.sx, me.sy] : []);
  }
  // 그 밖의 바깥 연결은 은하·절 단위로 묶어서
  const groups = [...outward.values()].sort((a, b) => b.n - a.n).slice(0, compact ? 5 : 14);
  for (const o of groups) {
    const [tx, ty] = toScreen(o.wx, o.wy);
    const names = [...o.names].join(", ");
    chip(`<i></i>${esc(short(o.label, 6))}<b>${o.n}</b>`, `${o.label}과(와) 연결 ${o.n}개: ${names}${o.n > o.names.size ? " 외" : ""}`,
      glow(o.gid), tx, ty, labelWidth(short(o.label, 6), 11.5) + 46, () => go(o.fly));
  }
}

const scheduleLabels = debounce((shown) => cullStarLabels(shown), 50);

function cullStarLabels(shown) {
  if (!shown) return;
  const sel = S.selected;
  const neighbors = new Set();
  if (sel) for (const r of S.adj.get(sel) || []) neighbors.add(r.s === sel ? r.t : r.s);
  const items = [];
  for (const p of shown) {
    const id = p.t.i;
    const isSel = id === sel, isNb = neighbors.has(id), isPath = S.path?.ids.has(id);
    items.push({
      id, x: p.sx, y: p.sy + 4, w: labelWidth(p.t.n, isSel ? 13.5 : 12), h: 19,
      prio: isSel ? 1e6 : isPath ? 5e5 : isNb ? 1e5 : S.degree.get(id) * 10 + (p.t.e ? 5 : 0) - p.t.n.length * 0.1,
      force: isSel || isPath,
    });
  }
  for (const el of objects.querySelectorAll(".sec-title:not([hidden]), .item-label:not([hidden]), .galaxy-title:not([hidden]), .edge-chip")) {
    const r = el.getBoundingClientRect(), m = map.getBoundingClientRect();
    items.push({ id: "_o" + items.length, x: r.left - m.left + r.width / 2, y: r.top - m.top, w: r.width, h: r.height, prio: 2e6, force: true });
  }
  const vis = cullLabels(items);
  for (const p of shown) {
    const hide = !vis.has(p.t.i);
    p.hideLabel = hide;
    if (p.el) p.el.classList.toggle("hide-label", hide && p.t.i !== sel);
  }
}

// 확대·이동이 멈추면 화면 가운데의 은하·절을 '현재 위치'로 삼아 위치 표시와 설명을 맞춘다
const scheduleContext = debounce(() => updateContext(), 260);

function updateContext() {
  const W = S.world;
  if (!W || S.mode !== "map") return;
  const r = S.route;
  if (!["universe", "galaxy", "section"].includes(r.name)) return;
  const w = map.clientWidth / 2, h = map.clientHeight / 2;
  const cx = (w - S.cam.tx) / S.cam.s, cy = (h - S.cam.ty) / S.cam.s;
  let view = { kind: "universe" };
  let best = Infinity;
  for (const [gid, G] of W.gal) {
    if (G.mode !== "open") continue;
    const d = Math.hypot(G.x - cx, G.y - cy) / G.E;
    if (d < 1.1 && d < best) { best = d; view = { kind: "galaxy", id: gid }; }
  }
  if (view.kind === "galaxy") {
    best = Infinity;
    for (const s of W.gal.get(view.id).secs) {
      if (s.mode !== "open") continue;
      const d = Math.hypot(s.x - cx, s.y - cy) / s.E;
      if (d < 1.2 && d < best) { best = d; view = { kind: "section", id: s.sec.id }; }
    }
  }
  const cur = S.view || {};
  if (cur.kind === view.kind && cur.id === view.id) return;
  S.view = view;
  const hash = view.kind === "universe" ? "#/" : view.kind === "galaxy" ? "#/g/" + view.id : "#/s/" + view.id;
  history.replaceState(null, "", hash);
  S.route = parseHash();
  renderPanel();
  renderCrumbs();
}

// 경로 찾기 등에서 강조가 바뀌었을 때
function refreshScene() { draw(); }
function position() { draw(); }

function fitCam() {
  S.cam = targetCam(S.route);
}

function initCamera() {
  // 마우스 드래그·한 손가락 이동, 두 손가락 핀치(확대·축소+이동). 별·은하 위에서 시작해도 제스처로 인식하고,
  // 제스처가 끝난 직후의 클릭은 막아서 손가락을 뗀 자리의 버튼이 눌리지 않게 한다.
  const pointers = new Map();
  let drag = null;     // {x, y, tx, ty}
  let pinch = null;    // {d0, s0, wx, wy}
  let gesture = false; // 이번 터치/드래그가 이동·확대였는지
  let tapOnEmpty = false;
  let suppressUntil = 0;
  const TAP_SLOP = 8;
  const rectOf = () => map.getBoundingClientRect();
  const capture = (id) => { try { map.setPointerCapture(id); } catch { /* 이미 끝난 포인터 */ } };

  const startDrag = (p) => { drag = { x: p.x, y: p.y, tx: S.cam.tx, ty: S.cam.ty }; };
  const startPinch = () => {
    const [a, b] = [...pointers.values()];
    const r = rectOf();
    const mx = (a.x + b.x) / 2 - r.left, my = (a.y + b.y) / 2 - r.top;
    // 두 손가락 가운데 지점 아래의 세계 좌표를 고정점으로
    pinch = { d0: Math.max(10, Math.hypot(a.x - b.x, a.y - b.y)), s0: S.cam.s, wx: (mx - S.cam.tx) / S.cam.s, wy: (my - S.cam.ty) / S.cam.s };
    drag = null;
    gesture = true;
    for (const id of pointers.keys()) capture(id);
  };

  map.addEventListener("pointerdown", (e) => {
    if (e.pointerType === "mouse" && e.button !== 0) return;
    cancelAnimationFrame(anim);
    const onControl = !!e.target.closest("button, a, input");
    pointers.set(e.pointerId, { x: e.clientX, y: e.clientY, sx: e.clientX, sy: e.clientY, onControl });
    if (pointers.size === 1) {
      gesture = false;
      tapOnEmpty = !onControl;
      startDrag(pointers.get(e.pointerId));
      // 버튼 위에서 시작했으면 클릭이 될 수 있으므로 아직 포인터를 붙잡지 않는다
      if (!onControl) capture(e.pointerId);
    } else if (pointers.size === 2) {
      tapOnEmpty = false;
      startPinch();
    }
    map.classList.add("dragging");
  });

  map.addEventListener("pointermove", (e) => {
    const p = pointers.get(e.pointerId);
    if (!p) return;
    p.x = e.clientX; p.y = e.clientY;
    if (pinch && pointers.size >= 2) {
      const [a, b] = [...pointers.values()];
      const r = rectOf();
      const d = Math.max(10, Math.hypot(a.x - b.x, a.y - b.y));
      const mx = (a.x + b.x) / 2 - r.left, my = (a.y + b.y) / 2 - r.top;
      const s1 = Math.min(6, Math.max(minScale(), pinch.s0 * (d / pinch.d0)));
      S.cam = { s: s1, tx: mx - pinch.wx * s1, ty: my - pinch.wy * s1 };
      draw();
      return;
    }
    if (drag && pointers.size === 1) {
      const dx = p.x - drag.x, dy = p.y - drag.y;
      if (!gesture && Math.hypot(p.x - p.sx, p.y - p.sy) > TAP_SLOP) {
        gesture = true;
        tapOnEmpty = false;
        capture(e.pointerId); // 버튼 위에서 시작한 경우도 이제부터는 이동
      }
      if (gesture) {
        S.cam.tx = drag.tx + dx;
        S.cam.ty = drag.ty + dy;
        draw();
      }
    }
  });

  const end = (e) => {
    if (!pointers.has(e.pointerId)) return;
    pointers.delete(e.pointerId);
    if (pointers.size === 1) {
      // 핀치 중 한 손가락을 떼면 남은 손가락으로 이어서 이동 (튀지 않게 기준점 재설정)
      pinch = null;
      startDrag([...pointers.values()][0]);
      return;
    }
    if (pointers.size >= 2) { startPinch(); return; }
    // 모든 포인터가 떨어짐
    pinch = null;
    drag = null;
    map.classList.remove("dragging");
    if (gesture) {
      suppressUntil = performance.now() + 350;
      scheduleContext();
    } else if (tapOnEmpty && e.type === "pointerup" && S.selected) {
      clearSelection(); // 빈 곳을 짧게 누르면 선택 해제 (화면은 그대로)
    }
    gesture = false;
  };
  map.addEventListener("pointerup", end);
  map.addEventListener("pointercancel", end);
  map.addEventListener("lostpointercapture", (e) => { if (pointers.has(e.pointerId) && e.pointerType !== "mouse") end(e); });
  // 제스처 직후의 클릭(손가락을 뗀 자리의 별·은하)은 무시
  map.addEventListener("click", (e) => {
    if (performance.now() < suppressUntil) { e.stopPropagation(); e.preventDefault(); }
  }, true);
  // iOS Safari: 지도 위 핀치가 페이지 전체 확대로 번지지 않게
  for (const t of ["gesturestart", "gesturechange", "gestureend"]) {
    map.addEventListener(t, (e) => e.preventDefault(), { passive: false });
  }
  map.addEventListener("touchmove", (e) => { if (e.touches.length > 1) e.preventDefault(); }, { passive: false });
  map.addEventListener("wheel", (e) => {
    e.preventDefault();
    const rect = map.getBoundingClientRect();
    const f = Math.pow(1.0022, -e.deltaY * (e.deltaMode === 1 ? 30 : 1) * (e.ctrlKey ? 4 : 1));
    zoomAt(f, e.clientX - rect.left, e.clientY - rect.top);
  }, { passive: false });
  map.addEventListener("dblclick", (e) => {
    if (e.target.closest("button, a")) return;
    const rect = map.getBoundingClientRect();
    flyTo({ ...zoomedCam(2.2, e.clientX - rect.left, e.clientY - rect.top) }, 350);
  });
  $$("[data-zoom]").forEach((b) => b.addEventListener("click", () => {
    const w = map.clientWidth, h = map.clientHeight;
    if (b.dataset.zoom === "fit") flyTo(camFor(S.world.bounds));
    else flyTo(zoomedCam(b.dataset.zoom === "in" ? 1.8 : 0.55, w / 2, h / 2), 300);
  }));
  map.addEventListener("keydown", (e) => {
    if (e.target !== map) return;
    const step = 60;
    const k = e.key;
    const cw = map.clientWidth / 2, ch = map.clientHeight / 2;
    if (k === "+" || k === "=") zoomAt(1.3, cw, ch);
    else if (k === "-") zoomAt(0.77, cw, ch);
    else if (k === "ArrowLeft") { S.cam.tx += step; draw(); scheduleContext(); }
    else if (k === "ArrowRight") { S.cam.tx -= step; draw(); scheduleContext(); }
    else if (k === "ArrowUp") { S.cam.ty += step; draw(); scheduleContext(); }
    else if (k === "ArrowDown") { S.cam.ty -= step; draw(); scheduleContext(); }
    else return;
    e.preventDefault();
  });
  let lastW = 0, lastH = 0;
  new ResizeObserver(debounce(() => {
    if (!S.world || S.mode !== "map") return;
    const w = map.clientWidth, h = map.clientHeight;
    if (lastW) { S.cam.tx += (w - lastW) / 2; S.cam.ty += (h - lastH) / 2; }
    lastW = w; lastH = h;
    draw();
  }, 100)).observe(map);
}

function zoomedCam(factor, px, py) {
  const s1 = Math.min(6, Math.max(minScale(), S.cam.s * factor));
  return { s: s1, tx: px - ((px - S.cam.tx) * s1) / S.cam.s, ty: py - ((py - S.cam.ty) * s1) / S.cam.s };
}

// ------------------------------------------------------------------ 위치 표시줄 · 최근 기록

function renderCrumbs() {
  const v = S.view;
  const parts = [`<a href="#/">전체 우주</a>`];
  let g = null, sec = null;
  if (v.kind === "galaxy") g = S.galaxyById.get(v.id);
  if (v.kind === "section") { sec = S.sectionById.get(v.id); g = S.galaxyById.get(sec.galaxy_id); }
  if (g) parts.push(`<span class="sep">›</span>`, `<a href="#/g/${g.galaxy_id}" ${v.kind === "galaxy" ? 'aria-current="location"' : ""}>${esc(g.name)}</a>`);
  if (sec) parts.push(`<span class="sep">›</span>`, `<a href="#/s/${sec.id}" ${!S.selected ? 'aria-current="location"' : ""}>${esc(sec.title)}</a>`);
  if (S.selected && S.route.name === "term") parts.push(`<span class="sep">›</span>`, `<span aria-current="location">${esc(S.byId.get(S.selected)?.n || "")}</span>`);
  $(".crumbs").innerHTML = parts.join("");
}

const TRAIL_KEY = "atlas.trail";
function readTrail() {
  try { return JSON.parse(localStorage.getItem(TRAIL_KEY) || "[]").filter((id) => S.byId.has(id)); } catch { return []; }
}
function pushTrail(id) {
  const list = [id, ...readTrail().filter((x) => x !== id)].slice(0, 12);
  try { localStorage.setItem(TRAIL_KEY, JSON.stringify(list)); } catch { /* 저장 불가 환경 */ }
}
function renderTrail() {
  const list = readTrail();
  const el = $(".trail");
  if (!list.length) {
    el.innerHTML = `<span>최근 살펴본 용어가 여기에 쌓입니다.</span>`;
    return;
  }
  el.innerHTML = `<span>최근 탐색</span>` + list.map((id) => `<a class="chip" href="#/t/${id}">${esc(S.byId.get(id).n)}</a>`).join("") +
    `<button type="button" class="clear">지우기</button>`;
  $(".clear", el).addEventListener("click", () => {
    try { localStorage.removeItem(TRAIL_KEY); } catch { /* 무시 */ }
    renderTrail();
  });
}

// ------------------------------------------------------------------ 목록 보기 (접근성·모바일)

function setMode(mode) {
  S.mode = mode;
  document.body.classList.toggle("list-mode", mode === "list");
  $$("[data-mode]").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.mode === mode)));
  $(".listview").hidden = mode !== "list";
  try { localStorage.setItem("atlas.mode", mode); } catch { /* 무시 */ }
  if (mode === "list") renderList();
  else requestAnimationFrame(() => { S.cam = targetCam(S.route); draw(); });
}

function termLinks(terms) {
  return `<div class="lv-terms">${terms.map((t) => `<a href="#/t/${t.i}" ${t.i === S.selected ? 'aria-current="true"' : ""}>${esc(t.n)}</a>`).join("")}</div>`;
}

function renderList() {
  const v = S.view;
  const el = $(".listview");
  if (v.kind === "universe") {
    const tab = el.dataset.tab || "topic";
    let body;
    if (tab === "index") {
      const groups = new Map();
      for (const t of [...S.data.terms].sort((a, b) => a.n.localeCompare(b.n, "ko"))) {
        const k = initialGroup(t.n);
        if (!groups.has(k)) groups.set(k, []);
        groups.get(k).push(t);
      }
      body = `<nav class="lv-index-nav" aria-label="첫 글자">${[...groups.keys()].map((k) => `<a href="#" data-jump="ix-${esc(k)}">${esc(k)}</a>`).join("")}</nav>` +
        [...groups].map(([k, ts]) => `<h3 id="ix-${esc(k)}">${esc(k)} <span class="faint">(${ts.length})</span></h3>${termLinks(ts)}`).join("");
    } else {
      body = `<div class="lv-grid">${S.data.galaxies.map((g) => `<a class="lv-card" style="--glow:${g.color}" href="#/g/${g.galaxy_id}"><strong>${g.chapter_no}장 ${esc(g.name)}</strong><small>${esc(g.sub || "")}</small><small>절 ${(S.sectionsByGalaxy.get(g.galaxy_id) || []).length}개 · 용어 ${g.count}개</small></a>`).join("")}</div>`;
    }
    el.innerHTML = `<h2>전체 우주</h2><p class="muted">교과서 단원(은하)과 가나다순 찾아보기로 용어를 찾을 수 있습니다.</p>
      <div class="seg lv-tabs" role="group" aria-label="목록 종류"><button type="button" data-tab="topic" aria-pressed="${tab === "topic"}">단원별</button><button type="button" data-tab="index" aria-pressed="${tab === "index"}">가나다 찾아보기</button></div>${body}`;
    $$("[data-tab]", el).forEach((b) => b.addEventListener("click", () => { el.dataset.tab = b.dataset.tab; renderList(); }));
    $$("[data-jump]", el).forEach((a) => a.addEventListener("click", (e) => { e.preventDefault(); document.getElementById(a.dataset.jump)?.scrollIntoView({ block: "start" }); }));
  } else if (v.kind === "galaxy") {
    const g = S.galaxyById.get(v.id);
    el.innerHTML = `<h2>${esc(g.name)}</h2><p class="muted">${esc(g.sub || "")}</p>` +
      (S.sectionsByGalaxy.get(v.id) || []).map((s) => {
        const ts = [...S.termsBySection.get(s.id)].sort((a, b) => a.n.localeCompare(b.n, "ko"));
        return `<h3><a href="#/s/${s.id}">${esc(s.number)}절 ${esc(s.title)}</a> <span class="faint">(${ts.length})</span></h3>${s.easy_sub ? `<p class="muted">${esc(s.easy_sub)}</p>` : ""}${termLinks(ts)}`;
      }).join("");
  } else {
    const sec = S.sectionById.get(v.id);
    const ts = S.termsBySection.get(v.id) || [];
    const byItem = new Map(sec.items.map((it) => [it.id, []]));
    const rest = [];
    for (const t of ts) (byItem.get(t.it) || rest).push(t);
    el.innerHTML = `<h2>${esc(sec.title)}</h2><p class="muted">${esc(S.galaxyById.get(sec.galaxy_id).name)} · 용어 ${ts.length}개</p>` +
      sec.items.filter((it) => byItem.get(it.id).length).map((it) => `<h3>${esc(it.number)}. ${esc(it.title)}</h3>${termLinks(byItem.get(it.id).sort((a, b) => a.n.localeCompare(b.n, "ko")))}`).join("") +
      (rest.length ? `<h3>그 밖의 용어</h3>${termLinks(rest.sort((a, b) => a.n.localeCompare(b.n, "ko")))}` : "");
  }
}

// ------------------------------------------------------------------ 설명 패널

function renderPanel() {
  const r = S.route;
  detail.style.removeProperty("--glow");
  if (r.name === "term" && S.selected) return renderTerm(S.selected);
  if (r.name === "path") return renderPathPanel(r.a, r.b);
  if (r.name === "compare") return renderComparePanel(r.a, r.b);
  if (r.name === "search") return renderSearchPanel(r.q);
  if (r.name === "quiz") return renderQuizPanel(r);
  if (S.view.kind === "galaxy") renderGalaxyPanel(S.view.id);
  else if (S.view.kind === "section") renderSectionPanel(S.view.id);
  else renderIntro();
  if (S.selected) {
    const t = S.byId.get(S.selected);
    const bar = document.createElement("div");
    bar.className = "keep-sel";
    bar.style.setProperty("--glow", glow(t.g));
    bar.innerHTML = `<span><i></i>선택 유지 중 · <b>${esc(t.n)}</b></span><span><a href="#/t/${t.i}">설명 보기</a> <button type="button">선택 해제</button></span>`;
    $("button", bar).addEventListener("click", clearSelection);
    detail.prepend(bar);
  }
}

function clearSelection() {
  if (!S.selected) return;
  const v = S.view || { kind: "universe" };
  const hash = v.kind === "section" ? "#/s/" + v.id : v.kind === "galaxy" ? "#/g/" + v.id : "#/";
  go(hash, { fly: false, clear: true });
}

function renderIntro() {
  const d = S.data;
  const st = d.meta.statuses || [];
  detail.innerHTML = `<div class="intro">
    <div class="kicker">개념 우주 사용법</div>
    <h2>교과서 색인을 지도처럼 탐색해요</h2>
    <ol>
      <li><b>은하</b>는 교과서의 장(단원), <b>별자리</b>는 절, <b>별</b>은 색인에 실린 용어입니다.</li>
      <li>용어를 알면 위 검색창에, 모르면 은하의 쉬운 설명을 보고 들어가세요.</li>
      <li>별을 누르면 쉬운 뜻, 떠올려 볼 장면, 연결된 개념을 볼 수 있습니다.</li>
      <li>선은 이름이 붙은 관계만 나타냅니다. 가까이 있다고 비슷한 개념은 아닙니다.</li>
    </ol>
    ${st.includes("draft") && d.meta.show_status_badges ? `<p class="muted" style="font-size:12px">‘검수 전’ 표시가 있는 설명과 관계는 교재에서 자동으로 뽑은 초안입니다. 틀린 곳은 <a href="/feedback">오류 신고</a>로 알려 주세요.</p>` : ""}
    <div class="d-sec"><h3>은하 둘러보기</h3><div class="galaxy-list">${d.galaxies.map((g) => `<a href="#/g/${g.galaxy_id}" style="--glow:${g.color}"><span><strong>${g.chapter_no}장 ${esc(g.name)}</strong><small>${esc(g.sub || "")}</small></span><span class="cnt">${g.count}개</span></a>`).join("")}</div></div>
  </div>`;
}

function renderGalaxyPanel(gid) {
  const g = S.galaxyById.get(gid);
  detail.style.setProperty("--glow", g.color);
  const secs = S.sectionsByGalaxy.get(gid) || [];
  const top = [...S.termsByGalaxy.get(gid)].sort((a, b) => S.degree.get(b.i) - S.degree.get(a.i)).slice(0, 14);
  detail.innerHTML = `<div class="kicker">지금 살펴보는 은하</div>
    <div class="d-path">${g.chapter_no}장</div><h2>${esc(g.name)}</h2><p class="muted">${esc(g.sub || "")}</p>
    <div class="d-sec"><h3>별자리(절) ${secs.length}개</h3><div class="galaxy-list">${secs.map((s) => `<a href="#/s/${s.id}" style="--glow:${g.color}"><span><strong>${esc(s.number)}절 ${esc(s.title)}</strong>${s.easy_sub ? `<small>${esc(s.easy_sub)}</small>` : ""}</span><span class="cnt">${S.termsBySection.get(s.id).length}개</span></a>`).join("")}</div></div>
    <div class="d-sec"><h3>연결이 많은 용어</h3>${termLinks(top)}</div>
    <div class="d-actions"><a class="btn wide" href="#/">전체 우주로 돌아가기</a></div>`;
}

function renderSectionPanel(sid) {
  const sec = S.sectionById.get(sid);
  const g = S.galaxyById.get(sec.galaxy_id);
  detail.style.setProperty("--glow", g.color);
  const ts = S.termsBySection.get(sid) || [];
  const top = [...ts].sort((a, b) => S.degree.get(b.i) - S.degree.get(a.i)).slice(0, 18);
  detail.innerHTML = `<div class="kicker">지금 살펴보는 별자리</div>
    <div class="d-path"><a href="#/g/${g.galaxy_id}">${esc(g.name)}</a> › ${esc(sec.number)}절</div>
    <h2>${esc(sec.title)}</h2>${sec.easy_sub ? `<p class="muted">${esc(sec.easy_sub)}</p>` : ""}
    <p class="muted" style="font-size:12px">용어 ${ts.length}개</p>
    <div class="d-sec"><h3>이 절의 소주제</h3><p style="font-size:13px">${sec.items.map((it) => esc(it.title)).join(" · ") || "<span class='d-none'>소주제 정보 없음</span>"}</p></div>
    <div class="d-sec"><h3>연결이 많은 용어부터</h3>${termLinks(top)}</div>
    <div class="d-actions"><a class="btn" href="#/g/${g.galaxy_id}">은하로 돌아가기</a><a class="btn" href="#/">전체 우주</a></div>`;
}

function highlight(text, name) {
  const safe = esc(text);
  if (!name) return safe;
  const pat = esc(name).replace(/[.*+?^${}()|[\]\\]/g, "\\$&").replace(/\s+/g, "\\s?");
  try { return safe.replace(new RegExp(pat, "g"), (m) => `<mark>${m}</mark>`); } catch { return safe; }
}

const REL_GROUPS = [
  ["up", "상위 개념 (이 용어가 구성 요소인 개념)"],
  ["down", "하위 개념 · 구성 요소"],
  ["prev", "이전 단계"],
  ["next", "다음 단계"],
  ["informs_out", "이 개념이 자료로 쓰이는 곳"],
  ["informs_in", "이 개념의 근거가 되는 자료"],
  ["contrast", "구분해서 알아둘 개념"],
  ["related", "관련 개념"],
];

function relGroup(r) {
  if (r.type === "part_of") return r.outgoing ? "up" : "down";
  if (r.type === "precedes") return r.outgoing ? "next" : "prev";
  if (r.type === "informs") return r.outgoing ? "informs_out" : "informs_in";
  if (r.type === "contrasts_with") return "contrast";
  return "related";
}

async function getDetail(id) {
  if (!S.detailCache.has(id)) S.detailCache.set(id, api("/api/terms/" + encodeURIComponent(id)));
  try {
    return await S.detailCache.get(id);
  } catch (e) {
    S.detailCache.delete(id);
    throw e;
  }
}

async function renderTerm(id) {
  const t0 = S.byId.get(id);
  const g = termGalaxy(t0);
  detail.style.setProperty("--glow", g?.color || "");
  detail.innerHTML = `<div class="kicker">지금 살펴보는 별</div><h2>${esc(t0.n)}</h2><p class="d-none">불러오는 중…</p>`;
  let t;
  try {
    t = await getDetail(id);
  } catch (e) {
    detail.innerHTML += `<p class="d-none">설명을 불러오지 못했습니다: ${esc(e.message)}</p>`;
    return;
  }
  if (S.selected !== id) return; // 그 사이 다른 용어 선택
  const sec = t.section, item = t.item;
  const aliases = [...(t.aliases || []), ...(t.search_terms || [])];
  const groups = new Map(REL_GROUPS.map(([k]) => [k, []]));
  for (const r of t.relations) groups.get(relGroup(r)).push(r);
  const relHtml = REL_GROUPS.filter(([k]) => groups.get(k).length).map(([k, title]) => {
    const list = groups.get(k);
    const items = list.map((r, idx) => {
      const o = r.other;
      const otherG = S.galaxyById.get(o.galaxy_id);
      const where = o.galaxy_id !== t.galaxy_id ? ` · 다른 은하: ${esc(otherG?.name || "")}` : "";
      const st = r.review_status !== "confirmed" && S.data.meta.show_status_badges ? ` · <span class="badge ${r.review_status}">${STATUS_LABEL[r.review_status]}</span> ${esc(METHOD_LABEL[r.method] || "")}` : "";
      const arrow = r.type === "contrasts_with" ? "↔" : r.outgoing ? "→" : "←";
      return `<a class="neighbor" href="#/t/${o.term_id}" ${idx >= 5 ? "hidden data-more" : ""}><span class="n-name"><span>${esc(o.name)}</span><span class="dir" aria-hidden="true">${arrow}</span></span><small>${esc(r.label || REL_TYPE_LABEL[r.type])}${where}${st}</small></a>`;
    }).join("");
    return `<div class="rel-group"><h4>${title} (${list.length})</h4><div class="neighbors">${items}</div>${list.length > 5 ? `<button type="button" class="more-btn" data-expand>${list.length - 5}개 더 보기</button>` : ""}</div>`;
  }).join("");
  const fbUrl = `/feedback?term=${encodeURIComponent(t.term_id)}&page=${encodeURIComponent(location.href)}`;
  detail.innerHTML = `<div class="kicker">지금 살펴보는 별</div>
    <div class="d-path"><a href="#/g/${t.galaxy_id}">${esc(g?.name || "")}</a>${sec ? ` › <a href="#/s/${sec.toc_id}">${esc(sec.title)}</a>` : ""}${item ? ` › ${esc(item.title)}` : ""}${t.section_guess ? ` <span class="faint" title="가장 가까운 절로 배치했습니다">(배치 추정)</span>` : ""}</div>
    <h2>${esc(t.name)}${statusBadge(t.review_status)}</h2>
    <div class="d-alias">${aliases.length ? "함께 찾는 말 · " + aliases.slice(0, 6).map(esc).join(", ") : ""}</div>
    <section class="d-sec"><h3>쉬운 뜻</h3>${t.easy ? `<p>${esc(t.easy)}</p>${t.easy_method === "wireframe" ? `<span class="cite">시안 예시 설명 · 교수자 검토 전</span>` : t.easy_method === "draft" ? `<span class="cite">초안 · 교수자 검토 전</span>` : ""}` : `<p class="d-none">아직 쉬운 설명이 작성되지 않았습니다.</p>`}</section>
    ${t.example ? `<section class="d-sec"><h3>이런 장면을 떠올려 보세요</h3><p class="example">${esc(t.example)}</p></section>`
      : t.example_locked ? `<section class="d-sec"><h3>이런 장면을 떠올려 보세요</h3>${lockedHtml("사례")}</section>` : ""}
    <section class="d-sec" id="term-questions"><h3>확인 문제</h3>${S.member?.can_view ? `<p class="d-none">문제를 불러오는 중…</p>` : lockedHtml("문제")}</section>
    <section class="d-sec"><h3>연결된 개념 <span class="faint">${t.relations.length}</span></h3>${relHtml || `<p class="d-none">아직 등록된 관계가 없습니다.</p>`}</section>
    <div class="d-actions">
      <a class="btn" href="#/path/${t.term_id}">여기서 경로 찾기</a>
      <a class="btn" href="#/compare/${t.term_id}">다른 개념과 비교</a>
      <a class="btn" href="#/s/${sec?.toc_id || ""}">${esc(sec ? "이 절 전체 보기" : "단원 보기")}</a>
      <a class="btn" href="${fbUrl}">오류 신고${t.open_feedback ? ` (${t.open_feedback})` : ""}</a>
    </div>`;
  $$("[data-expand]", detail).forEach((b) => b.addEventListener("click", () => {
    $$("[data-more]", b.parentElement).forEach((x) => (x.hidden = false));
    b.remove();
  }));
  announce(`${t.name} 선택됨. ${t.easy || ""}`);
  if (S.member?.can_view) loadTermQuestions(id);
}

// ------------------------------------------------------------------ 회원 전용: 사례·문제

function lockedHtml(what) {
  const m = S.member || {};
  const next = encodeURIComponent(location.pathname + location.hash);
  return `<div class="locked">🔒 ${what}는 회원 전용입니다. <a href="/login?next=${next}">로그인</a> · <a href="/signup?next=${next}">가입 코드로 회원 가입</a></div>`;
}

async function loadTermQuestions(id) {
  const box = $("#term-questions");
  if (!box) return;
  let d;
  try { d = await api("/api/members/questions?term=" + encodeURIComponent(id)); } catch (e) {
    box.innerHTML = `<h3>확인 문제</h3><p class="d-none">${esc(e.message)}</p>`;
    return;
  }
  if (S.selected !== id || !$("#term-questions")) return;
  box.innerHTML = `<h3>확인 문제 <span class="faint">${d.questions.length}</span></h3>` +
    (d.questions.length ? "" : `<p class="d-none">이 용어로 만들 수 있는 문제가 아직 없습니다.</p>`);
  for (const q of d.questions) {
    const el = document.createElement("div");
    box.appendChild(el);
    renderQuestion(el, q, { showTermLink: false });
  }
}

/** 문제 하나를 그리고, 보기를 누르면 서버에서 채점한다. */
function renderQuestion(el, q, { showTermLink = true, onAnswer } = {}) {
  el.className = "question";
  el.innerHTML = `<p class="q-prompt">${esc(q.prompt)}</p>${q.quote ? `<blockquote class="q-quote">${esc(q.quote)}</blockquote>` : ""}
    <div class="q-choices ${q.qtype === "ox" ? "ox" : ""}">${q.choices.map((c, i) => `<button type="button" class="q-choice" data-i="${i}"><span class="q-no">${q.qtype === "ox" ? "" : i + 1}</span>${esc(c)}</button>`).join("")}</div>
    <div class="q-result" aria-live="polite"></div>`;
  $$(".q-choice", el).forEach((b) => b.addEventListener("click", async () => {
    $$(".q-choice", el).forEach((x) => (x.disabled = true));
    let r;
    try { r = await api("/api/members/answer", { method: "POST", body: { token: q.token, choice: +b.dataset.i } }); } catch (e) {
      toast(e.message, true);
      $$(".q-choice", el).forEach((x) => (x.disabled = false));
      return;
    }
    $$(".q-choice", el).forEach((x) => {
      const i = +x.dataset.i;
      if (i === r.answer) x.classList.add("right");
      else if (i === +b.dataset.i) x.classList.add("wrong");
    });
    const t = r.term_id && S.byId.get(r.term_id);
    $(".q-result", el).innerHTML = `<b class="${r.correct ? "ok" : "no"}">${r.correct ? "정답이에요!" : "아쉬워요."}</b> ${esc(r.explanation || "")}
      ${showTermLink && t ? ` <button type="button" class="more-btn" data-show="${t.i}">지도에서 ‘${esc(t.n)}’ 보기</button>` : ""}`;
    $("[data-show]", el)?.addEventListener("click", () => showOnMap(t.i));
    onAnswer?.(r);
  }));
}

/** 패널은 그대로 두고 지도에서 용어 위치만 보여 준다 */
function showOnMap(id) {
  S.selected = id;
  if (S.mode === "list") setMode("map");
  flyTo(targetCam({ name: "term" }));
}

function renderQuizPanel(r) {
  const m = S.member || {};
  if (!m.can_view) {
    detail.innerHTML = `<div class="kicker">문제 풀기</div><h2>단원별 확인 문제</h2>${lockedHtml("문제 풀기")}`;
    return;
  }
  const gopts = S.data.galaxies.map((g) => `<option value="${g.galaxy_id}"${r.galaxy === g.galaxy_id ? " selected" : ""}>${g.chapter_no}장 ${esc(g.name)}</option>`).join("");
  detail.innerHTML = `<div class="kicker">문제 풀기</div><h2>${r.wrong ? "틀린 문제 다시 풀기" : "단원별 확인 문제"}</h2>
    <p class="muted" style="font-size:12.5px">쉬운 뜻을 보고 용어를 고르거나, 용어를 보고 뜻을 고릅니다. 풀이 기록은 내 계정에서 볼 수 있어요.</p>
    <div class="row" style="margin:10px 0">
      <select class="input grow" id="qz-g" aria-label="단원"><option value="">모든 단원</option>${gopts}</select>
      <select class="input" id="qz-n" aria-label="문제 수" style="width:auto"><option>5</option><option selected>10</option><option>20</option></select>
      <button type="button" class="btn primary" id="qz-go">시작</button>
    </div>
    <div id="qz-body"></div>`;
  const start = async () => {
    const body = $("#qz-body");
    body.innerHTML = `<p class="d-none">문제를 만드는 중…</p>`;
    const g = $("#qz-g").value, n = $("#qz-n").value;
    let d;
    try { d = await api(`/api/members/quiz?n=${n}${g ? "&galaxy=" + g : ""}${r.wrong ? "&wrong_only=1" : ""}`); } catch (e) {
      body.innerHTML = `<p class="d-none">${esc(e.message)}</p>`;
      return;
    }
    if (!d.questions.length) {
      body.innerHTML = `<p class="d-none">${r.wrong ? "다시 풀 틀린 문제가 없어요. 잘했어요!" : "이 단원에서 만들 수 있는 문제가 아직 없습니다."}</p>`;
      return;
    }
    let idx = 0, score = 0;
    const show = () => {
      if (idx >= d.questions.length) {
        body.innerHTML = `<div class="qz-done"><b>${score} / ${d.questions.length}</b><span>맞혔어요</span></div>
          <div class="row"><button type="button" class="btn primary" id="qz-again">다시 풀기</button><a class="btn" href="/account">내 기록 보기</a></div>`;
        $("#qz-again").onclick = start;
        return;
      }
      body.innerHTML = `<div class="qz-progress"><span>${idx + 1} / ${d.questions.length}</span><span>맞힌 문제 ${score}</span></div><div id="qz-q"></div>
        <button type="button" class="btn" id="qz-next" hidden style="width:100%;margin-top:10px">${idx + 1 < d.questions.length ? "다음 문제" : "결과 보기"}</button>`;
      renderQuestion($("#qz-q"), d.questions[idx], {
        onAnswer: (res) => { if (res.correct) score++; $("#qz-next").hidden = false; $("#qz-next").focus(); },
      });
      $("#qz-next").onclick = () => { idx++; show(); };
    };
    show();
  };
  $("#qz-go").onclick = start;
  if (r.wrong || r.galaxy) start();
}

// ------------------------------------------------------------------ 검색

function resultRow(h, idx, activeIdx) {
  const t = h.t;
  const g = termGalaxy(t);
  const sec = S.sectionById.get(t.s);
  return `<button type="button" class="result" role="option" id="opt-${idx}" data-id="${t.i}" aria-selected="${idx === activeIdx}">
    <span><strong>${esc(t.n)}</strong> ${statusBadge(t.st)}<small>${esc(g?.name || "")}${sec ? " › " + esc(sec.title) : ""}</small></span>
    <span class="why">${esc(h.reason)}</span></button>`;
}

function initSearch() {
  const input = $("#q");
  const box = $("#results");
  let hits = [];
  let active = -1;
  const close = () => { box.hidden = true; input.setAttribute("aria-expanded", "false"); active = -1; };
  const draw = () => {
    const q = input.value.trim();
    if (!q) return close();
    hits = search(S.index, q);
    const shown = hits.slice(0, 8);
    box.innerHTML = `<div class="result-head"><span>등록된 용어·동의어·설명에서 ${hits.length}개 찾음</span><button type="button" data-close>닫기</button></div>` +
      (shown.length ? shown.map((h, i) => resultRow(h, i, active)).join("") +
        (hits.length > 8 ? `<button type="button" class="btn more" data-all>${hits.length}개 모두 보기</button>` : "")
        : `<p class="empty">일치하는 용어가 없습니다.<br>더 짧은 단어로 찾거나, 지도에서 은하(주제)를 골라 보세요.<br><a href="/feedback?page=${encodeURIComponent(location.href)}">찾는 용어가 없다면 알려 주세요</a></p>`);
    box.hidden = false;
    input.setAttribute("aria-expanded", "true");
    input.setAttribute("aria-activedescendant", active >= 0 ? "opt-" + active : "");
    announce(`${hits.length}개의 검색 결과`);
  };
  const pick = (id) => { close(); input.value = S.byId.get(id).n; go("#/t/" + id); };
  input.addEventListener("input", debounce(() => { active = -1; draw(); }, 80));
  input.addEventListener("focus", () => { if (input.value.trim()) draw(); });
  input.addEventListener("keydown", (e) => {
    if (box.hidden && e.key !== "Enter") return;
    const n = Math.min(8, hits.length);
    if (e.key === "ArrowDown") { active = (active + 1) % n; draw(); e.preventDefault(); }
    else if (e.key === "ArrowUp") { active = (active - 1 + n) % n; draw(); e.preventDefault(); }
    else if (e.key === "Escape") { close(); }
  });
  $(".search-form").addEventListener("submit", (e) => {
    e.preventDefault();
    const q = input.value.trim();
    if (!q) return;
    hits = search(S.index, q);
    if (active >= 0 && hits[active]) pick(hits[active].t.i);
    else if (hits.length === 1 || (hits[0] && hits[0].score >= 99)) pick(hits[0].t.i);
    else { close(); go("#/search/" + encodeURIComponent(q)); }
  });
  box.addEventListener("click", (e) => {
    const r = e.target.closest("[data-id]");
    if (r) return pick(r.dataset.id);
    if (e.target.closest("[data-close]")) { close(); input.focus(); }
    if (e.target.closest("[data-all]")) { close(); go("#/search/" + encodeURIComponent(input.value.trim())); }
  });
  document.addEventListener("click", (e) => { if (!e.target.closest(".search-area")) close(); });
}

function renderSearchPanel(q) {
  const hits = search(S.index, q);
  let page = 0;
  const per = 40;
  const draw = () => {
    detail.innerHTML = `<div class="kicker">검색 결과</div><h2>‘${esc(q)}’</h2><p class="muted">${hits.length}개 · 용어·동의어·검색 표현·설명 문자열에서 찾았습니다.</p>
      <div class="neighbors" style="margin-top:12px">${hits.slice(0, (page + 1) * per).map((h) => {
        const g = termGalaxy(h.t), sec = S.sectionById.get(h.t.s);
        return `<a class="neighbor" href="#/t/${h.t.i}"><span class="n-name"><span>${esc(h.t.n)}</span><span class="dir">${esc(h.reason)}</span></span><small>${esc(g?.name || "")}${sec ? " › " + esc(sec.title) : ""}</small></a>`;
      }).join("") || `<p class="d-none">일치하는 용어가 없습니다. 짧은 단어나 초성으로 다시 찾아보세요.</p>`}</div>
      ${hits.length > (page + 1) * per ? `<button type="button" class="btn" style="margin-top:10px;width:100%" data-more-results>더 보기</button>` : ""}`;
    $("[data-more-results]", detail)?.addEventListener("click", () => { page++; draw(); });
  };
  draw();
  $("#q").value = q;
}

/** 경로·비교용 작은 검색 선택기 */
function picker(el, label, id, onPick) {
  el.className = "picker";
  el.innerHTML = `<label>${esc(label)}<input class="input" type="search" autocomplete="off" placeholder="용어 검색" value="${esc(id ? S.byId.get(id)?.n || "" : "")}"></label><div class="results" hidden></div>`;
  const input = $("input", el), box = $(".results", el);
  input.addEventListener("input", debounce(() => {
    const hits = search(S.index, input.value, { limit: 8 });
    box.innerHTML = hits.map((h, i) => resultRow(h, i, -1)).join("") || `<p class="empty">일치하는 용어가 없습니다.</p>`;
    box.hidden = !input.value.trim();
  }, 80));
  box.addEventListener("click", (e) => {
    const r = e.target.closest("[data-id]");
    if (!r) return;
    box.hidden = true;
    input.value = S.byId.get(r.dataset.id).n;
    onPick(r.dataset.id);
  });
  input.addEventListener("keydown", (e) => { if (e.key === "Escape") box.hidden = true; });
}

// ------------------------------------------------------------------ 경로 찾기

function computePath(a, b, confirmedOnly = false) {
  if (!S.byId.has(a) || !S.byId.has(b)) return;
  const steps = shortestPath(S.adj, a, b, { allow: (r) => !confirmedOnly || r.st === "confirmed" });
  S.path = steps ? { steps, ids: new Set([a, ...steps.map((s) => s.to)]), rels: new Set(steps.map((s) => s.rel.i)) } : { steps: null, ids: new Set([a, b]), rels: new Set() };
}

function stepPhrase(st) {
  const r = st.rel;
  const ty = REL_TYPE_LABEL[r.ty];
  if (r.ty === "contrasts_with" || r.ty === "related_to") return `${ty}${r.l ? " · " + r.l : ""}`;
  return `${st.forward ? "→" : "←"} ${ty}${r.l ? " · " + r.l : ""}`;
}

function renderPathPanel(a, b) {
  detail.innerHTML = `<div class="kicker">경로 찾기</div><h2>두 개념은 어떻게 이어질까?</h2>
    <p class="muted" style="font-size:12.5px">등록된 관계만 따라갑니다. 직접 연결이 없으면 중간 개념을 거치는 가장 짧은 길을 보여 줍니다.</p>
    <div id="pk-a"></div><div id="pk-b"></div>
    <label class="row" style="font-size:12.5px"><input type="checkbox" id="pk-conf"> 확정된 관계만 사용</label>
    <div id="path-out" class="d-sec"></div>`;
  let A = a, B = b;
  const update = () => {
    if (A && B) go(`#/path/${A}/${B}`);
    else if (A) go(`#/path/${A}`);
  };
  picker($("#pk-a"), "출발 개념", A, (id) => { A = id; update(); });
  picker($("#pk-b"), "도착 개념", B, (id) => { B = id; update(); });
  const conf = $("#pk-conf");
  const out = $("#path-out");
  const draw = () => {
    if (!(A && B)) { out.innerHTML = `<p class="d-none">두 개념을 고르세요.</p>`; return; }
    computePath(A, B, conf.checked);
    refreshScene();
    position();
    const p = S.path;
    if (A === B) { out.innerHTML = `<p class="d-none">서로 다른 두 개념을 고르세요.</p>`; return; }
    if (!p.steps) {
      out.innerHTML = `<h3>결과</h3><p>등록된 관계로는 두 개념이 이어지지 않습니다 (최대 8단계까지 확인).</p><p class="muted" style="font-size:12.5px">관계가 있어야 한다고 생각하면 <a href="/feedback?term=${A}&page=${encodeURIComponent(location.href)}">오류 신고</a>로 알려 주세요.</p>`;
      return;
    }
    const n = p.steps.length;
    out.innerHTML = `<h3>결과 · ${n === 1 ? "직접 연결" : `${n - 1}개 개념을 거쳐 연결`}</h3>
      <ol class="path-steps"><li><a href="#/t/${A}">${esc(S.byId.get(A).n)}</a></li>${p.steps.map((st) => `<li class="edge-li"><div class="edge">${esc(stepPhrase(st))}${st.rel.st !== "confirmed" ? ` <span class="badge ${st.rel.st}">${STATUS_LABEL[st.rel.st]}</span>` : ""}</div><a href="#/t/${st.to}">${esc(S.byId.get(st.to).n)}</a> <span class="faint" style="font-size:11.5px">${esc(termGalaxy(S.byId.get(st.to))?.name || "")}</span></li>`).join("")}</ol>
      <p class="muted" style="font-size:12px;margin-top:10px">지도에서는 같은 절에 있는 경로가 노란색으로 표시됩니다.</p>`;
  };
  conf.addEventListener("change", draw);
  draw();
}

// ------------------------------------------------------------------ 비교

function renderComparePanel(a, b) {
  detail.innerHTML = `<div class="kicker">비교하기</div><h2>두 개념을 나란히</h2>
    <p class="muted" style="font-size:12.5px">헷갈리는 두 용어의 뜻, 사례, 연결을 나란히 봅니다.</p>
    <div id="cp-a"></div><div id="cp-b"></div>
    <button type="button" class="btn primary" id="cp-go" style="width:100%">비교 열기</button>
    <div class="d-sec" id="cp-suggest"></div>`;
  let A = a, B = b;
  picker($("#cp-a"), "첫 번째 개념", A, (id) => { A = id; suggest(); });
  picker($("#cp-b"), "두 번째 개념", B, (id) => { B = id; });
  $("#cp-go").addEventListener("click", () => {
    if (!A || !B || A === B) return toast("서로 다른 두 개념을 고르세요.", true);
    go(`#/compare/${A}/${B}`);
  });
  const suggest = () => {
    const el = $("#cp-suggest");
    if (!A) { el.innerHTML = ""; return; }
    const pairs = (S.adj.get(A) || []).filter((r) => r.ty === "contrasts_with");
    el.innerHTML = pairs.length ? `<h3>함께 비교하면 좋은 개념</h3><div class="neighbors">${pairs.map((r) => {
      const o = r.s === A ? r.t : r.s;
      return `<a class="neighbor" href="#/compare/${A}/${o}"><span class="n-name">${esc(S.byId.get(o).n)}</span><small>${esc(r.l || "")}</small></a>`;
    }).join("")}</div>` : "";
  };
  suggest();
}

async function openCompare(a, b) {
  const dlg = $(".compare-dialog");
  dlg.innerHTML = `<div class="cmp-head"><h2>비교하는 중…</h2></div>`;
  if (!dlg.open) dlg.showModal();
  let A, B;
  try {
    [A, B] = await Promise.all([getDetail(a), getDetail(b)]);
  } catch (e) {
    dlg.innerHTML = `<div class="cmp-head"><h2>불러오지 못했습니다</h2><button class="btn" data-close>닫기</button></div>`;
    $("[data-close]", dlg).addEventListener("click", () => dlg.close());
    return;
  }
  const direct = A.relations.filter((r) => r.other_id === b);
  const nbA = new Map(A.relations.map((r) => [r.other_id, r.other.name]));
  const shared = B.relations.filter((r) => nbA.has(r.other_id)).map((r) => r.other);
  const col = (t) => {
    const g = S.galaxyById.get(t.galaxy_id);
    return `<div class="cmp-col" style="--glow:${g?.color}">
      <div class="d-path">${esc(g?.name || "")}${t.section ? " › " + esc(t.section.title) : ""}</div>
      <h2><a href="#/t/${t.term_id}" data-close style="color:inherit">${esc(t.name)}</a> ${statusBadge(t.review_status)}</h2>
      <div class="d-alias">${esc((t.aliases || []).slice(0, 4).join(", "))}</div>
      <h3>쉬운 뜻</h3>${t.easy ? `<p>${esc(t.easy)}</p>` : `<p class="d-none">아직 작성되지 않았습니다.</p>`}
      ${t.example ? `<h3>사례</h3><p class="example">${esc(t.example)}</p>` : ""}
      <h3>연결 ${t.relations.length}개</h3><p style="font-size:12.5px">${t.relations.slice(0, 8).map((r) => esc(r.other.name)).join(", ") || "-"}</p>
    </div>`;
  };
  dlg.innerHTML = `<div class="cmp-head"><h2>${esc(A.name)} <span class="faint">vs</span> ${esc(B.name)}</h2><button type="button" class="btn" data-close autofocus>닫기</button></div>
    <div class="cmp-bridge">${direct.length ? direct.map((r) => `<b>${esc(REL_TYPE_LABEL[r.type])}</b> · ${esc(r.label || "")} ${r.review_status !== "confirmed" ? `<span class="badge ${r.review_status}">${STATUS_LABEL[r.review_status]}</span>` : ""}`).join("<br>") : "두 개념 사이에 직접 등록된 관계는 없습니다."}
      ${shared.length ? `<div class="muted" style="margin-top:4px">공통으로 연결된 개념: ${shared.map((o) => esc(o.name)).join(", ")}</div>` : ""}</div>
    <div class="cmp-grid">${col(A)}${col(B)}</div>`;
  $$("[data-close]", dlg).forEach((x) => x.addEventListener("click", () => dlg.close()));
}

$(".compare-dialog").addEventListener("close", () => {
  if (S.route.name === "compare" && S.route.b) history.replaceState(null, "", `#/compare/${S.route.a}`);
});

// ------------------------------------------------------------------ 시작

async function main() {
  initCamera();
  initSearch();
  $$("[data-mode]").forEach((b) => b.addEventListener("click", () => setMode(b.dataset.mode)));
  await load();
  let mode = "map";
  try { mode = localStorage.getItem("atlas.mode") || "map"; } catch { /* 무시 */ }
  window.addEventListener("hashchange", onRoute);
  document.addEventListener("keydown", (e) => {
    if (e.key === "Escape" && !e.target.closest("input, dialog")) {
      const v = S.view;
      if (S.selected) clearSelection();
      else if (v.kind === "section") go("#/g/" + S.sectionById.get(v.id).galaxy_id);
      else if (v.kind === "galaxy") go("#/");
    }
    if (e.key === "/" && !e.target.closest("input, textarea")) { e.preventDefault(); $("#q").focus(); }
  });
  S.view = null;
  S.cam = camFor(S.world.bounds);
  if (mode === "list") { S.mode = "list"; document.body.classList.add("list-mode"); $(".listview").hidden = false; $$("[data-mode]").forEach((b) => b.setAttribute("aria-pressed", String(b.dataset.mode === "list"))); }
  onRoute();
}

main();