/* 실험판 — 팔레트는 science.css 변수를 그대로 쓴다.
   판(캔버스)이 주인공이고 손잡이는 아래에 붙는다. 좁은 화면에서는
   세로로 쌓이고 넓어지면 판 왼쪽 / 손잡이 오른쪽으로 갈라진다. */
.simpage{--rail:330px}
*{box-sizing:border-box}
body.simpage{margin:0;min-height:100vh;min-height:100dvh;background:var(--ink);
  -webkit-text-size-adjust:100%}

#wrap{max-width:1240px;margin:0 auto;padding:0 18px 60px}
#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{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{border-color:var(--brass);color:var(--brass)}

h1.pg-h{font-family:var(--disp);font-weight:700;font-size:26px;line-height:1.35;margin:6px 0 4px}
.pg-sub{font-size:13.5px;color:var(--chalk-dim);margin:0 0 18px;word-break:keep-all}

/* 실험 고르기 */
#simlist{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;margin-bottom:18px;
  scrollbar-width:none}
#simlist::-webkit-scrollbar{display:none}
#simlist button{flex:0 0 auto;text-align:left;background:var(--ink-2);border:1px solid var(--ink-3);
  border-radius:10px;padding:9px 14px;cursor:pointer;transition:.16s}
#simlist button b{display:block;font-family:var(--body);font-size:13.5px;font-weight:500;color:var(--chalk)}
#simlist button span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  color:var(--chalk-dim);margin-top:2px}
#simlist button:hover{border-color:var(--brass)}
#simlist button.on{border-color:var(--brass);background:var(--ink-3)}
#simlist button.on b{color:var(--brass-soft)}

#lay{display:grid;gap:16px;grid-template-columns:1fr}
@media (min-width:960px){#lay{grid-template-columns:1fr var(--rail);align-items:start}}

/* 판 */
#board{position:relative;height:min(56vh,430px);background:var(--ink-2);
  border:1px solid var(--ink-3);border-radius:13px;overflow:hidden}
@media (min-width:960px){#board{height:480px}}
#cv{display:block;width:100%;height:100%}
#form{position:absolute;left:12px;top:10px;font-family:var(--mono);font-size:12px;
  color:var(--brass-soft);background:rgba(12,21,38,.82);border:1px solid rgba(201,162,39,.28);
  border-radius:7px;padding:6px 11px;pointer-events:none;max-width:calc(100% - 24px)}
#play{position:absolute;right:12px;bottom:12px;font-family:var(--body);font-size:12.5px;
  color:var(--chalk-dim);background:rgba(12,21,38,.88);border:1px solid var(--ink-3);
  border-radius:8px;padding:8px 14px;cursor:pointer;transition:.16s}
#play:hover,#play.on{border-color:var(--brass);color:var(--brass)}

/* 예측 관문 */
#gate{position:absolute;inset:0;z-index:5;background:rgba(9,16,30,.955);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  display:flex;flex-direction:column;justify-content:center;padding:22px;overflow-y:auto}
#gate[hidden]{display:none}
.g-tag{font-family:var(--mono);font-size:10px;letter-spacing:.18em;color:var(--brass);margin:0 0 9px}
.g-q{font-family:var(--disp);font-weight:700;font-size:19px;line-height:1.5;margin:0 0 16px;
  color:var(--chalk);word-break:keep-all}
.g-opts{display:flex;flex-wrap:wrap;gap:8px}
.g-opts button{font-family:var(--body);font-size:14px;color:var(--chalk);background:var(--ink-2);
  border:1px solid var(--ink-3);border-radius:9px;padding:10px 17px;cursor:pointer;transition:.16s}
.g-opts button:hover:not(:disabled){border-color:var(--brass);color:var(--brass)}
.g-opts button:disabled{cursor:default;opacity:.5}
.g-opts button.right{border-color:var(--brass);color:var(--brass-soft);
  background:rgba(201,162,39,.13);opacity:1}
.g-opts button.wrong{border-color:rgba(255,120,120,.5);color:#ffb4b4;opacity:1}
.g-after{font-size:13.5px;line-height:1.75;color:var(--chalk-dim);margin:15px 0 0;word-break:keep-all}
.g-after b{color:var(--chalk)}
.g-go{align-self:flex-start;margin-top:15px;font-family:var(--body);font-size:13.5px;
  color:var(--ink);background:var(--brass);border:0;border-radius:8px;padding:10px 18px;cursor:pointer}
.g-go:hover{background:var(--brass-soft)}

/* 손잡이 · 읽는 값 */
#rail{display:flex;flex-direction:column;gap:14px}
#ctrl{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:13px;padding:15px 16px}
.ct{display:block}
.ct + .ct{margin-top:15px}
.ct-h{display:flex;align-items:baseline;gap:8px;font-size:12.5px;color:var(--chalk-dim);margin-bottom:7px}
.ct-h b{font-family:var(--mono);font-size:13px;color:var(--brass-soft);font-weight:500}
.ct-h i{font-family:var(--mono);font-size:10px;font-style:normal;color:var(--cyan);opacity:.85}
.ct input[type=range]{width:100%;-webkit-appearance:none;appearance:none;height:3px;
  background:var(--ink-3);border-radius:2px;outline:0}
.ct input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;
  border-radius:50%;background:var(--brass);cursor:pointer;border:3px solid var(--ink-2);
  box-shadow:0 0 0 1px var(--brass),0 0 12px rgba(201,162,39,.5)}
.ct input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;
  background:var(--brass);cursor:pointer;border:3px solid var(--ink-2)}

#read{background:var(--ink-2);border:1px solid var(--ink-3);border-radius:13px;padding:6px 16px}
#read div{display:flex;justify-content:space-between;align-items:baseline;gap:12px;
  padding:9px 0;border-bottom:1px solid rgba(26,41,70,.7)}
#read div:last-child{border-bottom:0}
#read span{font-size:12.5px;color:var(--chalk-dim)}
#read b{font-family:var(--mono);font-size:13.5px;color:var(--chalk);font-weight:500}

.foot-note{font-size:12px;line-height:1.75;color:var(--chalk-dim);opacity:.75;
  margin:22px 0 0;word-break:keep-all}

/* 갈래 표시 — 이 실험판이 무엇을 다루는 자리인지 (2026-08-22) */
.s-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;color:var(--brass);
  margin:18px 0 8px}