/* ============================================================
   KWONMO — map.css
   워크벤치 지도(AI 협업 워크벤치) 전용. 접두 mp-.
   색은 두 판의 토큰을 그대로 쓴다 — 조간판·야간판 전환이 지도에도 그대로 먹게.
   ============================================================ */

.mp-stage {
  --mp-mono: "JetBrains Mono", Consolas, "Courier New", monospace;
  --mp-ok: var(--cat-work);
  --mp-check: var(--cat-note);
  --mp-orphan: var(--text-dim);
  --mp-edge: var(--text-dim);
  --mp-edge-soft: var(--line);
  --mp-write: var(--accent);
  --mp-event: var(--cat-work);
}
/* display 를 준 요소(패널 flex, 입력줄 flex 등)는 [hidden] 을 이긴다 — 지도 화면 안에서는 hidden 이 늘 이기게.
   이게 없어서 운영에서 빈 검토 패널이 늘 떠 있고 닫기가 안 먹었다 */
.mp-stage [hidden] { display: none !important; }

/* 관계도는 가로로 넓어야 읽힌다 — plain 레이아웃의 본문 최대폭을 푼다 */
[data-layout="plain"] .stage.mp-stage { max-width: none; }

.mp-btn {
  padding: .4rem .85rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font: inherit; font-size: .85rem; cursor: pointer;
}
.mp-btn:hover { border-color: var(--accent); color: var(--accent); }
.mp-btn:disabled { opacity: .5; cursor: default; }
.mp-btn-on { background: var(--accent); border-color: var(--accent); color: var(--bg); }
.mp-btn-on:hover { color: var(--bg); opacity: .88; }
.mp-btn-sm { padding: .2rem .5rem; font-size: .75rem; }
.mp-btn-danger { border-color: var(--danger); color: var(--danger); }

.mp-top {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-sm) var(--sp-lg);
  padding-bottom: var(--sp-md); border-bottom: var(--hairline) solid var(--line);
}
.mp-title { display: flex; align-items: baseline; gap: var(--sp-sm); flex-wrap: wrap; }
[data-layout="plain"] .stage .mp-h1 { font-family: var(--ed-display); font-size: 1.5rem; margin: 0; color: var(--text); }
.mp-build { font-family: var(--mp-mono); font-size: .72rem; color: var(--text-dim); }
.mp-views { display: flex; gap: .2rem; background: var(--surface-2); padding: .2rem; border-radius: var(--radius-sm); }
.mp-views button {
  border: 0; background: transparent; padding: .3rem .85rem; border-radius: var(--radius-sm);
  color: var(--text-mid); font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.mp-views button[aria-pressed="true"] { background: var(--surface); color: var(--text); }
.mp-stats { display: flex; flex-wrap: wrap; gap: .3rem var(--sp-md); margin-left: auto; font-size: .75rem; color: var(--text-mid); }
.mp-stats b { color: var(--text); font-variant-numeric: tabular-nums; }
.mp-stats .warn b { color: var(--mp-check); }
/* 맵반영 결과·실패 이유를 알리는 줄. 누르고 나서 바로 읽어야 해서 본문보다 작게 두지 않는다 */
.mp-status { margin: var(--sp-sm) 0 0; font-size: 1rem; line-height: 1.5; color: var(--text); }
.mp-status.is-error { color: var(--danger); }

.mp-body { display: grid; grid-template-columns: 16rem minmax(0, 1fr) 24rem; gap: var(--sp-md); padding-top: var(--sp-md); align-items: start; }
@media (max-width: 80em) { .mp-body { grid-template-columns: 15rem minmax(0, 1fr); } .mp-detail { grid-column: 1 / -1; } }
@media (max-width: 48em) { .mp-body { grid-template-columns: minmax(0, 1fr); } }

.mp-panel { background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-md); min-width: 0; }
[data-layout="plain"] .stage .mp-h2 {
  margin: 0; padding: .7rem .85rem .45rem; font-family: var(--ed-label); font-size: .7rem; font-weight: 700;
  letter-spacing: .06em; color: var(--text-dim);
}

.mp-side { display: flex; flex-direction: column; max-height: calc(100dvh - var(--header-total) - 5rem); position: sticky; top: var(--sp-sm); }
.mp-search, .mp-inline input {
  padding: .35rem .6rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: .8rem; min-width: 0;
}
.mp-search { margin: 0 .6rem .5rem; }
.mp-inline { display: flex; gap: .3rem; margin: 0 .6rem .5rem; }
.mp-inline input { flex: 1; }
.mp-list-wrap { overflow: auto; flex: 1; min-height: 8rem; }
.mp-list { list-style: none; margin: 0; padding: 0 .35rem .5rem; }
.mp-list .grp { display: block; width: 100%; padding: .6rem .5rem .2rem; font-family: var(--mp-mono); font-size: .68rem; font-weight: 700; color: var(--text-dim); overflow-wrap: anywhere; text-align: left; border: 0; background: none; }
.mp-list button.grp { cursor: pointer; }
.mp-list button.grp:hover { color: var(--accent); }
.mp-list .item {
  width: 100%; display: flex; align-items: center; gap: .5rem; text-align: left; border: 0; background: transparent;
  padding: .3rem .5rem; border-radius: var(--radius-sm); cursor: pointer; font: inherit; color: var(--text);
}
.mp-list .item:hover { background: var(--surface-2); }
.mp-list [aria-current="true"] { background: var(--surface-2); font-weight: 700; }
.mp-list .name { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: .82rem; }
.mp-list .code { font-family: var(--mp-mono); font-size: .74rem; }
.mp-list .sub { color: var(--text-dim); font-size: .68rem; font-weight: 400; }
.mp-list .kind { flex: none; width: 2.6rem; font-family: var(--mp-mono); font-size: .62rem; color: var(--text-dim); }
.mp-list .empty { padding: .5rem; font-size: .78rem; color: var(--text-dim); }

.mp-chip { display: inline-flex; align-items: center; flex: none; font-size: .68rem; font-weight: 700; padding: 0 .4rem; border-radius: 999rem; border: var(--hairline) solid currentColor; line-height: 1.6; }
.mp-chip.ok { color: var(--mp-ok); }
.mp-chip.check { color: var(--mp-check); }
.mp-chip.orphan { color: var(--mp-orphan); }

.mp-side-foot { border-top: var(--hairline) solid var(--line); max-height: 45%; overflow: auto; }
.mp-foot-item { padding: 0 .85rem .7rem; font-size: .74rem; color: var(--text-mid); display: flex; flex-direction: column; gap: .35rem; }
.mp-foot-item code, .mp-link { font-family: var(--mp-mono); font-size: .68rem; color: var(--text); overflow-wrap: anywhere; }
.mp-link { border: 0; background: none; padding: 0; cursor: pointer; text-align: left; text-decoration: underline dotted; }
.mp-link:hover { color: var(--accent); }

.mp-graph { display: flex; flex-direction: column; overflow: hidden; }
.mp-graph-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .75rem; padding: .7rem .85rem .25rem; }
.mp-where { font-size: .74rem; color: var(--text-dim); }
.mp-graph-head strong { font-family: var(--mp-mono); font-size: .92rem; overflow-wrap: anywhere; color: var(--text); }
.mp-graph-head strong.plain { font-family: inherit; }
.mp-legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: .25rem .85rem; font-size: .68rem; color: var(--text-dim); }
.mp-legend i { display: inline-block; width: 1.25rem; height: 0; vertical-align: middle; margin-right: .25rem; border-top: var(--stroke-2) solid var(--mp-edge); }
.mp-legend i.w { border-color: var(--mp-write); }
.mp-legend i.r { border-top-style: dashed; }
.mp-legend i.e { border-color: var(--mp-event); border-top-style: dotted; }
.mp-legend i.c { border-color: var(--mp-edge-soft); border-top-width: var(--hairline); }
.mp-scroll { overflow: auto; min-height: 32rem; max-height: calc(100dvh - var(--header-total) - 9rem); }
.mp-canvas { position: relative; display: inline-flex; gap: 3.5rem; padding: .5rem 1.5rem 1.5rem 1.25rem; min-width: 100%; align-items: flex-start; }
.mp-canvas svg { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.mp-col { display: flex; flex-direction: column; gap: .5rem; width: 12rem; flex: none; position: relative; z-index: 1; }
.mp-col-title { font-size: .68rem; font-weight: 700; letter-spacing: .06em; color: var(--text-dim); padding: .25rem 0 .1rem; }
.mp-node {
  display: block; width: 100%; text-align: left; cursor: pointer; font: inherit; color: var(--text);
  background: var(--surface); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); padding: .35rem .6rem .4rem;
}
.mp-node:hover { border-color: var(--text-dim); }
.mp-node .n { display: block; font-family: var(--mp-mono); font-size: .74rem; font-weight: 700; overflow-wrap: anywhere; line-height: 1.35; }
.mp-node .l { display: block; font-family: var(--mp-mono); font-size: .64rem; color: var(--text-dim); overflow-wrap: anywhere; margin-top: .1rem; }
.mp-node.member { border-color: var(--accent); box-shadow: inset 0 0 0 var(--hairline) var(--accent); }
.mp-node.center { background: var(--text); border-color: var(--text); color: var(--bg); }
.mp-node.center .l { color: inherit; opacity: .7; }
.mp-node .pins { display: flex; gap: .25rem; margin-top: .3rem; }
.mp-pin { width: .5rem; height: .5rem; border-radius: 50%; background: var(--mp-ok); }
.mp-pin.check { background: var(--mp-check); }
.mp-more { font-size: .68rem; color: var(--text-dim); padding: .1rem .25rem; }
.mp-graph-foot { padding: .5rem .85rem .7rem; font-size: .68rem; color: var(--text-dim); border-top: var(--hairline) solid var(--line); }

.mp-detail-in { padding: 0 .85rem .85rem; display: flex; flex-direction: column; gap: .85rem; }
.mp-dkind { font-size: .68rem; color: var(--text-dim); font-weight: 700; letter-spacing: .06em; }
.mp-dtitle { font-family: var(--mp-mono); font-size: .95rem; font-weight: 700; overflow-wrap: anywhere; margin: .1rem 0 0; color: var(--text); }
.mp-dtitle.plain { font-family: inherit; font-size: 1.05rem; }
.mp-loc { font-family: var(--mp-mono); font-size: .7rem; color: var(--text-mid); overflow-wrap: anywhere; }
.mp-meta { font-size: .74rem; color: var(--text-mid); }
[data-layout="plain"] .stage .mp-sec h3 { margin: 0 0 .35rem; font-size: .74rem; font-weight: 700; color: var(--text-mid); }
.mp-links { display: flex; flex-wrap: wrap; gap: .3rem; }
.mp-links button {
  border: var(--hairline) solid var(--line); background: var(--surface-2); border-radius: var(--radius-sm); color: var(--text);
  padding: .1rem .5rem; font-family: var(--mp-mono); font-size: .68rem; cursor: pointer; text-align: left; overflow-wrap: anywhere;
}
.mp-links button:hover { border-color: var(--text-dim); }
.mp-links .verb { color: var(--text-dim); margin-right: .3rem; }
.mp-links .feat { font-family: inherit; font-size: .74rem; }
.mp-links .x { margin-left: .35rem; color: var(--text-dim); }
.mp-empty { color: var(--text-dim); font-size: .74rem; }
.mp-memo { border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); padding: .5rem .6rem; background: var(--surface-2); }
.mp-memo + .mp-memo { margin-top: .5rem; }
.mp-memo-head { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; font-size: .68rem; color: var(--text-dim); margin-bottom: .25rem; }
.mp-memo p { margin: 0; font-size: .82rem; color: var(--text); white-space: pre-wrap; }
.mp-memo-btns { display: flex; gap: .3rem; margin-top: .4rem; }
.mp-form { display: flex; flex-direction: column; gap: .35rem; }
.mp-form textarea, .mp-form select, .mp-form input {
  width: 100%; padding: .35rem .5rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  background: var(--bg); color: var(--text); font: inherit; font-size: .8rem;
}
.mp-form-row { display: flex; gap: .3rem; justify-content: flex-end; }
.mp-form-row-start { justify-content: flex-start; margin-top: .4rem; }
details.mp-ai { border-top: var(--hairline) solid var(--line); padding-top: .6rem; }
details.mp-ai summary { cursor: pointer; font-size: .74rem; font-weight: 700; color: var(--text-mid); }
details.mp-ai summary span { font-weight: 400; color: var(--text-dim); }
details.mp-ai pre {
  margin: .5rem 0 0; padding: .6rem .7rem; background: var(--bg); border: var(--hairline) solid var(--line); border-radius: var(--radius-sm);
  font: .66rem/1.6 var(--mp-mono); white-space: pre; overflow: auto; max-height: 22rem; color: var(--text);
}

/* ── 변경 검토·소스 패널 (로컬 전용) ─────────────────── */
.mp-drawer {
  position: fixed; top: var(--header-total); right: 0; bottom: 0; z-index: 40;
  width: min(62rem, 64vw); display: flex; flex-direction: column;
  background: var(--surface); border-left: var(--hairline) solid var(--line);
  box-shadow: -.5rem 0 1.5rem rgba(0, 0, 0, .12);
}
@media (max-width: 48em) { .mp-drawer { width: 100vw; } }
.mp-drawer-head {
  display: flex; align-items: center; gap: var(--sp-sm) var(--sp-md); flex-wrap: wrap;
  padding: .6rem .85rem; border-bottom: var(--hairline) solid var(--line);
}
.mp-drawer-tabs { display: flex; gap: .2rem; background: var(--surface-2); padding: .2rem; border-radius: var(--radius-sm); }
.mp-drawer-tabs button {
  border: 0; background: transparent; padding: .25rem .75rem; border-radius: var(--radius-sm);
  color: var(--text-mid); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer;
}
.mp-drawer-tabs button[aria-pressed="true"] { background: var(--surface); color: var(--text); }
.mp-drawer-sub { flex: 1; min-width: 0; font-family: var(--mp-mono); font-size: .72rem; color: var(--text-dim); overflow-wrap: anywhere; }
.mp-drawer-body { flex: 1; min-height: 0; overflow: hidden; display: flex; }

.mp-rv-list { width: 15rem; flex: none; overflow: auto; border-right: var(--hairline) solid var(--line); padding: .4rem; }
.mp-rv-list button {
  width: 100%; display: block; text-align: left; border: 0; background: transparent; cursor: pointer; color: var(--text);
  padding: .35rem .5rem; border-radius: var(--radius-sm); font: inherit;
}
.mp-rv-list button:hover, .mp-rv-list button[aria-current="true"] { background: var(--surface-2); }
.mp-rv-grp { padding: .55rem .5rem .25rem; font-size: .68rem; font-weight: 700; letter-spacing: .04em; color: var(--text-dim); }
.mp-rv-list .mp-empty { padding: 0 .5rem .4rem; }
.mp-rv-since { display: flex; align-items: center; gap: .35rem; padding: 0 .5rem .4rem; font-size: .68rem; color: var(--text-dim); }
.mp-rv-since select { flex: 1; min-width: 0; padding: .15rem .3rem; border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font: inherit; font-size: .68rem; }
.mp-rv-list .n { display: block; font-family: var(--mp-mono); font-size: .74rem; font-weight: 700; overflow-wrap: anywhere; }
.mp-rv-list .s { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; font-size: .66rem; color: var(--text-dim); margin-top: .1rem; }
.mp-rv-type { font-family: var(--mp-mono); font-weight: 700; }
.mp-rv-type.add { color: var(--mp-ok); }
.mp-rv-type.modify { color: var(--mp-check); }
.mp-rv-type.remove { color: var(--danger); }
.mp-rv-main { flex: 1; min-width: 0; overflow: auto; padding: .85rem 1rem 1.5rem; display: flex; flex-direction: column; gap: .85rem; }
@media (max-width: 48em) { .mp-drawer-body { flex-direction: column; } .mp-rv-list { width: auto; max-height: 30%; border-right: 0; border-bottom: var(--hairline) solid var(--line); } }
.mp-note { font-size: .78rem; color: var(--mp-check); }

.mp-code {
  font: .72rem/1.55 var(--mp-mono); color: var(--text); background: var(--bg);
  border: var(--hairline) solid var(--line); border-radius: var(--radius-sm); overflow: auto;
}
.mp-code .row { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); }
.mp-code .no { text-align: right; padding-right: .6rem; color: var(--text-dim); user-select: none; border-right: var(--hairline) solid var(--line); }
.mp-code .tx { padding-left: .6rem; white-space: pre; }
.mp-code .row.add { background: color-mix(in srgb, var(--mp-ok) 16%, transparent); }
.mp-code .row.del { background: color-mix(in srgb, var(--danger) 14%, transparent); }
.mp-code .row.hunk .tx { color: var(--text-dim); }
.mp-code .row.in-box .no { color: var(--text); font-weight: 700; box-shadow: inset calc(-1 * var(--stroke-3)) 0 0 var(--accent); }
.mp-code .row.local .no { background: color-mix(in srgb, var(--mp-check) 22%, transparent); }
.mp-code .row.head { background: var(--surface-2); }
.mp-code .badges { grid-column: 2; display: flex; flex-wrap: wrap; gap: .25rem; padding: .1rem 0 .25rem .6rem; }
.mp-code .badges button {
  border: var(--hairline) solid var(--line); background: var(--surface); color: var(--text); border-radius: var(--radius-sm);
  padding: 0 .4rem; font: .66rem/1.6 var(--mp-mono); cursor: pointer;
}
.mp-code .badges button:hover { border-color: var(--accent); color: var(--accent); }
.mp-code .badges .v { color: var(--text-dim); margin-right: .25rem; }
.mp-code .fn { grid-column: 2; padding: .35rem .6rem .45rem; display: flex; flex-direction: column; gap: .35rem; font-family: inherit; }
.mp-code .fn-head { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; font-size: .7rem; color: var(--text-dim); }
.mp-code .fn .mp-memo { font-family: var(--ed-body); }
.mp-src { flex: 1; min-width: 0; overflow: auto; padding: .6rem .85rem 1.5rem; display: flex; flex-direction: column; gap: .5rem; }
.mp-src .mp-code { overflow: visible; }

/* ── 코딩 규칙 패널 ─────────────────────────────── */
.mp-rule-drawer {
  left: 0; right: auto; width: min(40rem, 36vw);
  border-left: 0; border-right: var(--hairline) solid var(--line);
  box-shadow: .5rem 0 1.5rem rgba(0, 0, 0, .12);
}
@media (max-width: 48em) { .mp-rule-drawer { width: 100vw; } }
.mp-rule-title { font-size: .85rem; }
.mp-rule { flex: 1; min-height: 0; overflow: auto; padding: .85rem 1.1rem 1.5rem; font-size: .82rem; line-height: 1.7; color: var(--text); }
.mp-rule h1 { font-size: 1.05rem; margin: 0 0 .5rem; }
.mp-rule h2 { font-size: .88rem; margin: 1.1rem 0 .4rem; padding-top: .6rem; border-top: var(--hairline) solid var(--line); color: var(--accent); }
.mp-rule p { margin: 0 0 .5rem; color: var(--text-mid); }
.mp-rule ul { margin: 0 0 .5rem; padding-left: 1.1rem; list-style: disc; }
.mp-rule li + li { margin-top: .25rem; }
.mp-rule code { font: .74rem var(--mp-mono); padding: 0 .25rem; background: var(--surface-2); border-radius: var(--radius-sm); overflow-wrap: anywhere; }