/* ══════════════════════════════════════════════════════════
   interactive.css — 문서 공통 인터랙티브 컴포넌트
   각 문서가 정의한 --paper / --ink / --ink-soft / --rule / --card 를
   그대로 물려받아 쓰므로, 문서마다 색조가 자연스럽게 맞습니다.
   ══════════════════════════════════════════════════════════ */

:root{
  --kid-bg:#EDF0E8;
  --kid-ink:#3F5233;
  --kid-rule:#D5DCCB;
  --pos:#4C7A6D;
  --neg:#8E4B3A;
  --ink-faint:#8A8474;
}

/* ── 읽기 모드 토글 ── */
.toolbar{
  margin:32px 0 0;
  padding:15px 18px;
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:3px;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
}
.toolbar .tl{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);}
.toolbar .hint{font-size:13px;color:var(--ink-faint);}
.seg{display:flex;border:1px solid var(--rule);border-radius:3px;overflow:hidden;}
.seg button{
  font-family:'IBM Plex Sans KR',sans-serif;
  font-size:13.5px;
  padding:8px 16px;
  border:0;
  background:transparent;
  color:var(--ink-soft);
  cursor:pointer;
  transition:background .15s ease,color .15s ease;
}
.seg button + button{border-left:1px solid var(--rule);}
.seg button.on{background:var(--ink);color:var(--paper);}

body.simple .deep{display:none;}

/* ── 아이 눈높이 박스 ── */
.analogy{
  background:var(--kid-bg);
  border:1px solid var(--kid-rule);
  border-radius:3px;
  padding:17px 19px;
  margin:20px 0 22px;
}
.analogy .al{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--kid-ink);
  letter-spacing:.04em;
  margin-bottom:8px;
}
.analogy p{
  margin:0;
  font-size:14.7px;
  color:var(--kid-ink);
  line-height:1.75;
  max-width:none;
}
.analogy p + p{margin-top:10px;}
.analogy b{font-weight:600;}

/* ── 인터랙티브 영역 ── */
.lab{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:21px 21px 23px;
  margin:24px 0;
}
.lab .labtitle{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--ink-soft);
  letter-spacing:.05em;
  margin-bottom:5px;
}
.lab .labsub{
  font-size:13.8px;
  color:var(--ink-soft);
  margin:0 0 17px;
  max-width:60ch;
  line-height:1.65;
}
.lab svg{display:block;width:100%;height:auto;overflow:visible;}

.axis{stroke:var(--rule);stroke-width:1;}
.gridl{stroke:var(--rule);stroke-width:.7;stroke-dasharray:2 4;}
.axt{font-family:'IBM Plex Mono',monospace;font-size:10.5px;fill:var(--ink-faint);}
.lbl{font-family:'IBM Plex Sans KR',sans-serif;font-size:12px;fill:var(--ink-soft);}
.lblb{font-family:'IBM Plex Sans KR',sans-serif;font-size:12.5px;font-weight:600;}

/* ── 슬라이더 ── */
.ctrl-row{display:flex;align-items:center;gap:14px;margin-bottom:11px;flex-wrap:wrap;}
.ctrl-row label{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  color:var(--ink-soft);
  min-width:136px;
}
.ctrl-row input[type=range]{flex:1;min-width:150px;accent-color:var(--pos);height:22px;}
.ctrl-row .val{
  font-family:'IBM Plex Mono',monospace;
  font-size:13px;
  color:var(--ink);
  min-width:80px;
  text-align:right;
  font-weight:500;
}

/* ── 결과 표시 ── */
.readout{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
  margin-top:17px;
  padding-top:17px;
  border-top:1px solid var(--rule);
}
.readout.two{grid-template-columns:repeat(2,1fr);}
.readout > div{text-align:center;}
.readout .rk{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--ink-faint);
  display:block;
  margin-bottom:5px;
}
.readout .rv{font-family:'IBM Plex Mono',monospace;font-size:20px;font-weight:500;}
.readout .rn{font-size:12px;color:var(--ink-soft);display:block;margin-top:3px;}

/* ── 버튼 ── */
.btnrow{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:15px;}
.btnrow button{
  font-family:'IBM Plex Sans KR',sans-serif;
  font-size:13.5px;
  padding:9px 15px;
  border:1px solid var(--rule);
  background:var(--paper);
  color:var(--ink-soft);
  border-radius:3px;
  cursor:pointer;
  transition:all .16s ease;
  text-align:left;
}
.btnrow button:hover{border-color:var(--ink-soft);color:var(--ink);}
.btnrow button.on{background:var(--ink);border-color:var(--ink);color:var(--paper);}

/* ── 작은 카드 3분할 ── */
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:4px 0 0;}
.minicard{
  background:var(--paper);
  border:1px solid var(--rule);
  border-top:3px solid var(--edge,var(--rule));
  border-radius:3px;
  padding:14px 15px;
  cursor:pointer;
  transition:all .16s ease;
}
.minicard:hover{border-color:var(--ink-soft);border-top-color:var(--edge,var(--rule));}
.minicard.on{background:var(--card);box-shadow:0 2px 10px rgba(0,0,0,.05);}
.minicard .mt{
  font-family:'IBM Plex Mono',monospace;
  font-size:11px;
  color:var(--edge,var(--ink-soft));
  margin-bottom:7px;
}
.minicard .mv{font-family:'IBM Plex Mono',monospace;font-size:17px;font-weight:500;color:var(--ink);}
.minicard .mn{font-size:12px;color:var(--ink-soft);margin-top:5px;line-height:1.5;}

/* ── 가로 스택 막대 ── */
.stack{margin:6px 0 0;}
.stack .srow{display:flex;align-items:center;gap:12px;margin-bottom:9px;}
.stack .sname{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--ink-soft);
  min-width:92px;
  text-align:right;
}
.stack .strack{flex:1;height:22px;background:var(--paper);border:1px solid var(--rule);border-radius:2px;overflow:hidden;}
.stack .sfill{height:100%;transition:width .35s ease;}
.stack .sval{
  font-family:'IBM Plex Mono',monospace;
  font-size:12.5px;
  min-width:78px;
  text-align:right;
  color:var(--ink);
}

/* ── 체크리스트 ── */
ul.check{list-style:none;margin:18px 0 0;padding:0;}
ul.check li{
  background:var(--card);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:13px 15px 13px 44px;
  margin-bottom:9px;
  position:relative;
  cursor:pointer;
  font-size:14.2px;
  color:var(--ink-soft);
  transition:all .16s ease;
  line-height:1.62;
}
ul.check li::before{
  content:"";
  position:absolute;
  left:15px;
  top:15px;
  width:16px;
  height:16px;
  border:1.5px solid var(--rule);
  border-radius:2px;
  transition:all .16s ease;
}
ul.check li.done{background:var(--kid-bg);border-color:#C5D0B8;color:var(--kid-ink);}
ul.check li.done::before{background:var(--kid-ink);border-color:var(--kid-ink);}
ul.check li.done::after{
  content:"";
  position:absolute;
  left:20.5px;
  top:18px;
  width:5px;
  height:9px;
  border:solid var(--kid-bg);
  border-width:0 2px 2px 0;
  transform:rotate(45deg);
}
ul.check li b{color:var(--ink);font-weight:600;}
ul.check li.done b{color:var(--kid-ink);}
.checkcount{font-family:'IBM Plex Mono',monospace;font-size:12px;color:var(--ink-soft);margin-top:13px;}

/* ── 퀴즈 ── */
.quiz{margin:4px 0 0;}
.quizq{
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:15px 17px;
  margin-bottom:11px;
}
.quizq .qq{font-size:14.6px;color:var(--ink);margin-bottom:11px;line-height:1.6;}
.quizq .qbtns{display:flex;gap:8px;flex-wrap:wrap;}
.quizq .qbtns button{
  font-family:'IBM Plex Sans KR',sans-serif;
  font-size:13.5px;
  padding:7px 18px;
  border:1px solid var(--rule);
  background:var(--card);
  color:var(--ink-soft);
  border-radius:3px;
  cursor:pointer;
  transition:all .16s ease;
}
.quizq .qbtns button:hover{border-color:var(--ink-soft);color:var(--ink);}
.quizq .qbtns button.right{background:var(--kid-ink);border-color:var(--kid-ink);color:#fff;}
.quizq .qbtns button.wrong{background:var(--neg);border-color:var(--neg);color:#fff;}
.quizq .qa{
  display:none;
  margin-top:12px;
  padding-top:12px;
  border-top:1px solid var(--rule);
  font-size:13.8px;
  color:var(--ink-soft);
  line-height:1.7;
}
.quizq.answered .qa{display:block;}
.quizq .qa b{color:var(--ink);font-weight:600;}

/* ── 해시 · 블록 (코인 트랙) ── */
.hashout{
  font-family:'IBM Plex Mono',monospace;
  font-size:12px;
  word-break:break-all;
  background:var(--paper);
  border:1px solid var(--rule);
  border-radius:3px;
  padding:11px 13px;
  line-height:1.65;
  color:var(--ink-soft);
  margin:10px 0 0;
}
.hashout b{color:var(--ink);font-weight:600;}

.blockrow{display:flex;gap:10px;overflow-x:auto;padding:4px 2px 10px;-webkit-overflow-scrolling:touch;}
.blk{
  flex:0 0 auto;
  width:158px;
  background:var(--paper);
  border:1px solid var(--rule);
  border-top:3px solid var(--ok, #4C7A6D);
  border-radius:3px;
  padding:11px 12px;
  transition:border-color .2s ease, background .2s ease;
}
.blk.bad{--ok:#8E4B3A;background:#F8ECE8;}
.blk .bh{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  color:var(--ok, #4C7A6D);
  margin-bottom:7px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}
.blk input{
  width:100%;
  font-family:'IBM Plex Sans KR',sans-serif;
  font-size:12.5px;
  padding:5px 7px;
  border:1px solid var(--rule);
  border-radius:2px;
  background:var(--card);
  color:var(--ink);
}
.blk input:focus{outline:1px solid var(--ok, #4C7A6D);}
.blk .bf{
  font-family:'IBM Plex Mono',monospace;
  font-size:9.5px;
  color:var(--ink-faint);
  margin-top:7px;
  line-height:1.5;
  word-break:break-all;
}
.blk .bf span{color:var(--ink-soft);}

/* ── 해설 박스 ── */
.verdict{
  margin-top:15px;
  padding:15px 17px;
  border-radius:3px;
  border-left:3px solid var(--vc,var(--rule));
  background:var(--paper);
}
.verdict .vh{
  font-family:'IBM Plex Mono',monospace;
  font-size:11.5px;
  color:var(--vc,var(--ink-soft));
  margin-bottom:6px;
}
.verdict .vt{font-size:15.5px;font-weight:600;margin-bottom:7px;font-family:'Newsreader',serif;line-height:1.4;}
.verdict p{font-size:14px;color:var(--ink-soft);margin:0;max-width:none;line-height:1.7;}
.verdict p + p{margin-top:8px;}

/* ── 페이지 이동 내비게이션 (이전편 · 목록 · 다음편) ── */
.pagenav{
  display:flex;
  gap:10px;
  margin:44px 0 0;
  flex-wrap:wrap;
}
.pagenav a{
  flex:1 1 170px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:14px 16px;
  border:1px solid var(--rule);
  border-radius:8px;
  background:var(--card);
  color:var(--ink);
  text-decoration:none;
  text-align:center;
  line-height:1.4;
  transition:border-color .15s ease, background .15s ease, transform .1s ease;
}
.pagenav a:hover{border-color:var(--ink-soft);background:var(--paper);}
.pagenav a:active{transform:scale(.98);}
.pagenav a .pnlabel{
  font-family:'IBM Plex Mono',monospace;
  font-size:10.5px;
  letter-spacing:.03em;
  color:var(--ink-faint);
}
.pagenav a .pntitle{font-size:13.5px;font-weight:500;color:var(--ink);}
.pagenav a.pn-home{
  flex:0 1 200px;
  background:var(--ink);
  border-color:var(--ink);
}
.pagenav a.pn-home .pnlabel{color:rgba(255,255,255,.6);}
.pagenav a.pn-home .pntitle{color:var(--paper);}
.pagenav a.pn-home:hover{opacity:.88;}

/* ── 항상 떠 있는 홈 버튼 (모든 문서 페이지 공통, interactive.js가 주입) ── */
.homefab{
  position:fixed;
  right:18px;
  bottom:18px;
  z-index:40;
  display:flex;
  align-items:center;
  gap:7px;
  padding:10px 16px 10px 13px;
  border-radius:999px;
  background:var(--ink);
  color:var(--paper);
  text-decoration:none;
  font-family:'IBM Plex Sans KR',sans-serif;
  font-size:13px;
  font-weight:500;
  box-shadow:0 4px 16px rgba(0,0,0,.18);
  opacity:.92;
  transition:opacity .15s ease, transform .15s ease;
}
.homefab:hover{opacity:1;transform:translateY(-1px);}
.homefab .fi{font-size:15px;line-height:1;}

@media (max-width:640px){
  .lab{padding:17px 15px 19px;}
  .ctrl-row label{min-width:100%;}
  .readout,.readout.two{grid-template-columns:1fr;gap:13px;}
  .readout .rv{font-size:18px;}
  .btnrow button{width:100%;}
  .pagenav{flex-direction:column;}
  .pagenav a{flex:1 1 auto;}
  .pagenav a.pn-home{flex:1 1 auto;order:-1;}
  .homefab{right:14px;bottom:14px;padding:9px 14px 9px 12px;font-size:12.5px;}
}