/* 하치위키 디자인: "하치와레의 공부 책상" */
:root {
  --blue: #4A7BD0;
  --blue-soft: #DCE8FA;
  --pink: #F29BB4;
  --pink-soft: #FDE7EE;
  --yellow: #FFD86B;
  --cream: #FFFBF5;
  --sky: #F1F6FC;
  --dot: #D6E2F0;
  --ink: #3A3A4A;
  --ink-2: #6E7380;
  --line: #C9CFDA;
  --edge: #9AA5B8;
  --white: #FFFFFF;
  --danger: #C2415B;

  --f-blue: #DCE8FA;
  --f-pink: #FDE7EE;
  --f-yellow: #FFF3C9;
  --f-mint: #DFF5EA;

  --r-card: 14px;
  --r-folder: 18px;
  --shadow: 0 2px 8px rgba(58, 58, 74, 0.08);
  --shadow-lift: 0 10px 24px rgba(58, 58, 74, 0.16);
  --ease: 150ms ease;
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Malgun Gothic', sans-serif;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--ink);
  background: var(--cream);
  display: grid;
  grid-template-rows: auto 1fr auto;
  overflow: hidden;
}
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

/* ---------- 버튼 ---------- */
.btn {
  border: 1px solid var(--line);
  background: var(--white);
  border-radius: 999px;
  padding: 7px 14px;
  cursor: pointer;
  transition: background var(--ease), border-color var(--ease), color var(--ease);
  white-space: nowrap;
  list-style: none;
}
.btn::-webkit-details-marker { display: none; }
.btn:hover { border-color: var(--blue); }
.btn.primary { background: var(--blue); border-color: var(--blue); color: var(--white); font-weight: 600; }
.btn.primary:hover { background: #3D6BBE; }
.btn.ghost { background: transparent; }
.btn.danger { color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.btn.sm { padding: 5px 10px; font-size: 12px; }

.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; background: var(--white); padding: 2px; }
.seg-btn { border: 0; background: transparent; border-radius: 999px; padding: 5px 12px; cursor: pointer; transition: background var(--ease); }
.seg-btn.on { background: var(--blue-soft); color: #2F5BA8; font-weight: 600; }

/* ---------- 위쪽 막대 ---------- */
.topbar {
  display: flex; align-items: center; gap: 16px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--white);
}
.brand { display: flex; align-items: center; gap: 8px; }
.brand-name { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; }
.search { flex: 1; max-width: 360px; }
.search input {
  width: 100%; border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 14px; background: var(--cream); outline: none;
}
.search input:focus { border-color: var(--blue); background: var(--white); }
.actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.menu { position: relative; }
.menu-pop {
  position: absolute; right: 0; top: calc(100% + 6px); z-index: 30;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
  box-shadow: var(--shadow-lift); padding: 6px; display: grid; min-width: 180px;
}
.menu-item { border: 0; background: transparent; text-align: left; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.menu-item:hover { background: var(--sky); }
.menu-item.danger { color: var(--danger); }
.tabs { display: none; }

/* ---------- 화면 배치 ---------- */
.layout { display: grid; grid-template-columns: 340px 1fr; min-height: 0; }

/* ---------- 편집 영역 ---------- */
.editor { border-right: 1px solid var(--line); background: var(--cream); overflow: auto; padding: 20px; }
.editor-empty { color: var(--ink-2); padding-top: 40px; text-align: center; }
.empty-title { font-size: 16px; font-weight: 600; color: var(--ink); }
.editor-body { display: flex; flex-direction: column; gap: 12px; }
.note-title {
  font-size: 18px; font-weight: 600; border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 12px; background: var(--white); outline: none;
}
.note-title:focus, .note-body:focus { border-color: var(--blue); }
.editor-tools { display: flex; align-items: center; justify-content: space-between; }
.save-state { font-size: 12px; color: var(--ink-2); }
.note-body {
  min-height: 260px; resize: vertical; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px; background: var(--white); outline: none; line-height: 1.6;
}
.note-preview { min-height: 260px; border: 1px solid var(--line); border-radius: 12px; padding: 4px 14px; background: var(--white); }
.editor-actions { display: flex; gap: 8px; }
.linked { border-top: 1px dashed var(--line); padding-top: 12px; }
.linked-head { font-size: 14px; margin: 0 0 6px; }
.linked-folder { margin: 0 0 6px; font-size: 12px; color: var(--ink-2); }
.linked-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.linked-list button {
  width: 100%; text-align: left; border: 1px solid transparent; background: transparent;
  border-radius: 8px; padding: 6px 8px; cursor: pointer; display: flex; gap: 8px; align-items: baseline;
}
.linked-list button:hover { background: var(--white); border-color: var(--line); }
.linked-dir { color: var(--blue); font-weight: 700; width: 14px; text-align: center; }
.linked-label { color: var(--ink-2); font-size: 12px; }
.linked-none { font-size: 12px; color: var(--ink-2); }

.md h2 { font-size: 17px; margin: 12px 0 6px; }
.md h3 { font-size: 15px; margin: 10px 0 4px; }
.md h4 { font-size: 14px; margin: 8px 0 4px; }
.md p, .md li { line-height: 1.65; }
.md code { background: var(--sky); border-radius: 4px; padding: 1px 4px; font-size: 13px; }
.md pre { background: var(--sky); border-radius: 8px; padding: 10px; overflow: auto; }
.md pre code { background: none; padding: 0; }
.md blockquote { margin: 8px 0; padding: 4px 12px; border-left: 3px solid var(--pink); background: var(--pink-soft); border-radius: 0 8px 8px 0; }
.md a { color: var(--blue); }

/* ---------- 캔버스 ---------- */
.canvas-wrap { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.viewport {
  position: absolute; inset: 0; overflow: hidden; cursor: grab; touch-action: none;
  background-color: var(--sky);
  background-image: radial-gradient(var(--dot) 1.2px, transparent 1.2px);
  background-size: 22px 22px;
}
.viewport.panning { cursor: grabbing; }
.world { position: absolute; left: 0; top: 0; transform-origin: 0 0; user-select: none; }
.edge-layer { position: absolute; left: -5000px; top: -5000px; pointer-events: none; }

.folder {
  position: absolute; border: 1.5px dashed var(--edge); border-radius: var(--r-folder); cursor: move;
  transition: border-color var(--ease), box-shadow var(--ease);
}
.folder.dragging { box-shadow: var(--shadow-lift); }
.folder.connect-target { border-style: solid; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(74, 123, 208, 0.2); }
.folder > .folder-handle { top: 22px; right: -8px; margin-top: 0; }
.folder:hover > .folder-handle { opacity: 1; }
.folder.blue { background: color-mix(in srgb, var(--f-blue) 70%, transparent); }
.folder.pink { background: color-mix(in srgb, var(--f-pink) 70%, transparent); }
.folder.yellow { background: color-mix(in srgb, var(--f-yellow) 75%, transparent); }
.folder.mint { background: color-mix(in srgb, var(--f-mint) 75%, transparent); }
.folder.drop { border-style: solid; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(74, 123, 208, 0.15); }
.folder-head { display: flex; align-items: center; gap: 6px; padding: 10px 16px 0 14px; }
.folder-name {
  flex: 1; min-width: 0; border: 0; background: transparent; font-weight: 700; font-size: 15px;
  padding: 2px 4px; border-radius: 6px; cursor: move; outline: none;
}
.folder-name:not([readonly]) { background: var(--white); cursor: text; box-shadow: 0 0 0 2px var(--blue); }
.folder-count { font-size: 12px; color: var(--ink-2); }
.folder-del {
  border: 0; background: transparent; border-radius: 999px; padding: 2px 8px; cursor: pointer;
  color: var(--ink-2); font-size: 12px;
}
.folder-del:hover { background: var(--white); color: var(--danger); }
.folder-resize {
  position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; cursor: nwse-resize;
  border-right: 2px solid var(--edge); border-bottom: 2px solid var(--edge); border-radius: 0 0 6px 0;
}

.card {
  position: absolute; background: var(--white); border: 1.5px solid var(--line); border-radius: var(--r-card);
  box-shadow: var(--shadow); padding: 12px 14px; cursor: pointer; user-select: none;
  transition: box-shadow var(--ease), border-color var(--ease), opacity var(--ease), transform var(--ease);
}
.card:hover { border-color: #AEB8C8; }
.card.selected { border: 2px solid var(--blue); background: #F7FAFF; }
.card.dragging { box-shadow: var(--shadow-lift); transform: scale(1.02); cursor: grabbing; z-index: 5; }
.card.match { box-shadow: 0 0 0 3px var(--yellow), var(--shadow); }
.card.dim { opacity: 0.35; }
.card.connect-target { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(74, 123, 208, 0.2); }
.card-title { font-weight: 600; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card-sub {
  margin-top: 6px; font-size: 12px; color: var(--ink-2); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.handle {
  position: absolute; right: -8px; top: 50%; width: 16px; height: 16px; margin-top: -8px;
  border-radius: 50%; background: var(--blue); border: 3px solid var(--white); box-shadow: var(--shadow);
  cursor: crosshair; opacity: 0; transition: opacity var(--ease), transform var(--ease);
}
.card:hover .handle, .card.selected .handle { opacity: 1; }
.handle:hover { transform: scale(1.25); }

/* 눌리는 범위는 확대 배율과 상관없이 화면에서 약 18px로 유지한다. --hit은 app.js가 배율에 맞춰 바꾼다. */
.edge-hit { fill: none; stroke: transparent; stroke-width: var(--hit, 18); pointer-events: stroke; cursor: pointer; }
.edge-line { fill: none; stroke: var(--edge); stroke-width: 2; pointer-events: none; transition: stroke var(--ease); }
.edge-line.on { stroke: var(--blue); stroke-width: 2.5; }
.edge-g:hover .edge-line { stroke: #7C88A0; }
.edge-g:hover .edge-line.on { stroke: var(--blue); }
.temp-edge { fill: none; stroke: var(--blue); stroke-width: 2; stroke-dasharray: 6 5; }
.edge-label {
  position: absolute; transform: translate(-50%, -50%); background: var(--white); border: 1px solid var(--line);
  border-radius: 999px; padding: 2px 10px; font-size: 12px; color: var(--ink-2); white-space: nowrap; cursor: pointer;
}
.edge-label.on { border-color: var(--blue); color: var(--blue); }

.zoom {
  position: absolute; left: 16px; bottom: 16px; display: flex; align-items: center; gap: 6px;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 4px 6px; box-shadow: var(--shadow);
}
.zoom .btn { border-color: transparent; }
.zoom-text { font-size: 12px; color: var(--ink-2); min-width: 40px; text-align: center; }

.edge-tools {
  position: absolute; z-index: 20; display: flex; gap: 6px; align-items: center;
  background: var(--white); border: 1px solid var(--line); border-radius: 999px; padding: 6px; box-shadow: var(--shadow-lift);
  transform: translate(-50%, -130%);
}
.edge-tools input { border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px; width: 120px; font-size: 12px; outline: none; }
.edge-tools input:focus { border-color: var(--blue); }
.edge-tools[hidden] { display: none; }

/* ---------- 하치와레 ---------- */
.hachi { position: absolute; right: 16px; bottom: 16px; display: flex; align-items: flex-end; gap: 10px; pointer-events: none; }
.bubble {
  pointer-events: auto; max-width: 280px; background: var(--pink-soft); border: 1.5px solid var(--pink);
  border-radius: 16px 16px 4px 16px; padding: 10px 14px; line-height: 1.5; box-shadow: var(--shadow);
  animation: pop 250ms ease;
}
.bubble.leaving { opacity: 0; transition: opacity 300ms ease; }
@keyframes pop { from { transform: scale(0.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.hachi-btn { pointer-events: auto; border: 0; background: transparent; padding: 0; cursor: pointer; }

/* 하치와레 그림 (저작권: 나가노 / 치이카와 제작위원회, 비상업 과제용) */
.brand-img { display: block; width: 28px; height: auto; }
.hachi-img {
  display: block; width: 64px; height: auto;
  filter: drop-shadow(0 3px 6px rgba(58, 58, 74, 0.18));
  transition: transform var(--ease);
}
.hachi-btn:hover .hachi-img { transform: translateY(-3px) rotate(-4deg); }

/* ---------- 아래쪽 막대 ---------- */
.footer {
  display: flex; gap: 16px; align-items: center; padding: 6px 16px; font-size: 12px; color: var(--ink-2);
  border-top: 1px solid var(--line); background: var(--white);
}
.health::before { content: '●'; margin-right: 4px; }
.health.ok::before { color: #3BA676; }
.health.off::before { color: var(--line); }
.footer-note { margin-left: auto; }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 899px) {
  .topbar { flex-wrap: wrap; gap: 8px; }
  .search { order: 3; max-width: none; flex-basis: 100%; }
  .actions { flex-wrap: wrap; }
  .tabs { display: flex; order: 4; gap: 6px; flex-basis: 100%; }
  .tab { flex: 1; border: 1px solid var(--line); background: var(--white); border-radius: 999px; padding: 6px; cursor: pointer; }
  .tab.on { background: var(--blue-soft); border-color: var(--blue); font-weight: 600; }
  .layout { grid-template-columns: 1fr; }
  .layout[data-view='canvas'] .editor { display: none; }
  .layout[data-view='editor'] .canvas-wrap { display: none; }
  .editor { border-right: 0; }
  .footer-note { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}