/* ══════════════════════════════════════════════════════════════════
   페이지 이동 패널 (2026-08-16) — nav_panel.js 와 짝

   색은 tokens.css 변수를 쓰되 **대체값을 함께 적는다**.
   mml_editor.css는 tokens.css를 `@import`로 가져오므로 현재는 네 페이지 다
   변수를 쓸 수 있지만, 나중에 어느 페이지가 토큰을 안 싣더라도 패널이
   읽을 수 없게 되면 안 된다(이동 수단 자체가 사라진다).
   ══════════════════════════════════════════════════════════════════ */

#nav-panel {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 9500;                 /* 토스트(10002)·로딩막(10001)보다 아래, 일반 UI보다 위 */
  background: var(--bg-2, #141822);
  border: 1px solid var(--line-strong, #323a4f);
  border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, .35);
  font-size: 12px;
  font-family: var(--font-sans, system-ui, sans-serif);
  overflow: hidden;
  user-select: none;
  max-width: 190px;
}

/* 손잡이 줄 — 여기를 잡고 끈다 */
#nav-panel .navp-grip {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 8px;
  background: var(--bg-3, #1b2030);
  border-bottom: 1px solid var(--line, #262c3a);
  color: var(--ink-2, #7f8898);
  cursor: move;
}
#nav-panel .navp-dots { color: var(--ink-3, #535b6c); letter-spacing: 1px; }
#nav-panel .navp-title { font-size: 11px; }

/* 접기 버튼 — ⛔"완전히 끄기"가 아니다. 접어도 손잡이는 남아 돌아올 길이 있다 */
#nav-panel .navp-fold {
  margin-left: auto;
  background: transparent;
  border: none;
  color: var(--ink-2, #7f8898);
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 0 2px;
  position: relative;                /* ↓ 아래 ::after 의 기준점 */
}
/* ★누를 수 있는 넓이를 넓힌다 — **글자 크기는 그대로 두고 판정 범위만** 키운다.
   실측: 글자만 8.7×14px(121px²)로 권장치(24×24=576px²)의 1/5뿐이었고,
   빗나가면 접기가 아니라 드래그가 됐다(2026-08-16 유저: "클릭이 잘 안돼").
   ⛔`min-width/min-height` 로 키우지 말 것 — 손잡이 줄이 같이 높아져 패널이 커진다.
     접는 이유가 화면을 덜 가리는 것인데 그걸 되돌리게 된다.
   ⛔`overflow:hidden`(#nav-panel) 에 잘리므로 26px 을 넘기지 말 것 —
     잘린 부분은 눈에도 안 보이고 **눌리지도 않는다**. */
#nav-panel .navp-fold::after {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 26px; height: 26px;
}
#nav-panel .navp-fold:hover { color: var(--ink-0, #eef1f7); }

#nav-panel .navp-items {
  display: flex;
  flex-direction: column;
  padding: 4px;
  gap: 1px;
}
#nav-panel .navp-item {
  display: block;
  padding: 5px 9px;
  border-radius: 5px;
  color: var(--ink-1, #b9c0cf);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
#nav-panel .navp-item:hover { background: var(--bg-4, #232a3c); color: var(--ink-0, #eef1f7); }

/* 지금 보고 있는 페이지 — 눌러도 안 움직인다(href 자체를 떼어낸다) */
#nav-panel .navp-cur {
  background: var(--accent-soft, rgba(243, 162, 91, .14));
  color: var(--accent, #f3a25b);
  font-weight: 700;
  cursor: default;
}
#nav-panel .navp-cur:hover { background: var(--accent-soft, rgba(243, 162, 91, .14)); color: var(--accent, #f3a25b); }

#nav-panel .navp-sep { height: 1px; background: var(--line, #262c3a); margin: 3px 5px; }
#nav-panel .navp-admin { color: var(--warn, #ffae3a); }

/* 신고 알림 배지 — 게시판 상단에 있던 것을 여기로 옮겼다(2026-08-16).
   상단 관리 링크를 없애면서 배지까지 사라지면 안 되기 때문. */
#nav-panel .navp-badge {
  display: inline-block;
  margin-left: 6px;
  padding: 0 6px;
  border-radius: 9px;
  background: var(--danger, #ff5d5d);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.6;
  vertical-align: middle;
}

/* 이동 아이콘 — 기본은 숨김. 펼친 상태에서는 "이동" 글자가 그 역할을 한다 */
#nav-panel .navp-navico { display: none; color: var(--ink-1, #b9c0cf); flex: none; }

/* ══ 접힌 상태 — 손잡이 줄만 남는다 ══════════════════════════════════
   ★여기가 **잃어버리지 않게 하는 유일한 방어선**이다.
   접으면 39×26px 짜리 상자 하나만 남고, 이 패널은 **드래그로 옮길 수 있어서**
   어디 뒀는지 잊으면 정말 못 찾는다. 규칙 2("완전히 끄지 말 것 — 접으면
   손잡이가 남는다")도 그 손잡이가 안 보이면 무의미해진다.

   실측 대비비(= 두 색의 밝기 차이. 1에 가까울수록 같은 색으로 보이고,
   UI 요소의 경계가 눈에 들어오려면 보통 3:1 이상이 필요하다):
     옛 테두리 `--line-strong` ↔ 페이지 배경 → 다크 1.68:1 · 라이트 1.56:1  (안 보인다)
     새 테두리 `--ink-2`       ↔ 페이지 배경 → 다크 5.27:1 · 라이트 3.94:1

   ⛔배경만 올려서 해결하려 하지 말 것 — 다크에서 `--bg-3`→`--bg-4` 는
     1.14:1 → 1.32:1 로 **거의 그대로다**. 어두운 화면에서는 색을 채우는 것보다
     테두리를 세우는 쪽이 훨씬 잘 보인다. 배경은 보조일 뿐이다.
   ⛔강조색(`--accent`)을 쓰지 말 것 — 늘 시선을 끌면 교정 화면에서 방해가 되고
     정작 중요한 안내의 무게가 사라진다 (유저 결정 2026-08-16).
   ══════════════════════════════════════════════════════════════════ */
#nav-panel.navp-folded { border-color: var(--ink-2, #7f8898); }
#nav-panel.navp-folded .navp-items { display: none; }
#nav-panel.navp-folded .navp-title { display: none; }
#nav-panel.navp-folded .navp-grip {
  border-bottom: none;
  padding: 6px 8px;
  gap: 7px;
  background: var(--bg-4, #232a3c);
}
#nav-panel.navp-folded .navp-navico { display: inline-flex; align-items: center; }
#nav-panel.navp-folded .navp-dots { color: var(--ink-2, #7f8898); }
#nav-panel.navp-folded .navp-fold { color: var(--ink-1, #b9c0cf); }

/* ★접혀 있으면 **상자 전체**가 "펼치기" 버튼이다(nav_panel.js 의 mouseup 참고).
   그래서 손 모양도 `move`가 아니라 `pointer` — 누를 수 있다는 뜻이다.
   끌기도 그대로 된다(5px 넘게 움직이면 이동으로 친다).
   ⛔펼친 상태의 `cursor: move` 를 바꾸지 말 것 — 그때 손잡이는 끄는 곳이다. */
#nav-panel.navp-folded .navp-grip { cursor: pointer; }

/* 좁은 화면: 글자를 줄이지 않는다 — 아이콘만 남기면 처음 온 사람이 못 읽는다.
   대신 패널을 조금 더 작게 만든다. */
@media (max-width: 640px) {
  #nav-panel { right: 10px; bottom: 10px; font-size: 11px; }
  #nav-panel .navp-item { padding: 4px 7px; }
}