/* 함수 — 하나 넣으면 꼭 하나 나온다. 팔레트는 science.css 변수 위에서. */
*{box-sizing:border-box}
body.fnpage{margin:0;min-height:100vh;background:var(--ink);-webkit-text-size-adjust:100%}
#wrap{max-width:960px;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,.face-note 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)}
.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}

/* ── ① 자판기 ── */
#vend{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:stretch;
  background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;padding:16px;margin-bottom:12px}
#vend-btns{display:grid;grid-template-columns:1fr 1fr;gap:8px;align-content:start}
.vbtn{padding:12px 16px;font-size:14px;font-family:var(--mono);color:var(--chalk);
  background:var(--ink-3);border:1px solid transparent;border-radius:9px;cursor:pointer;transition:.14s}
.vbtn:hover{border-color:var(--brass)}
.vbtn.is-on{border-color:var(--brass);color:var(--brass-soft)}
#vend-out{display:flex;flex-direction:column;justify-content:center;min-height:110px;
  border-left:1px dashed var(--ink-3);padding-left:16px}
#vend-cup{font-family:var(--disp);font-weight:700;font-size:26px;color:var(--chalk);margin:0 0 8px}
#vend-say{font-size:13px;line-height:1.8;color:var(--chalk-dim);margin:0;word-break:keep-all;
  min-height:2.6em}
.vend-bad #vend-cup{color:var(--brass-soft)}
.vend-bad #vend-say{color:var(--brass-soft)}
.ctl-line{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:4px}
.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)}
.ghostbtn:disabled{opacity:.4;cursor:default}
.brk-tog{font-size:13px;color:var(--chalk-dim);display:inline-flex;align-items:center;gap:8px;
  cursor:pointer;user-select:none}
.brk-tog input{accent-color:var(--brass)}

/* ── ② 세 얼굴 ── */
#face-rules{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.rulebtn{padding:9px 14px;font-size:13px;color:var(--chalk-dim);background:var(--ink-2);
  border:1px solid var(--ink-3);border-radius:8px;cursor:pointer;font-family:inherit;transition:.14s}
.rulebtn:hover{border-color:var(--chalk-dim)}
.rulebtn.is-on{border-color:var(--brass);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}

#faces{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.face{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:12px;padding:14px}
.face em{display:block;font-style:normal;font-family:var(--mono);font-size:10px;
  letter-spacing:.14em;color:var(--brass);margin-bottom:10px}
.face-note{font-size:12px;line-height:1.8;color:var(--chalk-dim);margin:10px 0 0;word-break:keep-all}
#fc-tbl div{display:flex;align-items:baseline;justify-content:space-between;
  font-family:var(--mono);font-size:14px;color:var(--chalk-dim);
  padding:6px 8px;border-bottom:1px solid var(--grid)}
#fc-tbl div:last-child{border-bottom:none}
#fc-tbl div.is-now{color:var(--chalk);background:var(--ink-3);border-radius:6px}
#fc-tbl em{font-style:normal;font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  color:var(--brass)}
.fc-rule{font-family:var(--mono);font-size:17px;color:var(--chalk);margin:4px 0 10px}
.fc-sub{font-family:var(--mono);font-size:14.5px;color:var(--brass-soft);margin:0}
#fc-svg{display:block;width:100%;max-width:320px;margin:0 auto}
.fc-grid{stroke:var(--grid);stroke-width:1}
.fc-axis{stroke:var(--chalk-dim);stroke-width:1.4}
.fc-tick{fill:var(--chalk-dim);font-family:'IBM Plex Mono',monospace;font-size:10px}
.fc-foot{fill:var(--cyan);opacity:.45}
.fc-lead{stroke:var(--brass);stroke-width:1;stroke-dasharray:3 4;opacity:.7}
.fc-now{fill:var(--brass)}
.fc-nowlab{fill:var(--brass-soft);font-family:'IBM Plex Mono',monospace;font-size:12px}

/* ── ③ 역사 ── */
.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}

/* ── 출처·마무리 ── */
#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)}

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

@media (prefers-reduced-motion:reduce){
  .fnpage *{transition:none!important;animation:none!important}
}
@media (max-width:560px){
  .pg-h{font-size:25px}
  #vend{grid-template-columns:1fr}
  #vend-out{border-left:none;border-top:1px dashed var(--ink-3);padding-left:0;padding-top:12px}
}