/* 수학 계보도 — 팔레트는 science.css 변수 위에서 만든다.
   영역 4색은 계보도 전용이다. 계보 지도의 분과색(--d-*)과 섞지 않는다 —
   /element/ 가 표 전용 팔레트를 따로 둔 것과 같은 이유. */
.mathpage{
  --m-num:#6FA8DC;   /* 수와 연산 — 코발트 */
  --m-rel:#E08BC0;   /* 변화와 관계 — 오키드 */
  --m-geo:#A8C878;   /* 도형과 측정 — 라임 */
  --m-data:#62C6C9;  /* 자료와 가능성 — 터콰이즈 */
}
*{box-sizing:border-box}
body.mathpage{margin:0;min-height:100vh;background:var(--ink);-webkit-text-size-adjust:100%}
#wrap{max-width:1240px;margin:0 auto;padding:0 18px 40px}

#head{display:flex;align-items:center;gap:12px;padding:14px 0 10px;flex-wrap:wrap}
#backbtn{width:34px;height:34px;flex:0 0 auto;font-size:17px;line-height:1;color:var(--chalk);
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;padding:0;transition:.16s}
#backbtn:hover{border-color:var(--brass);color:var(--brass)}
.brandline{font-family:var(--mono);font-size:11px;letter-spacing:.18em;color:var(--brass);
  text-decoration:none}
.brandline b{color:var(--chalk);font-weight:500}
.h-sp{flex:1}
.h-lib,.h-lang{font-size:12.5px;color:var(--chalk-dim);text-decoration:none;border:1px solid var(--ink-3);
  border-radius:7px;padding:6px 11px;transition:.16s}
.h-lib:hover,.h-lang:hover{border-color:var(--brass);color:var(--brass)}

.pg-h{font-family:var(--disp);font-weight:700;font-size:31px;color:var(--chalk);
  margin:18px 0 14px;line-height:1.32}
.pg-sub{font-size:14.5px;line-height:1.85;color:var(--chalk-dim);word-break:keep-all;margin:0 0 22px;
  max-width:74ch}
.pg-sub b{color:var(--chalk);font-weight:600}
.s-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--brass);
  margin:0 0 12px}
section{margin-bottom:36px;padding-bottom:30px;border-bottom:1px solid var(--ink-3)}

/* ── ① 절벽 고르기 ── */
#s-cliff .cliff-q{font-family:var(--disp);font-weight:700;font-size:22px;color:var(--chalk);
  margin:0 0 6px}
#s-cliff .cliff-sub{font-size:13.5px;line-height:1.8;color:var(--chalk-dim);margin:0 0 18px;
  word-break:keep-all;max-width:70ch}
#cliffs{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px;margin-bottom:14px}
.cliffbtn{position:relative;text-align:left;padding:16px 16px 14px;background:var(--ink-2);
  border:1px solid var(--ink-3);border-left:3px solid var(--cc,var(--brass));border-radius:10px;
  cursor:pointer;font-family:inherit;color:var(--chalk);transition:transform .16s,border-color .16s}
.cliffbtn:hover{transform:translateY(-2px);border-color:var(--cc,var(--brass))}
.cliffbtn em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.16em;color:var(--chalk-dim);margin-bottom:7px}
.cliffbtn b{display:block;font-family:var(--disp);font-weight:700;font-size:17.5px;margin-bottom:6px}
.cliffbtn span{display:block;font-size:12.5px;line-height:1.7;color:var(--chalk-dim);word-break:keep-all}
#allbtn{padding:11px 18px;font-size:13.5px;color:var(--chalk);background:none;
  border:1px solid var(--ink-3);border-radius:9px;cursor:pointer;font-family:inherit;transition:.16s}
#allbtn:hover{border-color:var(--chalk-dim)}

/* ── ② 계보도 ── */
#s-map[hidden]{display:none}
#maphead{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:6px}
#maptitle{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--chalk);margin:0}
#mapstat{font-family:var(--mono);font-size:11px;color:var(--chalk-dim)}
#mapback{margin-left:auto;font-size:12.5px;color:var(--chalk-dim);background:none;
  border:1px solid var(--ink-3);border-radius:7px;padding:6px 11px;cursor:pointer;
  font-family:inherit;transition:.16s}
#mapback:hover{border-color:var(--brass);color:var(--brass)}
#mapsay{font-size:13px;line-height:1.8;color:var(--chalk-dim);margin:0 0 14px;word-break:keep-all;
  max-width:74ch}

#board{display:grid;grid-template-columns:1fr;gap:18px;align-items:start}
@media (min-width:1040px){#board{grid-template-columns:minmax(0,1fr) 300px}}
#gwrap{overflow-x:auto;background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;
  padding:10px}
#graph{display:block}

/* SVG 안 — 노드 */
.gnode{cursor:pointer}
.gnode rect{fill:var(--ink-3);stroke:var(--na,var(--chalk-dim));stroke-width:1.1;rx:8}
.gnode text{fill:var(--chalk);font-family:'IBM Plex Sans KR',sans-serif;font-size:12px;
  pointer-events:none}
.gnode .gsub{fill:var(--chalk-dim);font-size:9px;font-family:'IBM Plex Mono',monospace}
.gnode{transition:opacity .18s}
/* 상태 명도 4단계 — 빈 마디를 숨기지 않는다. 흐리게 남긴다 */
.gnode.st-empty{opacity:.34}
.gnode.st-stub{opacity:.62}
.gnode.st-article{opacity:.88}
.gnode.st-tool{opacity:1}
.gnode.st-tool rect{stroke-width:2}
.gnode.is-sel{opacity:1}
.gnode.is-sel rect{stroke:var(--brass);stroke-width:2}
.gnode.is-dim{opacity:.13}
.gnode:focus{outline:none}
.gnode:focus rect{stroke:var(--brass)}
/* 엣지 */
.gedge{fill:none;stroke:var(--chalk-dim);stroke-width:1.2;opacity:.28;transition:opacity .18s}
.gedge.soft{stroke-dasharray:4 5}
.gedge.is-on{opacity:.95;stroke:var(--brass)}
.gedge.is-off{opacity:.06}
/* 절벽 표식 */
.gcliff{fill:var(--brass);font-family:'IBM Plex Mono',monospace;font-size:9px}
/* 영역 머리글 */
.gah{fill:var(--chalk-dim);font-family:'IBM Plex Mono',monospace;font-size:10px;
  letter-spacing:.14em;opacity:.75}
.gaband{stroke:var(--grid);stroke-width:1}

/* ── 카드 ── */
#dtl{position:sticky;top:70px;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:12px;padding:18px 18px 16px;min-height:120px}
#dtl .d-k{font-family:var(--mono);font-size:10px;letter-spacing:.16em;margin:0 0 8px;
  color:var(--dk,var(--chalk-dim))}
#dtl .d-name{font-family:var(--disp);font-weight:700;font-size:20px;color:var(--chalk);
  margin:0 0 4px;line-height:1.35}
#dtl .d-state{font-size:11px;color:var(--chalk-dim);margin:0 0 12px}
#dtl .d-lede{font-size:14px;line-height:1.8;color:var(--chalk);margin:0 0 12px;word-break:keep-all}
#dtl .d-why,#dtl .d-stuck{font-size:13px;line-height:1.85;color:var(--chalk-dim);margin:0 0 12px;
  word-break:keep-all}
#dtl .d-stuck{border-left:2px solid var(--brass);padding-left:10px}
#dtl .d-h{font-family:var(--mono);font-size:9.5px;letter-spacing:.16em;color:var(--chalk-dim);
  margin:14px 0 7px}
#dtl .d-empty{font-size:13px;line-height:1.85;color:var(--chalk-dim);margin:0 0 12px;word-break:keep-all}
#dtl .d-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 4px;padding:0;list-style:none}
#dtl .d-chips button{font-size:11.5px;color:var(--chalk);background:var(--ink-3);
  border:1px solid transparent;border-left:2px solid var(--ca,var(--chalk-dim));
  border-radius:6px;padding:4px 9px;cursor:pointer;font-family:inherit;transition:.14s}
#dtl .d-chips button:hover{border-color:var(--brass)}
#dtl .d-chips .ck-soft button{opacity:.66}
#dtl .d-ask{font-family:var(--disp);font-size:14.5px;line-height:1.75;color:var(--brass-soft);
  margin:14px 0 0;word-break:keep-all}
#dtl .d-link{display:inline-block;margin-top:12px;font-size:12.5px;color:var(--cyan);
  text-decoration:none;border:1px solid var(--ink-3);border-radius:7px;padding:6px 11px;transition:.16s}
#dtl .d-link:hover{border-color:var(--cyan)}
#dtl .d-hint{font-size:12px;color:var(--chalk-dim);opacity:.8;margin:0}

/* ── 범례 ── */
#leg{display:flex;flex-wrap:wrap;gap:8px 16px;margin-top:14px;font-size:11.5px;color:var(--chalk-dim)}
#leg .lg{display:inline-flex;align-items:center;gap:6px}
#leg .lg i{width:10px;height:10px;border-radius:3px;background:var(--lc)}
#leg .lg.l-num{--lc:var(--m-num)} #leg .lg.l-rel{--lc:var(--m-rel)}
#leg .lg.l-geo{--lc:var(--m-geo)} #leg .lg.l-data{--lc:var(--m-data)}
#leg .lgl{display:inline-flex;align-items:center;gap:6px}
#leg .lgl i{width:22px;height:0;border-top:1.6px solid var(--chalk-dim)}
#leg .lgl.soft i{border-top-style:dashed}
#leg .lgs{display:inline-flex;align-items:center;gap:6px}
#leg .lgs i{width:10px;height:10px;border-radius:3px;background:var(--chalk-dim)}
#leg .lgs.s1 i{opacity:.34} #leg .lgs.s2 i{opacity:.62}
#leg .lgs.s3 i{opacity:.88} #leg .lgs.s4 i{opacity:1}

/* ── 출처 ── */
#src h2{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--chalk);margin:0 0 14px}
#src ul{margin:0;padding-left:18px}
#src li{font-size:13.5px;line-height:1.9;color:var(--chalk-dim);margin-bottom:10px;word-break:keep-all}
#src li b{color:var(--chalk);font-weight:600}
#src a{color:var(--cyan);text-decoration:none}
#src a:hover{text-decoration:underline}
.src-warn{font-size:13px;line-height:1.9;color:var(--chalk-dim);background:var(--ink-2);
  border-left:2px solid var(--brass);border-radius:0 8px 8px 0;padding:12px 14px;margin:14px 0 0;
  word-break:keep-all}
.src-warn b{color:var(--chalk)}

.foot-note{font-size:13px;line-height:1.9;color:var(--chalk-dim);word-break:keep-all;
  margin:0 0 30px;max-width:74ch}

/* ── 푸터 (science.css 공통을 그대로 쓰되 이 페이지 여백만) ── */
.mathpage .footer{margin-top:10px}

@media (prefers-reduced-motion:reduce){
  .mathpage *{transition:none!important;animation:none!important}
}
@media (max-width:640px){
  .pg-h{font-size:25px}
  #dtl{position:static}
}