/* 제곱근 — 넓이에서 길이를 거꾸로 찾다. 팔레트는 science.css 변수 위에서. */
*{box-sizing:border-box}
body.rootpage{margin:0;min-height:100vh;background:var(--ink);-webkit-text-size-adjust:100%}
#wrap{max-width:900px;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:70ch}
.pg-sub b,.sec-sub b,.after-note b,.foot-note b{color:var(--chalk);font-weight:600}
.foot-note b{color:var(--brass-soft)}
.s-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--brass);
  margin:0 0 12px}
.sec-h{font-family:var(--disp);font-weight:700;font-size:21px;color:var(--chalk);margin:0 0 10px}
.sec-sub{font-size:13.5px;line-height:1.85;color:var(--chalk-dim);word-break:keep-all;margin:0 0 20px;
  max-width:70ch}
section{margin-bottom:36px;padding-bottom:30px;border-bottom:1px solid var(--ink-3)}
.after-note{font-size:13.5px;line-height:1.9;color:var(--chalk-dim);word-break:keep-all;
  margin:18px 0 0;max-width:70ch}

/* ── ① 거꾸로 찾기 ── */
#ar-stage{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:16px;align-items:center;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;
  padding:14px;margin-bottom:16px}
#ar-svg{display:block;width:100%;max-width:300px}
.ar-sq{fill:var(--ink-3);stroke:var(--chalk-dim);stroke-width:1.6;transition:fill .2s}
.ar-sq.is-perfect{stroke:var(--brass)}
.ar-arealab{fill:var(--chalk);font-family:'IBM Plex Mono',monospace;font-size:20px}
.ar-brace{stroke:var(--brass);stroke-width:1.4}
.ar-sidelab{fill:var(--brass-soft);font-family:'IBM Plex Mono',monospace;font-size:14px}
.ar-line{font-family:var(--mono);font-size:16px;color:var(--chalk);margin:0 0 8px}
#ar-side{color:var(--brass-soft)}
#ar-say{font-size:13px;line-height:1.85;color:var(--chalk-dim);margin:8px 0 0;word-break:keep-all;
  min-height:3.7em}
.ar-perfect #ar-say{color:var(--brass-soft)}

.ctl{margin:0 0 16px}
.ctl-lab{display:block;font-family:var(--mono);font-size:11px;letter-spacing:.14em;
  color:var(--chalk-dim);margin:10px 0 8px}
.ctl-row{display:flex;align-items:center;gap:14px}
.ctl-row input[type=range]{flex:1;accent-color:var(--brass);min-width:0}
.ctl-val{font-family:var(--mono);font-size:15px;color:var(--brass-soft);min-width:64px;text-align:right}
.ctl-line{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:0 0 16px}
.brassbtn{padding:12px 20px;font-size:14.5px;font-weight:700;color:var(--ink);background:var(--brass);
  border:none;border-radius:9px;cursor:pointer;font-family:inherit;transition:transform .14s}
.brassbtn:active{transform:scale(.985)}
.ghostbtn{padding:9px 15px;font-size:13px;color:var(--chalk);background:none;
  border:1px solid var(--ink-3);border-radius:8px;cursor:pointer;font-family:inherit;transition:.16s}
.ghostbtn:hover{border-color:var(--chalk-dim)}

/* ── ② 눕히기 ── */
#ly-stage{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;
  padding:14px 14px 8px;margin-bottom:14px}
#ly-svg{display:block;width:100%;max-width:640px;margin:0 auto}
#ly-say{font-size:13.5px;line-height:1.8;color:var(--chalk-dim);text-align:center;
  margin:8px 0 4px;word-break:keep-all;min-height:2.7em}
.ly-down #ly-say{color:var(--brass-soft)}
.nl-axis{stroke:var(--chalk-dim);stroke-width:1.6}
.nl-tick{stroke:var(--chalk-dim);stroke-width:1}
.nl-num{fill:var(--chalk-dim);font-family:'IBM Plex Mono',monospace;font-size:12px}
.ly-sq{fill:none;stroke:var(--chalk-dim);stroke-width:1.4;stroke-dasharray:5 5;opacity:.8}
.ly-trace{fill:none;stroke:var(--chalk-dim);stroke-width:1;stroke-dasharray:2 5;opacity:.55}
/* 대각선 그룹 — 눕힌 자세(0°)로 그려 두고, 서 있을 때 −45° */
#ly-diag-g{transform-origin:60px 260px;transform:rotate(-45deg);transition:transform .55s}
#ly-diag-g.is-laid{transform:rotate(0deg)}
.ly-diag{stroke:var(--brass);stroke-width:3;stroke-linecap:round}
.ly-tip{fill:var(--brass)}
.ly-diaglab{fill:var(--brass-soft);font-family:'IBM Plex Mono',monospace;font-size:14px}
.ly-mark{stroke:var(--cyan);stroke-width:1.6;opacity:0;transition:opacity .3s .35s}
.ly-marklab{fill:var(--cyan);font-family:'IBM Plex Mono',monospace;font-size:13px;opacity:0;
  transition:opacity .3s .35s}
.ly-down .ly-mark,.ly-down .ly-marklab{opacity:1}

#frac-hunt{margin:0 0 4px}
.fh-lab{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--chalk-dim);
  margin:0 0 8px}
.fh-row{display:flex;flex-wrap:wrap;gap:6px}
.fh-chip{font-family:var(--mono);font-size:12px;color:var(--chalk-dim);background:var(--ink-2);
  border:1px solid var(--ink-3);border-radius:6px;padding:5px 9px}
.fh-chip.fh-x{color:var(--brass-soft);border-color:var(--brass)}

/* ── 역사 ── */
.hist-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px}
.hist-card{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;
  padding:16px 16px 14px}
.hist-card em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--brass);margin-bottom:10px}
.hist-eq{font-family:var(--disp);font-size:16px;line-height:1.7;color:var(--chalk);
  margin:0 0 10px;word-break:keep-all}
.hist-card p:last-child{font-size:12.5px;line-height:1.85;color:var(--chalk-dim);margin:0;
  word-break:keep-all}
.hist-card p i{font-style:italic}

/* ── 출처·마무리 ── */
#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 li i{font-style:italic}
.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-family:var(--disp);font-size:15px;line-height:1.9;color:var(--brass-soft);
  word-break:keep-all;margin:0 0 14px;max-width:70ch}
.next-row{margin:0 0 30px}
.d-link{display:inline-block;font-size:12.5px;color:var(--cyan);text-decoration:none;
  border:1px solid var(--ink-3);border-radius:7px;padding:6px 11px;transition:.16s}
.d-link:hover{border-color:var(--cyan)}

.rootpage .footer{margin-top:10px}

@media (prefers-reduced-motion:reduce){
  .rootpage *{transition:none!important;animation:none!important}
}
@media (max-width:560px){
  .pg-h{font-size:25px}
  #ar-stage{grid-template-columns:1fr}
}