/* ① 설계·정책 › 🧩 학파 선택(핵심 프레임) — 지금 학파·로직 흐름 띠·학파 카드·요약표·옵션 버튼(라디오)·적용 전 미리보기. */
.so-section { display: grid; gap: 14px; }
.so-item { display: grid; gap: 12px; }
.so-effect, .so-source { margin: 0; color: var(--text-sub); }
.so-options { display: grid; gap: 8px; }
.so-option { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--border-box-purple); border-radius: 12px; background: var(--bg-card-inner); cursor: pointer; }
.so-option:hover { border-color: var(--neon-cyan); }
.so-option.is-current { border-color: color-mix(in srgb, var(--neon-lime) 55%, transparent); }
.so-option input { margin-top: 5px; width: 18px; height: 18px; accent-color: var(--neon-pink); }
.so-option-body { display: grid; gap: 4px; min-width: 0; }
.so-option-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.so-option-note { color: var(--text-sub); }
.so-schools { margin-top: 2px; }
.so-literature { color: var(--text-muted); font-size: 11pt; line-height: 1.45; }
.so-preview:empty { display: none; }
.so-preview { display: grid; gap: 6px; padding: 10px 12px; border: 1px dashed var(--neon-yellow); border-radius: 10px; }
.so-preview small { color: var(--text-sub); }
.so-examples { margin: 0; padding-left: 1.2em; display: grid; gap: 4px; }
.so-log-list { margin: 0; padding-left: 1.2em; display: grid; gap: 6px; }
.so-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.so-actions button:disabled { opacity: .5; cursor: not-allowed; }
.so-log-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
#so-status[data-tone="warn"] { color: var(--neon-yellow); }
.so-now { display: grid; gap: 6px; }
.so-now-name { font-size: 12pt; color: var(--text-pure); }
.so-step { margin: 6px 0 0; font-size: 12pt; color: var(--text-pure); }
.so-step small { margin-left: 6px; color: var(--text-muted); font-size: 11pt; font-weight: 400; }
.so-step .lo-badge-row { display: inline-flex; margin-left: 8px; vertical-align: middle; }

/* 로직 흐름 띠 */
.so-flow { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 0; padding: 0; list-style: none; }
.so-flow-stage { position: relative; display: grid; gap: 3px; padding: 8px 12px; border: 1px solid var(--border-box-purple); border-radius: 10px; background: var(--bg-card-inner); }
.so-flow-stage + .so-flow-stage::before { content: '→'; position: absolute; left: -18px; top: 50%; transform: translateY(-50%); color: var(--text-muted); }
.so-flow-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.so-flow-stage small { color: var(--text-muted); font-size: 11pt; }

/* 학파 카드 — 누르면 값을 초안으로만 채운다 */
.so-schools-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.so-school { display: grid; gap: 6px; align-content: start; padding: 12px; border: 1px solid var(--border-box-purple); border-radius: 12px; background: var(--bg-card-inner); color: var(--text-sub); font: inherit; text-align: left; cursor: pointer; }
.so-school:hover { border-color: var(--neon-cyan); }
.so-school.is-current { border-color: color-mix(in srgb, var(--neon-lime) 60%, transparent); }
.so-school.is-draft { border-color: var(--neon-yellow); border-style: dashed; }
.so-school-head { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.so-school-head b { color: var(--text-pure); font-size: 12pt; }
.so-school-note { line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.so-school-tools { color: var(--text-sub); font-size: 11pt; }
.so-school-bundle { display: grid; gap: 2px; padding-top: 6px; border-top: 1px dashed var(--border-box-purple); }
.so-school-bundle small { color: var(--text-muted); font-size: 11pt; }

/* 학파 초안 바 — 카드를 누르면 적용 전 미리보기와 [학파 적용]이 여기 나온다 */
.so-draft { display: grid; gap: 8px; }
.so-draft[hidden] { display: none; }

/* 요약표 — 행마다 접이식, 칩 두 개(계산 상태 · 학파 근거) */
.so-row-head { display: grid; grid-template-columns: minmax(9em, 1.1fr) 9.5em 9.5em minmax(0, 2fr); gap: 8px 12px; align-items: center; }
.so-rows { display: grid; gap: 6px; }
.so-row { border: 1px solid var(--border-box-purple); border-radius: 10px; background: var(--bg-card-inner); }
.so-row-head { padding: 9px 12px; cursor: pointer; list-style: none; }
.so-row-head::-webkit-details-marker { display: none; }
.so-row-label { color: var(--text-pure); }
.so-row-label::before { content: '▸ '; color: var(--neon-cyan); }
.so-row[open] > .so-row-head .so-row-label::before { content: '▾ '; }
.so-row-value { color: var(--text-sub); overflow-wrap: anywhere; }
.so-row-body { display: grid; gap: 10px; padding: 0 12px 12px; }
.so-school-values { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.so-school-values li { display: flex; flex-wrap: wrap; gap: 2px 10px; padding: 4px 10px; border-radius: 8px; color: var(--text-sub); }
.so-school-values li.is-current { background: color-mix(in srgb, var(--neon-lime) 10%, transparent); }
.so-school-values li.is-unknown span { color: var(--text-muted); }
.so-school-values b { color: var(--text-pure); }
.so-school-values small { color: var(--text-muted); font-size: 11pt; }
.so-revert { margin-left: 8px; padding: 2px 10px; font-size: 11pt; }
@media (max-width: 768px) {
  .so-row-head { display: flex; flex-wrap: wrap; }
  .so-row-label { flex: 1 0 100%; }
  .so-row-value { flex: 1 0 100%; }
  .so-flow { gap: 8px; }
  .so-flow-stage + .so-flow-stage::before { display: none; }
  .so-flow-stage { flex: 1 1 100%; }
}

.nudge-basis { display: grid; gap: 4px; margin: 0 0 8px; color: var(--text-sub); }
.nudge-basis small { color: var(--text-muted); font-size: 11pt; line-height: 1.5; }

/* 명리 4개 뷰의 운영 기준과 편집 학파 메뉴 */
.flow-baseline { margin-left: 18px; max-width: 100%; padding: 5px 12px; border: 1px solid color-mix(in srgb, var(--neon-cyan) 60%, transparent); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--neon-cyan) 10%, var(--bg-card-inner)); color: var(--text-pure); font: inherit; font-size: 11pt; font-weight: 700; line-height: 1.5; text-align: left; overflow-wrap: anywhere; cursor: pointer; }
.flow-baseline:hover { border-style: dashed; }
.flow-baseline.is-custom { border-color: var(--neon-yellow); background: color-mix(in srgb, var(--neon-yellow) 12%, var(--bg-card-inner)); }
.flow-baseline[hidden], .flow-school-menu[hidden] { display: none; }
.flow-school-menu { position: fixed; z-index: 1100; box-sizing: border-box; width: 300px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow-y: auto; padding: 6px; border: 1px solid var(--border-box-purple); border-radius: var(--radius-sm); background: var(--bg-card-inner); box-shadow: 0 8px 24px var(--shadow-deep); color: var(--text-pure); font-size: 11pt; }
.flow-school-item { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; box-sizing: border-box; width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--radius-sm); background: transparent; color: var(--text-pure); font: inherit; font-size: 11pt; line-height: 1.5; text-align: left; text-decoration: none; overflow-wrap: anywhere; cursor: pointer; }
.flow-school-item:hover, .flow-school-item[aria-checked="true"] { background: color-mix(in srgb, var(--neon-cyan) 12%, var(--bg-card-inner)); }
.flow-baseline:focus-visible, .flow-school-item:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: -2px; }
.flow-school-mark { color: var(--text-sub); font-size: 11pt; }
.flow-school-link { margin-top: 4px; border-top-color: var(--border-box-purple); }
@media (max-width: 768px) {
  .topbar-flow { flex-wrap: wrap; overflow-x: visible; }
  .topbar-flow .flow-step { font-size: 11pt; }
  .flow-baseline { margin-left: auto; padding: 4px 10px; }
}

/* 편집 학파에서 미사용인 폴더만 표시한다. */
.mb-school-use { padding: 0 2px; gap: 2px; white-space: nowrap; cursor: help; border-color: transparent; background: transparent; }
.mb-node-head { position: relative; }
.mb-node-head > .mb-school-use { position: absolute; right: 2px; top: 50%; transform: translateY(-50%); }
.mb-node-head > .mb-school-use.is-inline, .mb-node-head > .mb-school-use.is-wrap { position: static; transform: none; margin-left: auto; }

/* 명리구조도: 읽기 설정 · 명리 층 · 구분. */
.sg-host { display: grid; gap: 10px; }
#so-grid .lo-badge.is-root { --admin-badge-accent: var(--neon-cyan); }
#so-grid .lo-badge.is-trunk { --admin-badge-accent: var(--neon-yellow); }
#so-grid .lo-badge.is-branch { --admin-badge-accent: var(--neon-lime); }
#so-grid .lo-badge.is-fruit { --admin-badge-accent: var(--neon-pink); }
#subtab-logic-schools .lo-badge, #so-grid .lo-badge, #subtab-logic-board .mb-school-use { font-size: 11pt !important; }
.sg-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.sg-search { flex: 1 1 240px; min-height: 40px; padding: 6px 14px; border: 1px solid var(--border-box-purple); border-radius: var(--radius-pill); background: var(--bg-card-inner); color: var(--text-pure); font: inherit; font-size: 11pt; }
.sg-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.sg-filter { min-height: 36px; padding: 4px 12px; border: 1px solid var(--border-box-purple); border-radius: var(--radius-pill); background: transparent; color: var(--text-sub); font: inherit; font-size: 11pt; cursor: pointer; }
.sg-filter[aria-pressed="true"] { border-color: var(--neon-cyan); background: color-mix(in srgb, var(--neon-cyan) 12%, transparent); color: var(--neon-cyan); font-weight: 700; }
.sg-summary { color: var(--text-sub); font-size: 11pt; }
.sg-reset-all[hidden] { display: none; }
.sg-wrap { overflow-x: auto; border: 1px solid var(--border-box-purple); border-radius: 12px; }
.sg-table { width: 100%; min-width: 880px; border-collapse: separate; border-spacing: 0; font-size: 11pt; }
.sg-th { padding: 9px 12px; text-align: left; vertical-align: bottom; background: var(--bg-card-inner); color: var(--text-pure); }
.sg-th b { display: inline; margin-right: 6px; font-size: 11.5pt; }
.sg-th:nth-child(1) { width: 24%; }
.sg-th:nth-child(2) { width: 28%; }
.sg-th:nth-child(3) { width: 20%; }
.sg-th:nth-child(4) { width: 28%; }
.sg-bucket th { padding: 8px 12px; text-align: left; border-top: 1px solid var(--border-box-purple); background: color-mix(in srgb, var(--neon-cyan) 7%, var(--bg-card-inner)); color: var(--neon-cyan); font-size: 11pt; }
.sg-cell { padding: 6px 12px; border-top: 1px solid var(--border-box-purple); vertical-align: middle; color: var(--text-sub); }
.sg-name { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.sg-item .sg-name { padding-left: 30px; }
.sg-label { color: var(--text-pure); }
.sg-toggle { width: 32px; height: 32px; border: 0; background: transparent; color: var(--neon-cyan); font-size: 12pt; cursor: pointer; }
.sg-toggle:focus-visible, .sg-switch:focus-visible, .sg-filter:focus-visible, .sg-reset:focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; }
.sg-row.is-direct > .sg-cell:first-child { box-shadow: inset 3px 0 0 var(--neon-yellow); }
.sg-row.is-inactive .sg-state { color: var(--text-muted); }
.sg-row.is-inactive .sg-switch { opacity: .5; }
.sg-switch-line { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; }
.sg-state { color: var(--text-pure); }
.sg-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sg-switch { display: inline-flex; align-items: center; justify-content: center; min-width: 52px; min-height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.sg-switch:disabled { cursor: not-allowed; opacity: .55; }
.sg-track { position: relative; width: 44px; height: 24px; border: 2px solid var(--text-muted); border-radius: 999px; background: transparent; transition: background-color .15s, border-color .15s; }
.sg-knob { position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-muted); transition: transform .15s, background-color .15s; }
.sg-switch.is-on .sg-track { border-color: var(--neon-lime); background: color-mix(in srgb, var(--neon-lime) 22%, transparent); }
.sg-switch.is-on .sg-knob { transform: translateX(20px); background: var(--neon-lime); }
.sg-switch.is-unknown .sg-track { border-style: dashed; }
.sg-switch[aria-busy="true"] .sg-track { opacity: .6; }
.sg-reset { padding: 2px 10px; border: 1px solid var(--neon-yellow); border-radius: var(--radius-pill); background: transparent; color: var(--neon-yellow); font: inherit; font-size: 11pt; cursor: pointer; }
.sg-reset:disabled { opacity: .5; cursor: not-allowed; }
.sg-none, .sg-muted { color: var(--text-muted); }
.sg-empty { padding: 18px 12px; color: var(--text-muted); text-align: center; }
.sg-detail td { padding: 0 12px 12px; background: color-mix(in srgb, var(--bg-card-inner) 70%, transparent); }
.sg-detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px; }
.sg-block { display: grid; gap: 4px; align-content: start; padding: 10px 12px; border: 1px dashed var(--border-box-purple); border-radius: 10px; }
.sg-block-title { color: var(--text-pure); }
.sg-line { margin: 0; color: var(--text-sub); overflow-wrap: anywhere; }
.sg-warn { color: var(--neon-yellow); }
.sg-default { margin-right: 10px; white-space: nowrap; }
@media (max-width: 768px) {
  .sg-table { min-width: 0; }
  .sg-table, .sg-table tbody, .sg-table tr, .sg-table td, .sg-table th { display: block; }
  .sg-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .sg-row { border-top: 1px solid var(--border-box-purple); padding: 6px 0; }
  .sg-cell { border-top: 0; padding: 4px 12px; }
  .sg-cell[data-label]:not(.sg-name)::before { content: attr(data-label); display: block; color: var(--text-muted); font-size: 11pt; }
  .sg-item .sg-name { padding-left: 24px; }
  .sg-toggle { width: 44px; height: 44px; }
  .sg-th:nth-child(n) { width: auto; }
  .sg-search { flex-basis: 100%; }
}
/* 명리 층 뱃지는 한 줄에 모은다. */
.sg-chips-edit { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.sg-host, .sg-toolbar, .sg-wrap, .sg-search, .sg-block { min-width: 0; }
.sg-cell { overflow-wrap: anywhere; }
.sg-detail-grid { grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); }
@media (prefers-reduced-motion: reduce) { .sg-track, .sg-knob { transition: none; } }

/* 🌡 강도 표현 — 항목별 단계 대응표와 임계값 */
.in-thresholds { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 10px 0; }
.in-thresholds label { display: inline-flex; align-items: center; gap: 6px; color: var(--text-sub); font-size: 11pt; }
.in-thresholds input { width: 84px; min-height: 40px; }
.in-service { margin: 14px 0 0; }
.in-service h4 { margin: 0 0 6px; color: var(--text-pure); font-size: 12pt; }
.in-table { width: 100%; border-collapse: collapse; font-size: 11pt; }
.in-table th, .in-table td { padding: 6px 10px; border-top: 1px solid var(--border-box-purple); text-align: left; vertical-align: middle; }
.in-table th { color: var(--text-muted); font-weight: 600; }
.in-steps { display: flex; flex-wrap: wrap; gap: 4px 6px; }
.in-step { display: inline-flex; align-items: center; gap: 4px; padding: 2px 6px; border: 1px solid var(--border-box-purple); border-radius: 10px; }
.in-step small { color: var(--text-muted); font-size: 11pt; }
.in-step select { min-height: 32px; padding: 0 6px; }
.in-row.is-off { opacity: .6; }
@media (max-width: 768px) { .in-table, .in-table tbody, .in-table tr, .in-table td, .in-table th { display: block; } .in-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); } .in-row { border-top: 1px solid var(--border-box-purple); padding: 6px 0; } .in-table td { border-top: 0; } }

/* 야자시 옵션: 같은 자시의 자정 전후 날짜 기준을 나란히 읽는다. */
.so-date-basis { width: 100%; margin-top: .6rem; border-collapse: collapse; font-size: 11pt; }
.so-date-basis caption { text-align: left; margin-bottom: .3rem; color: var(--text-muted); }
.so-date-basis th, .so-date-basis td { padding: .3rem .4rem; text-align: left; border-bottom: 1px solid var(--border-color, rgba(128,128,128,.2)); }