/*!
 * Orthomap v1.0.0 — 직교 라우팅 도식 스타일 (의존성 0 — CSS 변수는 폴백 내장이라 단독 동작)
 * 카드 색은 kind 로 정한다: ext(외부)·prod(실무)·hub(허브)·mgr(관리)·exec(경영).
 */

/* ── 컨테이너·툴바 ── */
.ammap { border: 1px solid var(--hairline, #e3e7ec); border-radius: 10px; background: var(--surface, #f6f7f9); overflow: hidden; }
.ammap__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 12px; border-bottom: 1px solid var(--hairline, #e3e7ec); background: #fff; }
.ammap__hint { font-size: 11.5px; color: var(--ink-500, #64707e); flex: 1; min-width: 180px; }
.ammap__btn { font: inherit; font-size: 11.5px; font-weight: 600; color: var(--ink-700, #2a3542); background: #fff; border: 1px solid var(--hairline, #e3e7ec); border-radius: 6px; padding: 5px 11px; cursor: pointer; white-space: nowrap; }
.ammap__btn:hover { border-color: var(--ink-400, #8b95a1); }
.ammap__btn.is-on { border-color: var(--navy-700, #22456e); background: var(--navy-700, #22456e); color: #fff; }
.ammap__seg { display: inline-flex; gap: 0; }
.ammap__seg .ammap__btn { border-radius: 0; margin-left: -1px; }
.ammap__seg .ammap__btn:first-child { border-radius: 6px 0 0 6px; margin-left: 0; }
.ammap__seg .ammap__btn:last-child { border-radius: 0 6px 6px 0; }
.ammap__host { overflow-x: auto; }
.ammap__svg { display: block; width: 100%; min-width: 760px; height: auto; touch-action: auto; -webkit-user-select: none; user-select: none; }

/* ── 크게 보기 모달 ── */
.ammod { width: 100vw; max-width: 100vw; height: 100vh; max-height: 100vh; padding: 0; border: 0; background: var(--surface, #f6f7f9); }
.ammod::backdrop { background: rgba(15, 25, 40, .55); }
.ammod__bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 9px 14px; border-bottom: 1px solid var(--hairline, #e3e7ec); background: #fff; position: sticky; top: 0; z-index: 2; }
.ammod__t { font-size: 13px; font-weight: 700; color: var(--ink-800, #1b2430); }
.ammod__hint { font-size: 11.5px; color: var(--ink-500, #64707e); flex: 1; min-width: 140px; }
.ammod__body { overflow: auto; height: calc(100vh - 46px); padding: 12px; -webkit-overflow-scrolling: touch; }
.ammod__body .ammap__svg { min-width: 0; width: auto; height: auto; }

/* ── 노드(카드) ── */
.amn { cursor: grab; touch-action: none; }
.amn.is-drag { cursor: grabbing; }
.amn rect { fill: #fff; stroke: #9fb8d4; stroke-width: 1; }
.amn--ext rect { fill: #f3ece2; stroke: #c8a06a; }
.amn--prod rect { fill: #eef3f9; stroke: #9fb8d4; }
.amn--hub rect { fill: #fbf1e0; stroke: #b3771f; stroke-width: 2; }
.amn--exec rect { fill: #eceef1; stroke: #8b95a1; }
.amn--mgr rect { fill: #e7eefb; stroke: #22456e; stroke-width: 2; }
.amn__t { font-size: 12.5px; font-weight: 700; fill: #1b2430; }
.amn__s { font-size: 9.5px; fill: #64707e; }
.amn__m { font-size: 9px; fill: #3a4654; }
.amn__sep { stroke: #d8dfe8; stroke-width: 1; }
.amn:focus { outline: none; }
.amn:focus rect { stroke: #22456e; stroke-width: 2.5; stroke-dasharray: none; }

/* ── 배경 밴드(단계 띠) ── */
.amb__r { fill: #eef1f5; opacity: .55; }
.amb__r--b { fill: #e8edf3; }
.amb__r--ext { fill: #f3ece2; opacity: .5; }
.amb__r--money { fill: #e6f2ea; opacity: .6; }
.amb__t { font-size: 11px; font-weight: 700; fill: #64707e; letter-spacing: .02em; }

/* ── 엣지(선) — layer 로 색을 가른다: 기본(일)·money(자금)·cost(원가)·gov(거버넌스) ── */
.ame { stroke: #5b6675; stroke-width: 1.4; }
.ame--dash { stroke: #8b7a4a; stroke-dasharray: 4 3; }
.ame--back { stroke: #7a8494; }
.ame--money { stroke: #1f6f43; stroke-width: 2; }
.ame--cost { stroke: #2c9a5e; stroke-width: 1.5; stroke-dasharray: 5 3; }
.ame--cash { stroke-width: 3.2; }
.ame--gov { stroke: #8b95a1; stroke-dasharray: 2 4; }

/* ── 엣지 라벨 ── */
.amel__bg { fill: #fff; opacity: .92; }
.amel__t { font-size: 9.5px; font-weight: 600; fill: #3a4654; }
.amel__t.is-money { fill: #1f6f43; font-weight: 700; }
.amel__t.is-cash { font-size: 10.5px; }
.amel__t.is-todo { fill: #b3771f; font-weight: 700; }   /* ⚠ 포함 라벨 = 미배선 표시 */

/* ── 강조(클릭 시 그 노드의 경로만) ── */
.ammap__svg .is-dim { opacity: .12; transition: opacity .12s; }
.ammap__svg .ame.is-hot { stroke-width: 2.4; }
.ammap__svg .amn.is-hot rect { stroke-width: 3; }
.ammap__svg .amel.is-hot .amel__t { font-weight: 700; }
.ammap__svg.is-focus .amn { cursor: pointer; }

/* ── 더블클릭 편집 박스 ── */
.amn__editbox { display: flex; flex-direction: column; gap: 2px; justify-content: center; height: 100%; padding: 2px 5px; box-sizing: border-box; }
.amn__ei { font: inherit; border: 1px solid var(--navy-300, #9fb8d4); border-radius: 3px; text-align: center; width: 100%; box-sizing: border-box; background: #fff; color: #1b2430; }
.amn__ei--t { font-size: 12px; font-weight: 700; }
.amn__ei--s { font-size: 9.5px; }
@media (pointer: coarse) { .amn__ei { font-size: 16px; } }

/* ── 인쇄 ── */
@media print {
  .ammap, .ammap__host { overflow: visible; }
  .ammap__svg { min-width: 0; }
  .ammap__bar { display: none; }
}