/* 왜 숫자 대신 글자를 쓰나 — 팔레트는 science.css 변수 위에서 만든다.
   저울의 기울기는 transform(rotate)만 쓴다. */
*{box-sizing:border-box}
body.letterpage{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{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}
.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)}

/* ── ① 저울 ── */
.story-line{font-family:var(--disp);font-size:16px;line-height:1.8;color:var(--chalk);
  word-break:keep-all;margin:0 0 6px}
.eq-line{font-size:14px;color:var(--chalk-dim);margin:0 0 16px}
.eq-line b{font-family:var(--mono);font-size:16px;color:var(--brass-soft);font-weight:500}
#sc-stage{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;
  padding:14px 14px 10px;margin-bottom:16px}
#sc-svg{display:block;width:100%;max-width:560px;margin:0 auto}
.sc-post{stroke:var(--chalk-dim);stroke-width:5;stroke-linecap:round}
.sc-base{fill:var(--ink-3);stroke:var(--chalk-dim);stroke-width:1}
.sc-beam{stroke:var(--chalk);stroke-width:4;stroke-linecap:round}
.sc-pivot{fill:var(--brass)}
.sc-pan{opacity:1}
.sc-string{stroke:var(--chalk-dim);stroke-width:1.4}
.sc-dish{fill:none;stroke:var(--chalk);stroke-width:2.6;stroke-linecap:round}
.sc-num{fill:var(--chalk);font-family:'IBM Plex Mono',monospace;font-size:15px}
#sc-beam-g{transform-origin:280px 80px;transform:rotate(0deg);transition:transform .28s}
.sc-even .sc-beam{stroke:var(--brass)}
.sc-even .sc-pivot{fill:var(--brass-soft)}
#sc-say{font-size:13.5px;line-height:1.8;color:var(--chalk-dim);text-align:center;
  margin:10px 0 2px;word-break:keep-all;min-height:1.8em}
.sc-even #sc-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-bottom: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}
.ghostbtn{margin-top:12px;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)}
.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)}

.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}
.after-note b{color:var(--chalk)}

/* ── ② 마술 ── */
.tr-tbl{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;
  overflow:hidden;margin:0 0 16px}
.tr-head,.tr-row{display:grid;grid-template-columns:1fr 90px 110px;gap:10px;align-items:baseline;
  padding:10px 16px}
.tr-head{font-family:var(--mono);font-size:10px;letter-spacing:.14em;color:var(--chalk-dim);
  border-bottom:1px solid var(--ink-3);padding-top:12px;padding-bottom:8px}
.tr-row{border-bottom:1px solid var(--grid)}
.tr-row:last-child{border-bottom:none}
.tr-row span{font-size:13.5px;color:var(--chalk-dim)}
.tr-row b{font-family:var(--mono);font-size:16px;font-weight:500;color:var(--chalk);text-align:right}
.tr-row i{font-family:var(--mono);font-size:14px;font-style:normal;color:var(--cyan);text-align:right}
.tr-last span{color:var(--chalk)}
.tr-last b{color:var(--brass-soft);font-size:18px}
.tr-last i{color:var(--brass-soft)}
/* 글자 열은 「보기」 전까지 감춘다 — 숫자만으로 먼저 이상함을 느끼게 */
.tr-lcol{visibility:hidden}
.tr-open .tr-lcol{visibility:visible}

/* ── ③ 역사 ── */
.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:15.5px;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-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)}

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

@media (prefers-reduced-motion:reduce){
  .letterpage *{transition:none!important;animation:none!important}
}
@media (max-width:560px){
  .pg-h{font-size:25px}
  .tr-head,.tr-row{grid-template-columns:1fr 64px 84px;padding:9px 12px}
  .tr-row b{font-size:14px}
}