/* StudyForce 마인드맵 v2 (app/assets/mindmap2.js와 함께 쓴다)
 *
 * v1과의 차이는 하나다: 글자 높이를 미리 계산하지 않는다.
 *   - 카드에 height를 주지 않는다. 내용만큼 커진다.
 *   - 배치는 grid가 한다. gap이 간격을 보장하므로 겹칠 수가 없다.
 *   - 글자 크기는 clamp(14px, …)로 바닥을 막는다. JS가 배율을 계산하지 않는다.
 * 연결선만 배치가 끝난 뒤 실제 좌표를 재서 mindmap2.js가 그린다.
 */

.mm {
  /* 크기 토큰 — 모두 컨테이너 폭에 따라 커지되, 최솟값 아래로는 내려가지 않는다 */
  /* --stretch: 내용이 적어 세로가 허전한 지문만 mindmap2.js가 키운다(기본 1, 줄이지는 않음) */
  --gap: calc(clamp(10px, 1.45cqw, 22px) * var(--stretch, 1));
  --pad: calc(clamp(12px, 1.35cqw, 21px) * var(--stretch, 1));
  --radius: clamp(12px, 1.3cqw, 20px);
  --bw: clamp(1px, 0.13cqw, 2px);

  --fs-title: clamp(19px, 2.25cqw, 33px);
  --fs-sub: clamp(14px, 1.30cqw, 19px);
  --fs-label: clamp(15px, 1.60cqw, 24px);
  --fs-point: clamp(14px, 1.20cqw, 19px);
  --fs-chip: clamp(14px, 1.02cqw, 16px);
  --fs-ico: clamp(21px, 2.55cqw, 38px);
  --fs-hub: clamp(17px, 2.0cqw, 29px);

  --paper: #F7FAFC;
  /* 선은 카드 테두리보다 진해야 흰 바탕·인쇄에서 읽힌다 */
  --wire: #5F8497;
  --wire-tree: #3E6A80;
  --wire-warm: #C07A3E;
  --wire-accent: #3F84B0;

  container-type: inline-size;
  position: relative;
  display: grid;
  gap: var(--gap);
  padding: var(--gap);
  box-sizing: border-box;
  background: var(--paper);
  border: 1px solid #DDE7EE;
  border-radius: var(--radius);
  color: #2F3645;
  font-family: var(--mm-font, "Pretendard", "Noto Sans KR", "Malgun Gothic", Arial, sans-serif);
  line-height: 1.4;
  break-inside: avoid;
  page-break-inside: avoid;
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}
.mm *, .mm *::before, .mm *::after { box-sizing: border-box; }

/* 연결선은 카드 뒤에 깐다 */
.mm-wires { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; z-index: 0; pointer-events: none; }
.mm > *:not(.mm-wires) { position: relative; z-index: 1; }
.mm-wire { fill: none; stroke: var(--wire); stroke-linecap: round; stroke-linejoin: round; }
.mm-wire-halo { fill: none; stroke: var(--paper); stroke-linecap: round; stroke-linejoin: round; }
.mm-head-arrow { fill: var(--wire); stroke: none; }
.mm-wire.is-warm, .mm-head-arrow.is-warm { stroke: var(--wire-warm); fill: var(--wire-warm); }
.mm-wire.is-accent, .mm-head-arrow.is-accent { stroke: var(--wire-accent); fill: var(--wire-accent); }
.mm-wire.is-warm, .mm-wire.is-accent { fill: none; }
/* 방사형: 색·굵기는 JS가 카드마다 인라인으로 정한다 (카드 색을 그대로 따라가야 해서) */
.mm-wire-natural { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.mm-wire-dot { stroke: var(--paper); stroke-width: 2.5; }

/* ── 색 ── */
.mm [data-tone="yellow"] { --bg: #FFF8E6; --line: #E4B94F; --deep: #765B18; }
.mm [data-tone="blue"]   { --bg: #EEF6FF; --line: #8BBBE0; --deep: #245F8A; }
.mm [data-tone="green"]  { --bg: #ECF8F2; --line: #8CCFB0; --deep: #247554; }
.mm [data-tone="pink"]   { --bg: #FFF0F3; --line: #E4A5B4; --deep: #9A4056; }
.mm [data-tone="purple"] { --bg: #F3F0FF; --line: #B7A9E2; --deep: #6252A1; }
.mm [data-tone="orange"] { --bg: #FFF3E7; --line: #E8B47D; --deep: #9A5D27; }
.mm [data-tone="peach"]  { --bg: #FFF6ED; --line: #E8C39B; --deep: #9A6338; }
.mm [data-tone="red"]    { --bg: #FFF0EC; --line: #E5A18D; --deep: #A7543D; }
.mm [data-tone="teal"]   { --bg: #EAF8F6; --line: #8CCFC4; --deep: #236E68; }

/* ── 제목 줄 ── */
.mm-title-bar {
  display: flex; align-items: center; justify-content: center;
  gap: calc(var(--gap) * 0.7);
  padding: calc(var(--pad) * 0.55) var(--pad);
  text-align: left;
}
.mm-title-text { display: grid; min-width: 0; }
.mm-title { font-size: var(--fs-title); font-weight: 900; color: #173247; letter-spacing: -0.025em; word-break: keep-all; line-height: 1.2; }
.mm-subtitle { font-size: var(--fs-sub); color: #668193; font-weight: 500; word-break: keep-all; }

/* ── 카드 ── */
.mm-card {
  display: flex;
  flex-direction: column;
  gap: calc(var(--gap) * 0.5);
  min-width: 0;
  padding: var(--pad);
  background: #FFFFFF;
  border: var(--bw) solid var(--line, #D7E3EA);
  border-left: calc(var(--bw) * 4) solid var(--line, #D7E3EA);
  border-radius: var(--radius);
  box-shadow: 0 2px 10px rgba(35, 67, 86, 0.07);
}
.mm-head { display: flex; align-items: center; gap: calc(var(--gap) * 0.55); min-width: 0; }
.mm-ico {
  flex: none;
  font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  font-size: var(--fs-ico);
  line-height: 1.1;
}
.mm-titles { display: grid; gap: calc(var(--gap) * 0.2); min-width: 0; }
.mm-chip {
  justify-self: start;
  max-width: 100%;
  padding: 0.15em 0.7em;
  border-radius: 999px;
  background: var(--bg, #F1F6F8);
  border: 1px solid var(--line, #D6E6EC);
  color: var(--deep, #477184);
  font-size: var(--fs-chip);
  font-weight: 700;
  word-break: keep-all;
}
.mm-label {
  font-size: var(--fs-label); font-weight: 800; color: #203B4E;
  letter-spacing: -0.02em; line-height: 1.25;
  word-break: keep-all; overflow-wrap: anywhere;
}
.mm-points {
  margin: 0; padding: 0; list-style: none;
  display: grid; gap: calc(var(--gap) * 0.3);
  font-size: var(--fs-point); line-height: 1.45; font-weight: 500;
  color: #385365; word-break: keep-all;
}
.mm-points li { position: relative; min-width: 0; padding-left: 1em; overflow-wrap: anywhere; }
.mm-points li::before {
  content: ""; position: absolute; left: 0; top: 0.62em;
  width: 0.36em; height: 0.36em; border-radius: 50%;
  background: var(--deep, #76A8B8);
}
.mm-points b { font-weight: 800; color: #214D5D; background: linear-gradient(transparent 66%, #CBEAE6 66%); }

/* 설명만 담는 보조 칸 (흐름형·문제해결형 오른쪽) */
.mm-detail {
  display: flex; flex-direction: column; justify-content: center;
  min-width: 0; padding: var(--pad);
  background: #FBFDFE; border: var(--bw) dashed #C7DDE5; border-radius: var(--radius);
}

/* ── 뼈대 ① 세로 쌓기 (분류형·주장근거형·비교형) ── */
.mm-row { display: grid; gap: var(--gap); align-items: stretch; min-width: 0; }
.mm-row > * { min-width: 0; }
.mm-row-1 { justify-items: center; }
.mm-row-1 > * { width: min(100%, 78cqw); }
/* 비교형 꼬리(공통점·정리): 넓으면 위아래, 좁으면 나란히 */
.mm-tail { grid-template-columns: minmax(0, 1fr); justify-items: center; }
.mm-tail > * { width: min(100%, 78cqw); }
.mm-row-n { grid-template-columns: repeat(var(--cols, 2), minmax(0, 1fr)); }
/* 열이 4개를 넘으면 좁아져서 글자가 세로로 길어진다 — 두 줄로 접는다 */
@container (max-width: 820px) {
  .mm-row-n { grid-template-columns: repeat(var(--cols-narrow, var(--cols, 2)), minmax(0, 1fr)); }
}

/* ── 뼈대 ② 단계 나열 (흐름형·문제해결형) ── */
/* 단계 사이는 화살표가 또렷이 보일 만큼 띄운다 */
.mm-seq { display: grid; gap: var(--gap); row-gap: calc(clamp(18px, 2.2cqw, 30px) * var(--stretch, 1)); }
.mm-step { display: grid; grid-template-columns: minmax(0, 0.44fr) minmax(0, 0.56fr); gap: var(--gap); align-items: stretch; }
.mm-step > * { min-width: 0; }
/* 흐름형은 단계마다 조금씩 들여써 길처럼 보이게 한다 */
.mm-seq-zig .mm-step:nth-child(even) { margin-left: min(9cqw, 130px); }
@container (max-width: 640px) {
  .mm-step { grid-template-columns: minmax(0, 1fr); }
  .mm-seq-zig .mm-step:nth-child(even) { margin-left: 0; }
}

/* ── 뼈대 ③ 좌-중-우 (인과형) ── */
.mm-tri { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr) minmax(0, 1fr); gap: var(--gap); align-items: center; }
.mm-col { display: grid; gap: var(--gap); align-content: center; min-width: 0; }
.mm-stack { display: grid; gap: var(--gap); min-width: 0; }
/* A4 인쇄 본문은 756px다. 그보다 낮게 잡아야 인쇄에서 세로로 무너지지 않는다. */
@container (max-width: 620px) {
  .mm-tri { grid-template-columns: minmax(0, 1fr); }
}
.mm-pill {
  display: flex; align-items: center; justify-content: center; gap: calc(var(--gap) * 0.5);
  padding: calc(var(--pad) * 0.5) var(--pad);
  background: var(--bg); border: var(--bw) solid var(--line); border-radius: 999px;
  text-align: center;
}
.mm-pill .mm-label { font-size: var(--fs-label); }
.mm-pill .mm-hint { font-size: var(--fs-chip); color: #78909E; font-weight: 600; }

/* ── 뼈대 ④ 중심 + 양옆 (방사형) ── */
/* 가운데와 양옆 사이는 곡선 가지가 자연스럽게 휠 만큼 넉넉히 띄운다 */
.mm-radial { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.62fr) minmax(0, 1fr); gap: var(--gap); column-gap: clamp(44px, 6cqw, 88px); align-items: center; }
/* 칩을 없앤 만큼 카드 사이 세로 여백도 넓힌다 */
.mm-side { display: grid; gap: calc(clamp(16px, 2.4cqw, 32px) * var(--stretch, 1)); align-content: center; min-width: 0; }
@container (max-width: 620px) {
  .mm-radial { grid-template-columns: minmax(0, 1fr); }
}
.mm-hub {
  display: grid; justify-items: center; align-content: center;
  gap: calc(var(--gap) * 0.35);
  /* 완전한 원이 되도록 폭·높이를 맞춘다 — 글이 넘치지 않도록 안쪽 글은 폭을 제한해 줄바꿈한다 */
  aspect-ratio: 1 / 1;
  padding: calc(var(--pad) * 1.2);
  border-radius: 50%;
  background: linear-gradient(145deg, #173B56 0%, #285F7D 100%);
  border: calc(var(--bw) * 2.5) solid #B8DFE8;
  box-shadow: 0 6px 20px rgba(29, 84, 111, 0.24);
  text-align: center;
}
.mm-hub .mm-ico { font-size: calc(var(--fs-ico) * 1.25); }
.mm-hub-title {
  font-size: var(--fs-hub); font-weight: 900; color: #FFFFFF;
  line-height: 1.18; letter-spacing: -0.025em; word-break: keep-all;
  max-width: 84%;
}
.mm-hub-sub {
  font-size: var(--fs-chip); color: #D8EEF2; font-weight: 600; word-break: keep-all;
  /* 원 안에 자연스레 두 줄로 접히도록 폭을 좁혀 둔다 */
  max-width: 78%; line-height: 1.32;
}

/* ── 비교형 패널 ── */
.mm-panel { display: flex; flex-direction: column; gap: var(--gap); padding: var(--pad); background: #FFFFFF; border: var(--bw) solid var(--line, #D7E3EA); border-radius: var(--radius); }
.mm-panel-title { font-size: var(--fs-label); font-weight: 900; color: var(--deep, #24455B); text-align: center; word-break: keep-all; }
.mm-panel .mm-card { border-left-width: calc(var(--bw) * 3); box-shadow: none; }

/* ── 좁은 폭(A4 인쇄 756px 등)에서 세로를 줄이는 조밀 모드 ──
   여백·줄간격만 줄이고 글자 크기는 그대로 둔다. mindmap2.js가 폭을 재서 켠다. */
.mm.is-compact {
  --gap: calc(5px * var(--stretch, 1));
  --pad: calc(8px * var(--stretch, 1));
  --radius: 11px;
  /* 제목은 본문보다 커야 하지만 19px까지 필요하진 않다 (본문 바닥 14px은 그대로) */
  --fs-title: 17px;
  padding: 4px;
}
.mm.is-compact .mm-points { line-height: 1.3; gap: 1px; }
.mm.is-compact .mm-card { gap: 3px; }
.mm.is-compact .mm-title-bar { padding: 0 var(--pad); }
.mm.is-compact .mm-titles { gap: 0; }
.mm.is-compact .mm-chip { padding: 0.02em 0.55em; }
.mm.is-compact .mm-label { line-height: 1.18; }
.mm.is-compact .mm-hub { padding: calc(var(--pad) * 1); }
.mm.is-compact .mm-panel { gap: var(--gap); }
.mm.is-compact .mm-detail { padding: var(--pad) calc(var(--pad) * 1.2); }
/* 연결선이 지나는 자리만 화살표가 들어갈 만큼 띄운다.
   전부 5px로 두면 화살표가 안 보여 마인드맵이 아니라 표처럼 읽힌다.
   카드 안쪽 여백은 줄인 채로 두므로 전체 높이 부담은 지문당 20~30px 정도다. */
.mm.is-compact { row-gap: calc(14px * var(--stretch, 1)); }
.mm.is-compact .mm-seq { gap: calc(16px * var(--stretch, 1)); }
.mm.is-compact .mm-tri { column-gap: 14px; }
.mm.is-compact .mm-radial { column-gap: 36px; }
.mm.is-compact .mm-side { gap: calc(12px * var(--stretch, 1)); }
/* 인과형: 좁은 폭에서는 좌우 3단 대신 위아래 3단으로 펴서 가로를 전부 쓴다.
   원인 카드를 240px 열에 쌓는 것보다 756px에 나란히 놓는 편이 훨씬 낮다(실측). */
.mm.is-compact .mm-tri-wide { grid-template-columns: minmax(0, 1fr); row-gap: calc(14px * var(--stretch, 1)); }
.mm.is-compact .mm-tri-wide .mm-stack { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mm.is-compact .mm-tail { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 18px; }
.mm.is-compact .mm-tail > * { width: 100%; }
.mm.is-compact .mm-pill { padding: 3px var(--pad); }
.mm.is-compact .mm-pill .mm-ico { font-size: calc(var(--fs-ico) * 0.72); }
/* 단계는 좁은 폭에서도 '단계 카드 | 설명'을 나란히 둔다.
   2단씩 접어 보았더니 카드와 설명이 위아래로 쌓여 오히려 세로가 늘었다(실측 505 vs 463px). */
.mm.is-compact .mm-seq-zig .mm-step:nth-child(even) { margin-left: min(5cqw, 56px); }

/* 화면에 붙일 때 쓰는 감싸기 */
.mm-wrap { display: grid; gap: 8px; width: 100%; min-width: 0; }
.mm-note { font-size: 12px; color: #94a3b8; }
.mm-note.warn { color: #b45309; }

@media print {
  .mm { box-shadow: none; }
}

/* ── 인쇄용 빈칸 (AI 피드백 인쇄에서 '빈칸 추론'을 골랐을 때만) ── */
/* 핵심어 자리: 글자 수만큼 밑줄 빈칸 */
.mm-blank {
  display: inline-block; width: calc(var(--w, 3) * 1em + 0.8em); height: 1.15em;
  margin: 0 0.15em; vertical-align: -0.25em; border-bottom: 1.6px solid #475569;
}
.mm-label .mm-blank { width: calc(var(--w, 4) * 0.9em + 1em); }
/* 전부 빈칸: 칸 안 글 한 줄마다 쓰는 줄 */
.mm-points li.mm-line { list-style: none; height: 1.9em; margin: 0; border-bottom: 1px solid #94a3b8; }
.mm-points li.mm-line::before, .mm-points li.mm-line::marker { content: none; }
.mm-blanks-all .mm-points { padding-left: 0; }