/* 모델 비교 — **3D 세 칸 가로**(MIDAS · OpenSees · Optra).

   3단 본(`shell.css`)의 `.opt3` 격자는 안 쓴다 — 변수·평면·3D 가 아니라 같은
   3D 가 셋이다. 부품(`.otools` 조작 줄 · `.otip` 작은 창 · `.okpi` · `.olegend` ·
   `.oempty` · `--m-*`)은 그대로 빌린다. 좁은 화면(1100px 아래)에서는 본과 같은
   규칙으로 **세로로 쌓는다**. */

/* 높이 — 배너·띠·윗줄·범례를 뺀 나머지. 재서 넣는다(`model-compare.js` 가
   `--navh` 를 준다 — shell.js 와 같은 이유: 배너가 한 줄 늘어나는 날 밀린다). */
.cmp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;
  height:calc(100vh - var(--navh,64px) - 44px - 46px - 40px);
  background:var(--bg-2);border-top:1px solid var(--line)}
.cmp-pane{display:flex;flex-direction:column;min-width:0;min-height:0;
  background:var(--bg);border-right:1px solid var(--line)}
.cmp-pane:last-child{border-right:0}

/* 칸 머리 — 이름 · 무엇을 그리나 한 줄 · 개수 · ΣFz 배지 · 버튼 둘(셋). */
.cmp-head{flex:none;padding:9px 12px 8px;border-bottom:1px solid var(--line);background:var(--bg-2)}
.cmp-head .h{display:flex;align-items:center;justify-content:space-between;gap:8px}
.cmp-head b{font-size:12.5px;font-weight:600;color:var(--ink)}
.cmp-head .line{margin:3px 0 0;font-size:11px;line-height:1.5;color:var(--ink-2);word-break:keep-all}
.cmp-head .meta{margin:3px 0 0;font-family:var(--mono);font-size:10.5px;letter-spacing:.04em;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* ΣFz 배지 — 세 칸이 같으면 먹, 다르면 주황(`--warn`). 색은 토큰만. */
.cmp-badge{flex:none;font-family:var(--mono);font-size:10.5px;padding:1px 7px;border-radius:2px;
  color:#fff;background:var(--ink-3)}
.cmp-badge[hidden]{display:none}
.cmp-badge.warn{background:var(--warn)}

/* 칸 버튼 줄 — 모델 · 결과(· 풀기) + 한 줄 알림. */
.cmp-act{display:flex;align-items:center;gap:6px;margin-top:7px;min-width:0}
.cmp-btn{flex:none;font:inherit;font-size:11.5px;line-height:1;padding:5px 9px;border-radius:2px;cursor:pointer;
  color:var(--ink);background:var(--bg);border:1px solid var(--line)}
.cmp-btn:hover{border-color:var(--ink-3)}
.cmp-btn:disabled{cursor:not-allowed;color:var(--ink-3);background:var(--bg-2)}
.cmp-msg{min-width:0;font-size:10.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cmp-msg.warn{color:var(--warn)}

.cmp-canvas{flex:1;min-height:0;position:relative;overflow:hidden}
.cmp-canvas canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none;user-select:none}
.cmp-canvas canvas.grabbing{cursor:grabbing}

/* 개체 정보 — 칸 아래 작은 영역. 누르면 켜지고 빈 곳·Esc 로 놓는다. */
.cmp-obj{flex:none;max-height:38%;overflow:auto;padding:6px 12px;border-top:1px solid var(--line);
  font-size:11.5px}
.cmp-obj[hidden]{display:none}
.cmp-obj .r{padding:2px 0}
.cmp-obj > .h{margin-bottom:3px}

/* 윗줄 — 조작 줄 부품(`.otools`)에 [변환하기] · 결과 배율 글만 더한다. */
.cmp-bar{height:46px;box-sizing:border-box;flex-wrap:nowrap;overflow:hidden}
.cmp-cv{font-weight:600;color:#fff;background:var(--brand);border-color:var(--brand)}
.cmp-cv:disabled{color:var(--ink-3);background:var(--bg-2);border-color:var(--line)}
.cmp-local{font-size:10.5px;color:var(--warn);white-space:nowrap}
.cmp-local[hidden]{display:none}
.cmp-res{font-family:var(--mono);font-size:10.5px;color:var(--ink-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;max-width:260px}
.cmp-hint{margin-left:auto;font-family:var(--mono);font-size:10px;letter-spacing:.06em;color:var(--ink-3)}
.cmp-alert{margin:8px 16px 0}
.cmp-alert[hidden]{display:none}

/* 범례 — 아래 한 줄(40px). 하중 출처는 모양으로: 찬 머리·빈 머리·파선. */
.cmp-legend{height:40px;box-sizing:border-box;align-items:center;padding:0 16px;
  border-top:1px solid var(--line);background:var(--bg)}
.olegend i.cmp-ld{width:14px;border-top:2px solid var(--brand);position:relative}
.olegend i.cmp-ld::after{content:'';position:absolute;right:-1px;top:-4px;
  border-left:6px solid var(--brand);border-top:3px solid transparent;border-bottom:3px solid transparent}
.olegend i.cmp-ld.trib::after{border-left-color:var(--bg);outline:1.5px solid var(--brand);outline-offset:-1px;border-left-width:5px}
.olegend i.cmp-ld.self{border-top-style:dashed}
.olegend i.cmp-ld.self::after{display:none}
.olegend i.cmp-sq{width:12px;height:9px;border:1px solid var(--warn);background:var(--warn);opacity:.35}
.olegend i.cmp-rs{width:14px;height:8px;border-top:1.5px solid var(--brand);background:var(--brand);opacity:.3}
.cmp-note{margin-left:auto;font-size:11px;color:var(--ink-3)}

/* 변환하기 창 — 가운데 한 장. 바탕을 눌러도 안 닫힌다(× · Esc 로 닫는다). */
.cmp-modal{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;
  padding:16px;background:rgba(20,24,28,.38)}
.cmp-modal[hidden]{display:none}
.cmp-dlg{width:min(600px,100%);max-height:calc(100vh - 32px);overflow:auto;box-sizing:border-box;
  padding:16px 18px;background:var(--bg);border:1px solid var(--line);border-radius:3px}
.cmp-dlg-h{display:flex;align-items:center;justify-content:space-between}
.cmp-dlg-h b{font-size:14px;font-weight:600;color:var(--ink)}
.cmp-x{font:inherit;font-size:18px;line-height:1;padding:2px 6px;cursor:pointer;color:var(--ink-2);
  background:none;border:0}
.cmp-dlg-p{margin:10px 0 12px;font-size:12px;line-height:1.65;color:var(--ink-2);word-break:keep-all}
.cmp-dlg-p b{font-weight:500;color:var(--ink)}
.cmp-drop{display:flex;align-items:center;gap:10px;padding:14px;border:1px dashed var(--line);border-radius:3px}
.cmp-drop.over{border-color:var(--brand);background:var(--bg-2)}
.cmp-drop-t{min-width:0;font-size:11.5px;color:var(--ink-2);word-break:break-all}
.cmp-dlg-out{margin-top:12px;font-size:11.5px}
.cmp-dlg-out[hidden]{display:none}
.cmp-dlg-out .r{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 0}
.cmp-dlg-out .r span{min-width:0;word-break:break-all}
.cmp-dlg-f{display:flex;align-items:center;justify-content:flex-end;gap:10px;margin-top:10px}
.cmp-dlg-f .cmp-msg{margin-right:auto;white-space:normal}
/* 붙여넣기 칸 — 모델 글·결과 JSON. 고정폭, 줄바꿈 안 한다(글이 길다). */
.cmp-paste{display:block;width:100%;box-sizing:border-box;margin-top:10px;padding:8px 10px;
  font-family:var(--mono);font-size:11px;line-height:1.5;white-space:pre;overflow:auto;resize:vertical;
  color:var(--ink);background:var(--bg-2);border:1px solid var(--line);border-radius:3px}
/* 주 버튼 — [해석하기] · [세 칸에 띄우기] · [붙여넣은 결과 넣기]. */
.cmp-go{flex:none;font:inherit;font-size:11.5px;font-weight:600;line-height:1;padding:5px 11px;border-radius:2px;
  cursor:pointer;color:#fff;background:var(--brand);border:1px solid var(--brand)}
.cmp-go:disabled{cursor:not-allowed;color:var(--ink-3);background:var(--bg-2);border-color:var(--line)}
/* 실행 방법 — 차례. */
.cmp-steps{margin:0 0 4px;padding-left:20px;font-size:12px;line-height:1.7;color:var(--ink-2)}
.cmp-steps li{margin:3px 0}
.cmp-steps b{font-weight:600;color:var(--ink)}
.cmp-steps code,.cmp-dlg-p code{font-family:var(--mono);font-size:11px;padding:0 3px;background:var(--bg-2);word-break:break-all}
/* 조건 비교 — 세 칸 표. 다른 줄은 주황(`--warn`), 대지 않는 줄(값에 녹아 셀 수 없는 것)은 흐리게. */
.cmp-dlg-wide{width:min(980px,100%)}
.cmp-cond-wrap{margin-top:10px;overflow-x:auto}
.cmp-cond{width:100%;border-collapse:collapse;font-size:11.5px;line-height:1.5}
.cmp-cond th,.cmp-cond td{padding:5px 8px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);word-break:keep-all}
.cmp-cond thead th{font-weight:600;color:var(--ink)}
.cmp-cond tbody th{font-weight:500;color:var(--ink-2);white-space:nowrap}
.cmp-cond td{font-family:var(--mono);font-size:11px;color:var(--ink)}
.cmp-cond tr.warn th,.cmp-cond tr.warn td{color:var(--warn)}
.cmp-cond tr.info td{color:var(--ink-3)}

/* 좁은 화면 — 세로로 쌓고 바깥 스크롤을 돌려준다(본과 같은 문턱 1100px). */
@media(max-width:1100px){
  body.opt{overflow:auto}
  .cmp{grid-template-columns:1fr;height:auto}
  .cmp-pane{border-right:0;border-bottom:1px solid var(--line);height:min(70vh,560px)}
  .cmp-bar{height:auto;flex-wrap:wrap}
  .cmp-hint,.cmp-note{display:none}
  .cmp-legend{height:auto;padding:8px 16px;flex-wrap:wrap}
}