/* ② 개념·구성 첫 화면 — 레이어 관계도와 팝업. 값은 JS가 layer_map 데이터로 채운다. */
.lm-wrap { display: grid; gap: 16px; min-width: 0; }
.lm-lead { margin: 0; color: var(--text-sub); }
.lm-header { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 10px 16px; margin-bottom: 16px; }
.lm-header .lm-lead { flex: 1 1 320px; min-width: 0; }
.lm-header .lm-jump { flex: 0 1 auto; white-space: normal; }
.lm-stack { display: grid; gap: 10px; min-width: 0; }

.lm-group { display: grid; gap: 8px; padding: 12px; border: 2px dashed var(--border-box-purple); border-radius: 16px; background: color-mix(in srgb, var(--bg-box) 60%, transparent); min-width: 0; }
.lm-group.is-fruit { border-color: color-mix(in srgb, var(--neon-pink) 70%, transparent); }
.lm-group.is-branch { border-color: color-mix(in srgb, var(--neon-lime) 70%, transparent); }
.lm-group.is-trunk { border-style: solid; border-color: color-mix(in srgb, var(--neon-yellow) 70%, transparent); }
.lm-group.is-root, .lm-group.is-fixed { border-style: solid; border-color: color-mix(in srgb, var(--neon-cyan) 65%, transparent); }
.lm-group.is-trunk.is-fixed { border-color: color-mix(in srgb, var(--neon-yellow) 70%, transparent); }
.lm-group.has-parallel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.lm-group.has-parallel .lm-group-head { grid-column: 1 / -1; }
.lm-group-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.lm-group-label { font-size: 12pt; }
.lm-group-note { color: var(--text-sub); font-size: 11pt; }

.lm-layer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 4px 14px; width: 100%; padding: 12px 14px; border: 1px solid var(--border-box-purple); border-radius: 12px; background: var(--bg-card-inner); color: var(--text-pure); font: inherit; text-align: left; cursor: pointer; }
.lm-layer:hover, .lm-layer:focus-visible { border-color: var(--neon-cyan); }
.lm-layer.is-fixed { border-width: 2px; }
.lm-layer-emoji { font-size: 28pt; line-height: 1; }
.lm-layer-main { display: grid; gap: 2px; min-width: 0; }
.lm-name-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; }
.lm-layer-name { font-size: 12pt; }
.lm-layer-code, .lm-layer-line, .lm-link-label, .lm-lead { font-size: 11pt; }
body.admin-shell .lm-wrap .lo-badge { font-size: 11pt !important; }
.lm-layer-code { color: var(--text-muted); font-weight: 600; }
.lm-layer-line, .lm-layer-role { color: var(--text-sub); }
.lm-layer-side { display: grid; justify-items: end; gap: 4px; }
.lm-layer-hint { color: var(--neon-cyan); font-size: 11pt; white-space: nowrap; }

.lm-link { display: grid; justify-items: center; gap: 2px; color: var(--text-sub); }
.lm-link-line { width: 2px; height: 12px; background: var(--neon-cyan); }

.lm-side-box { display: grid; gap: 10px; }
.lm-side-title { margin: 0; font-size: 12pt; }
.lm-side-role { margin: 0; color: var(--text-sub); }
.lm-side-links { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.lm-holds { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }

.lm-facts { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 16px; margin: 0; }
.lm-facts dt { color: var(--text-sub); font-weight: 700; }
.lm-facts dd { margin: 0; min-width: 0; }

.lm-dialog { width: min(1240px, 96vw); max-width: none; max-height: 94dvh; margin: auto; padding: 0; border: 0; background: transparent; color: var(--text-pure); overflow: visible; }
.lm-dialog.lm-info { width: min(720px, 96vw); }
.lm-dialog::backdrop { background: rgba(4, 2, 18, .58); }
html[data-theme="light"] .lm-dialog-panel { --bg-box: var(--bg-card); }
.lm-dialog-panel { display: flex; flex-direction: column; max-height: 94dvh; border: 1px solid var(--border-box-purple); border-radius: 16px; background: var(--bg-box); overflow: hidden; }
.lm-dialog-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-box-purple); }
.lm-dialog-head h3 { margin: 0; font-size: 13pt; }
.lm-dialog-body { overflow-y: auto; padding: 16px 18px 24px; display: grid; grid-auto-rows: max-content; align-content: start; gap: 14px; min-width: 0; overscroll-behavior: contain; }
.lm-brief { border: 1px solid var(--border-box-purple); border-radius: 12px; padding: 8px 12px; background: var(--bg-card-inner); }
.lm-brief summary { cursor: pointer; font-weight: 700; }
.lm-brief .lm-facts { margin-top: 10px; }
.lm-info-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.lm-info-top .lm-layer-role { margin: 0; }
.lm-dialog-foot { display: flex; justify-content: flex-end; padding: 0 18px 16px; }
.lm-dialog-foot:empty { display: none; }

@media (max-width: 860px) {
  .lm-group.has-parallel { grid-template-columns: minmax(0, 1fr); }
  .lm-layer { grid-template-columns: auto minmax(0, 1fr); }
  .lm-layer-side { grid-column: 1 / -1; grid-auto-flow: column; justify-content: space-between; justify-items: start; }
  .lm-facts { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .lm-facts dd { margin-bottom: 8px; }
  .lm-dialog, .lm-dialog.lm-info { width: 100vw; max-height: 100dvh; height: 100dvh; }
  .lm-dialog-panel { max-height: 100dvh; height: 100dvh; border-radius: 0; }
}