/* 화면 맵 — 스크린샷들의 위계와 연결을 한 화면에서 본다. */
.map{position:fixed;inset:0;display:flex;flex-direction:column;background:#f2f4f7}

.map__bar{
  display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  padding:12px 16px;background:var(--paper);border-bottom:1px solid var(--line);
}
/* 우측 상단 현재/제안 토글이 앉을 자리 */
@media (min-width:641px){ .map__bar{padding-right:190px} }
.map__title{font-size:16px;font-weight:800;margin:0}
.map__spacer{flex:1}
.map__btn{
  border:1px solid var(--line);background:var(--paper);border-radius:9px;
  height:34px;min-width:34px;padding:0 12px;font-size:13px;font-weight:700;
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
}
.map__btn.is-on{background:var(--ink);border-color:var(--ink);color:#fff}

.map__legend{
  display:flex;gap:14px;flex-wrap:wrap;align-items:center;
  padding:8px 16px;background:var(--paper);border-bottom:1px solid var(--line);
  font-size:12px;color:var(--muted);font-weight:600;
}
.map__legend b{font-weight:700;color:var(--ink-2)}
.key{display:inline-flex;align-items:center;gap:6px}
.key__dot{width:10px;height:10px;border-radius:3px;display:inline-block}
.key__line{width:20px;height:0;border-top:2px solid var(--brand);display:inline-block}
.key__line--back{border-top-style:dashed;border-top-color:#b3bcc7}
.key__line--tab{border-top-style:dotted;border-top-color:#8a93a0}

.map__viewport{position:relative;flex:1;overflow:hidden;touch-action:none;cursor:grab}
.map__viewport.is-panning{cursor:grabbing}
.map__world{position:absolute;top:0;left:0;transform-origin:0 0}
.map__edges{position:absolute;top:0;left:0;overflow:visible}

.mapnode{
  position:absolute;box-sizing:border-box;
  border:1px solid var(--line);border-radius:12px;background:var(--paper);
  padding:12px;text-align:left;display:block;
  box-shadow:0 2px 6px rgba(0,10,20,.06);
}
.mapnode:hover{border-color:var(--brand);box-shadow:0 6px 16px rgba(40,112,255,.18)}
.mapnode__name{font-size:15px;font-weight:800}
.mapnode__file{font-size:11px;color:var(--muted);margin-top:3px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.mapnode__note{font-size:11px;color:var(--muted);margin-top:7px}
.mapnode__tag{
  position:absolute;top:10px;right:10px;
  font-size:10px;font-weight:800;border-radius:999px;padding:3px 8px;
}
.mapnode--full .mapnode__tag{background:#e9f2ff;color:var(--brand)}
.mapnode--partial .mapnode__tag{background:#fff1e4;color:#b3561d}
.mapnode--empty .mapnode__tag{background:#f0f2f5;color:var(--muted)}
.mapnode--empty{border-style:dashed}
.mapnode--start{border-color:var(--brand);box-shadow:0 0 0 3px rgba(40,112,255,.14)}

.mapframe{position:absolute;border:1px dashed #c8d0da;border-radius:16px;background:rgba(255,255,255,.55)}
.mapframe__label{position:absolute;top:-22px;left:2px;font-size:12px;font-weight:800;color:var(--muted)}