/* =============================================================================
   graph_modal.css — 번뜩 v7 그래프 모달 (드래그 플로팅 창)
   v4 다크 네이비/보라 → v7 라이트 웜페이퍼 + 오렌지 리스타일
   모든 규칙은 #gm-window 하위로 스코프 → 호스트 페이지 오염 0
   ========================================================================== */

#gm-window {
  /* ── v7 디자인 토큰 (자체 보유 → 호스트 CSS 없이도 동작) ── */
  --gm-paper:    #fbfaf7;
  --gm-paper-2:  #f3f0e8;
  --gm-paper-3:  #ebe7dc;
  --gm-card:     #fffdf9;
  --gm-ink:      #14121c;
  --gm-ink-soft: #2a2636;
  --gm-faint:    #8b8694;
  --gm-orange:   #ff6a1a;
  --gm-orange-soft:#ffe4d2;
  --gm-orange-deep:#7a2e00;
  --gm-success:  #1f8a3a;
  --gm-red:      #d3402f;
  --gm-yellow:   #ffd817;
  --gm-rule:     rgba(20,18,28,.12);
  --gm-rule-soft:rgba(20,18,28,.06);
  --gm-sh-soft:  0 1px 2px rgba(20,18,28,.04), 0 8px 24px rgba(20,18,28,.06);
  --gm-sh-pop:   0 2px 6px rgba(20,18,28,.06), 0 16px 44px rgba(20,18,28,.13);
  --gm-f-body:   "Pretendard Variable","Apple SD Gothic Neo","Noto Sans KR",-apple-system,BlinkMacSystemFont,sans-serif;
  --gm-f-disp:   "Fraunces","Pretendard Variable","Apple SD Gothic Neo",serif;
  --gm-f-mono:   "JetBrains Mono",ui-monospace,"Pretendard Variable",monospace;

  position: fixed;
  z-index: 2147483000;          /* 호스트 위 어디든 */
  width: 468px;
  max-width: 94vw;
  max-height: calc(100vh - 20px);
  display: flex;
  flex-direction: column;
  background: var(--gm-paper);
  border: 1px solid var(--gm-rule);
  border-radius: 18px;
  box-shadow: var(--gm-sh-pop);
  font-family: var(--gm-f-body);
  color: var(--gm-ink);
  overflow: hidden;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;          /* 창 위 스크롤 제스처 차단 (아이패드) */
  box-sizing: border-box;
}
#gm-window *,
#gm-window *::before,
#gm-window *::after { box-sizing: border-box; }

#gm-window.gm-hidden { display: none !important; }

/* 살짝 등장 */
@keyframes gm-pop-in {
  from { opacity: 0; transform: translateY(8px) scale(.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
#gm-window.gm-anim { animation: gm-pop-in .18s cubic-bezier(.2,.8,.2,1); }

/* ── 타이틀바 (드래그 핸들) ───────────────────────────── */
#gm-titlebar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 12px 11px 16px;
  background: linear-gradient(180deg, var(--gm-card), var(--gm-paper-2));
  border-bottom: 1px solid var(--gm-rule-soft);
  cursor: grab;
  touch-action: none;
}
#gm-titlebar.gm-grabbing { cursor: grabbing; }
#gm-title {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; letter-spacing: -.01em;
  color: var(--gm-ink); white-space: nowrap;
}
#gm-title .gm-dot {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--gm-orange);
  box-shadow: 0 0 0 4px var(--gm-orange-soft);
  flex: 0 0 auto;
}
#gm-badge {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--gm-f-mono);
  font-size: 13px; color: var(--gm-orange-deep);
  background: var(--gm-orange-soft);
  border-radius: 999px;
  padding: 4px 12px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  /* max-width 제거(07-13): 220px 고정이라 긴 식이 박스 안에서 잘려 숨던 문제.
     flex:1 1 auto + min-width:0 로 타이틀바 여유 폭을 채우고, 정말 긴 식만 말줄임. */
}
#gm-badge:empty { display: none; }
/* line-height 1 → 1.15 (07-13): √·분수·지수 등 키 큰 수식의 위/아래가 잘리지 않게 */
#gm-badge .katex { font-size: 0.9em; line-height: 1.15; }
#gm-close {
  flex: 0 0 auto;
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: none; border-radius: 11px;
  background: transparent; color: var(--gm-faint);
  font-size: 22px; line-height: 1; cursor: pointer;
  transition: background .12s, color .12s;
}
#gm-close:hover { background: var(--gm-paper-3); color: var(--gm-ink); }
#gm-close:active { transform: scale(.94); }

/* ── 본문 ─────────────────────────────────────────────── */
#gm-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: 12px; display: flex; flex-direction: column; gap: 10px; -webkit-overflow-scrolling: touch; }
/* 본문 자식은 줄어들지 않음 → 그래프 박스가 눌려 찌그러지는 것 방지 (스크롤로 처리) */
#gm-body > * { flex: 0 0 auto; }

/* 그래프 표시 박스 (흰 카드) */
#gm-display {
  position: relative;
  background: var(--gm-card);
  border: 1px solid var(--gm-rule-soft);
  border-radius: 12px;
  overflow: hidden;
  height: 264px;
  box-shadow: var(--gm-sh-soft);
  transition: height .22s cubic-bezier(.2,.8,.2,1);
}
#gm-window.gm-3d #gm-display { height: 392px; }
#gm-graph-canvas, #gm-student-canvas {
  display: block; position: absolute; top: 0; left: 0;
  width: 100%; height: 100%;
}
#gm-student-canvas { cursor: default; pointer-events: none; touch-action: none; }
#gm-window.gm-draw #gm-student-canvas { cursor: crosshair; pointer-events: auto; }
#gm-revolution-3d {
  display: none; position: absolute; inset: 0;
  background: var(--gm-paper-2);
}
#gm-window.gm-3d #gm-revolution-3d { display: block; }

/* 3D 모드 안내 핀 */
#gm-3d-hint {
  position: absolute; left: 10px; bottom: 10px;
  font-family: var(--gm-f-mono); font-size: 10px;
  color: var(--gm-faint); background: rgba(251,250,247,.86);
  border: 1px solid var(--gm-rule-soft); border-radius: 8px;
  padding: 3px 8px; pointer-events: none; display: none;
}
#gm-window.gm-3d #gm-3d-hint { display: block; }

/* ── 툴바 (버튼 줄) ───────────────────────────────────── */
.gm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; }
.gm-btn {
  font-family: var(--gm-f-body);
  font-size: 13px; font-weight: 600; line-height: 1;
  color: var(--gm-ink-soft);
  background: var(--gm-paper-2);
  border: 1px solid var(--gm-rule-soft);
  border-radius: 11px;
  padding: 0 13px; height: 38px;
  display: inline-flex; align-items: center; gap: 6px;
  cursor: pointer; white-space: nowrap;
  /* 07-13: 좁은 폭에서 버튼이 줄어들며 라벨('정답 숨김'→'정답 숨')이 잘리던 문제.
     내용 폭 보장 + 안 줄어들게(넘치면 gm-toolbar가 flex-wrap으로 줄바꿈). */
  flex: 0 0 auto; min-width: max-content;
  transition: background .12s, color .12s, border-color .12s, transform .05s;
}
.gm-btn:hover { background: var(--gm-paper-3); }
.gm-btn:active { transform: scale(.96); }
.gm-btn .gm-i { font-size: 14px; }
.gm-btn.gm-on {                      /* 활성(토글 on) */
  background: var(--gm-orange); color: #fff;
  border-color: var(--gm-orange);
  box-shadow: 0 2px 8px rgba(255,106,26,.32);
}
.gm-btn.gm-danger { color: var(--gm-red); }
.gm-btn.gm-danger:hover { background: #fbe6e2; }
.gm-btn.gm-primary {                 /* 채워진 액션 (회전체 그리기) */
  background: var(--gm-ink); color: var(--gm-paper);
  border-color: var(--gm-ink);
}
.gm-btn.gm-primary:hover { background: var(--gm-ink-soft); }
.gm-btn.gm-play {
  background: var(--gm-success); color: #fff; border-color: var(--gm-success);
}
.gm-btn.gm-grow { flex: 1 1 auto; justify-content: center; }
.gm-spacer { flex: 1 1 auto; }

/* ── 범위 컨트롤 (x/y min~max + nudge) ───────────────── */
.gm-ranges {
  display: flex; flex-direction: column; align-items: stretch; gap: 7px;
  padding: 9px 10px;
  background: var(--gm-paper-2);
  border: 1px solid var(--gm-rule-soft);
  border-radius: 12px;
}
.gm-range-row { display: flex; flex-direction: row; align-items: center; gap: 8px; }
.gm-range-row .gm-reset { margin-left: auto; }   /* ↺는 y줄 오른쪽 끝 */
.gm-range-lab {
  font-family: var(--gm-f-mono); font-size: 12px; font-weight: 600;
  color: var(--gm-faint); padding: 0 2px;
}
.gm-range-tilde { color: var(--gm-rule); font-size: 12px; }
.gm-stepper { display: flex; flex-direction: row; align-items: center; }
.gm-stepper button {
  width: 24px; height: 26px; padding: 0; line-height: 1;
  font-size: 10px; color: var(--gm-orange-deep);
  background: var(--gm-orange-soft); border: none; cursor: pointer;
}
.gm-stepper button:first-child { border-radius: 8px 0 0 8px; }
.gm-stepper button:last-child  { border-radius: 0 8px 8px 0; }
.gm-stepper button:active { background: var(--gm-orange); color: #fff; }
.gm-stepper input {
  width: 40px; height: 26px;
  border: 1px solid var(--gm-rule); border-left: none; border-right: none;
  background: var(--gm-card); color: var(--gm-ink);
  font-family: var(--gm-f-mono); font-size: 13px; text-align: center;
  outline: none; padding: 0;
}
.gm-stepper input:focus { background: #fff; }
.gm-reset {
  margin-left: auto;
  width: 38px; height: 38px; border-radius: 11px;
  border: 1px solid var(--gm-rule); background: var(--gm-card);
  color: var(--gm-faint); font-size: 17px; cursor: pointer;
  display: grid; place-items: center;
}
.gm-reset:hover { color: var(--gm-orange); border-color: var(--gm-orange-soft); }

/* ── 범례 ─────────────────────────────────────────────── */
.gm-legend {
  display: flex; align-items: center; gap: 16px;
  font-size: 12px; color: var(--gm-faint); padding: 0 2px;
}
.gm-legend b { font-weight: 600; color: var(--gm-ink-soft); }
.gm-swatch { display: inline-block; width: 14px; height: 3px; border-radius: 2px; vertical-align: middle; margin-right: 6px; }

/* ── 회전체 컨트롤 (3D 모드 전용) ───────────────────── */
#gm-rev-controls { display: none; flex-direction: column; gap: 8px;
  padding: 10px 12px; background: var(--gm-paper-2);
  border: 1px solid var(--gm-rule-soft); border-radius: 12px; }
#gm-window.gm-3d #gm-rev-controls { display: flex; }
.gm-rev-axisrow { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.gm-rev-axisrow > .gm-rev-title { font-weight: 700; font-size: 13px; color: var(--gm-ink); }
.gm-axis-opt {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 14px; color: var(--gm-ink-soft); cursor: pointer;
  padding: 5px 9px; border-radius: 10px; border: 1px solid transparent;
}
.gm-axis-opt:has(input:checked) { background: var(--gm-orange-soft); border-color: var(--gm-orange); color: var(--gm-orange-deep); }
.gm-axis-opt input { width: 18px; height: 18px; accent-color: var(--gm-orange); margin: 0; }
.gm-axis-opt .gm-axeq { font-family: var(--gm-f-mono); font-weight: 600; }
.gm-axis-val {
  width: 52px; height: 32px; text-align: center;
  font-family: var(--gm-f-mono); font-size: 15px; color: var(--gm-ink);
  background: var(--gm-card); border: 1px solid var(--gm-rule);
  border-radius: 8px; outline: none;
}
.gm-axis-val:focus { border-color: var(--gm-orange); }
.gm-rev-note { font-size: 11px; color: var(--gm-faint); line-height: 1.5; }
.gm-rev-note code { font-family: var(--gm-f-mono); color: var(--gm-ink-soft); }
#gm-rev-status { font-family: var(--gm-f-mono); font-size: 11px; color: var(--gm-success); min-height: 14px; }
#gm-rev-status.gm-err { color: var(--gm-red); }

/* ── 특수점 / 점근선 (접기) ─────────────────────────── */
.gm-collapse { border: 1px solid var(--gm-rule-soft); border-radius: 12px; overflow: hidden; background: var(--gm-card); }
.gm-collapse-head {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 11px 13px; cursor: pointer; background: transparent;
  border: none; font-family: var(--gm-f-body);
  font-size: 13px; font-weight: 600; color: var(--gm-ink-soft); text-align: left;
}
.gm-collapse-head .gm-caret { transition: transform .18s; color: var(--gm-faint); font-size: 11px; }
.gm-collapse.gm-open .gm-caret { transform: rotate(90deg); }
.gm-collapse-body { display: none; padding: 4px 13px 14px; }
.gm-collapse.gm-open .gm-collapse-body { display: block; }
.gm-sp-label { font-size: 11px; font-weight: 700; color: var(--gm-faint); margin: 10px 0 7px; letter-spacing: .02em; }
.gm-sp-grid { display: grid; gap: 7px; }
.gm-sp-grid.g2 { grid-template-columns: 1fr 1fr; }
.gm-sp-grid.g3 { grid-template-columns: 1fr 1fr 1fr; }
.gm-sp-cell { background: var(--gm-paper-2); border: 1px solid var(--gm-rule-soft); border-radius: 9px; padding: 8px 9px; }
.gm-sp-cell .gm-sp-tag { font-size: 10px; font-weight: 700; margin-bottom: 3px; }
.gm-sp-cell input {
  width: 100%; background: transparent; border: none;
  border-bottom: 1px solid var(--gm-rule); color: var(--gm-ink);
  font-family: var(--gm-f-mono); font-size: 15px; outline: none; padding: 2px 0;
}
.gm-sp-cell input:focus { border-bottom-color: var(--gm-orange); }
.gm-sp-cell.gm-wide { grid-column: 1 / -1; }
.gm-apply {
  margin-top: 14px; width: 100%; height: 42px;
  border: none; border-radius: 11px;
  background: var(--gm-orange); color: #fff;
  font-family: var(--gm-f-body); font-size: 14px; font-weight: 700;
  cursor: pointer; box-shadow: 0 2px 10px rgba(255,106,26,.3);
}
.gm-apply:active { transform: scale(.985); }

/* 색 토큰 (특수점 태그) */
.gm-c-max { color: var(--gm-red); }
.gm-c-min { color: #2a6fdb; }
.gm-c-inf { color: var(--gm-success); }
.gm-c-zero{ color: var(--gm-faint); }
.gm-c-vas { color: #c75a00; }
.gm-c-has { color: #0f8a6e; }
.gm-c-oas { color: #b07400; }

/* ── 런처 버튼 (데모/툴바용, 호스트가 직접 둬도 됨) ── */
.gm-launch {
  font-family: var(--gm-f-body); font-size: 14px; font-weight: 600;
  color: var(--gm-orange-deep); background: var(--gm-orange-soft);
  border: 1px solid var(--gm-orange); border-radius: 12px;
  height: 42px; padding: 0 16px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 8px;
}
.gm-launch:hover { background: #ffd9c1; }
.gm-launch:active { transform: scale(.97); }

/* ── 좁은 화면 ───────────────────────────────────────── */
@media (max-width: 520px) {
  #gm-window { width: 94vw; border-radius: 16px; }
  #gm-display { height: 230px; }
  #gm-window.gm-3d #gm-display { height: 320px; }
}

/* ===========================================================================
   인라인 개념 그래프 (feature B) — 본문 임베드 + 파라미터 슬라이더
   =========================================================================== */
.gm-inline { margin: 18px 0; padding: 14px 16px; border: 1px solid #e6e0d3; border-radius: 12px; background: #fffdf8; }
.gm-inline-title { font-size: 13px; font-weight: 600; color: #5b5446; margin-bottom: 10px; font-family: 'JetBrains Mono', ui-monospace, monospace; letter-spacing: .02em; }
.gm-inline-cvwrap { width: 100%; }
.gm-inline-canvas { display: block; width: 100%; border-radius: 8px; background: #fdfcf9; }
.gm-inline-legend { margin-top: 9px; display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.gm-inline-legitem { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #3a342a; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.gm-inline-swatch { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }
.gm-inline-ctrls { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.gm-inline-prow { display: flex; align-items: center; gap: 12px; }
.gm-inline-plabel { flex-shrink: 0; min-width: 100px; font-size: 13px; color: #3a342a; font-family: 'JetBrains Mono', ui-monospace, monospace; }
.gm-inline-plabel b { color: #ff6a1a; font-weight: 700; }
.gm-inline-slider { flex: 1; accent-color: #ff6a1a; cursor: pointer; height: 4px; }
.gm-inline-err { color: #c0392b; font-size: 13px; padding: 10px; }
.gm-inline-plabel { flex-shrink: 0; min-width: 76px; }
.gm-inline-num { flex-shrink: 0; width: 64px; padding: 5px 7px; border: 1px solid #d8d0bf; border-radius: 7px; background: #fff; color: #14121c; font-size: 13px; font-family: 'JetBrains Mono', ui-monospace, monospace; text-align: right; }
.gm-inline-num:focus { outline: none; border-color: #ff6a1a; box-shadow: 0 0 0 3px rgba(255,106,26,.12); }
/* 그래프(개념) = 교재 정중앙 figure */
.gm-inline-host { box-sizing: border-box; max-width: 640px; margin: 16px auto; padding: 0; }
/* 캔버스(에디터/통계) 호스트 = JS가 본문 텍스트 칼럼 위치/폭(%)을 인라인으로 지정
   (여백 제외 본문 폭에 정확히 맞춤). 내부 카드는 호스트 폭을 그대로 채움. */
.tb-insert-host { box-sizing: border-box; }
.tb-insert-host > .editor-block,
.tb-insert-host > .tstat-block { margin-left: 0; margin-right: 0; max-width: none; }