/* 情報学基礎  共通スタイル
   kodamay.org / kodama-lab.com と同じ色づかい（紺 #003f8c ／ 橙 #f08300） */
:root{
  --blue:#003f8c; --blue-l:#1b5cb0; --orange:#f08300; --ink:#1a2230;
  --sub:#5a6577; --line:#d7dee8; --bg:#f7f9fc; --card:#fff; --ok:#1a7f4b; --ng:#c0392b;
}
*{box-sizing:border-box}
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:"Hiragino Sans","Noto Sans JP",system-ui,-apple-system,sans-serif;
  line-height:1.85; font-size:16px;
}
a{color:var(--blue-l)}
.wrap{max-width:900px; margin:0 auto; padding:0 20px 80px}

/* ---- ヘッダ ---- */
header.top{
  background:linear-gradient(135deg,var(--blue) 0%,#00295c 100%); color:#fff;
  padding:26px 20px 22px; margin-bottom:28px;
}
header.top .wrap{padding-bottom:0}
header.top .course{font-size:.8rem; letter-spacing:.18em; opacity:.85}
header.top h1{margin:.2em 0 .1em; font-size:1.7rem; letter-spacing:.04em}
header.top .sub{font-size:.9rem; opacity:.9}
header.top a{color:#cfe0f7}

nav.crumb{font-size:.85rem; margin-bottom:18px; color:var(--sub)}
nav.crumb a{text-decoration:none}

/* ---- 見出し ---- */
h2{
  font-size:1.25rem; margin:2.2em 0 .7em; padding-left:12px;
  border-left:6px solid var(--orange);
}
h3{font-size:1.05rem; margin:1.6em 0 .5em; color:var(--blue)}

/* ---- カード ---- */
.card{
  background:var(--card); border:1px solid var(--line); border-radius:10px;
  padding:18px 20px; margin:18px 0; box-shadow:0 1px 3px rgba(20,40,80,.06);
}
.goal{background:#eef4fc; border-color:#c3d8f2}
.goal ul{margin:.4em 0 0; padding-left:1.3em}
.note{background:#fffaf0; border-color:#f2dfb8}
.warn{background:#fff5f5; border-color:#f0c8c8}

/* ---- 表 ---- */
table.t{border-collapse:collapse; margin:14px 0; background:#fff; font-size:.95rem}
table.t th,table.t td{border:1px solid var(--line); padding:6px 12px; text-align:center}
table.t th{background:#eef3fa}
table.t td.l{text-align:left}
table.t caption{caption-side:top; text-align:left; font-weight:700; padding-bottom:6px; color:var(--blue)}
.hl{background:#fff3d6; font-weight:700}
.tscroll{overflow-x:auto}

/* ---- 可動モデル ---- */
.model{
  background:#fff; border:2px solid var(--blue); border-radius:10px;
  padding:16px 18px; margin:22px 0;
}
.model .mhead{
  font-weight:700; color:var(--blue); margin:-4px 0 10px;
  display:flex; align-items:center; gap:8px; flex-wrap:wrap;
}
.model .mhead::before{content:"▶"; color:var(--orange)}
.model .tag{font-size:.72rem; background:var(--orange); color:#fff; padding:1px 8px; border-radius:10px}
.ctrl{display:flex; flex-wrap:wrap; gap:12px 20px; align-items:center; margin:10px 0}
.ctrl label{font-size:.9rem; display:flex; align-items:center; gap:8px}
.ctrl input[type=range]{width:190px; accent-color:var(--blue)}
.ctrl input[type=number],.ctrl input[type=text]{padding:4px 8px; border:1px solid var(--line); border-radius:4px}
.ctrl input[type=number]{width:88px}
.ctrl select{padding:4px 8px; border:1px solid var(--line); border-radius:4px; background:#fff}
.ctrl .val{font-weight:700; color:var(--blue); min-width:3.4em; display:inline-block; text-align:right}
.ctrl button{
  background:var(--blue); color:#fff; border:0; border-radius:5px;
  padding:6px 16px; cursor:pointer; font-size:.9rem;
}
.ctrl button:hover{background:var(--blue-l)}
.ctrl button.sec{background:#7b879a}
.ctrl button.on{background:var(--orange)}
canvas{max-width:100%; height:auto; display:block; margin:6px auto; background:#fff}
.readout{font-size:.92rem; margin-top:8px; padding:8px 12px; background:#f2f6fc; border-radius:6px}
.readout b{color:var(--blue)}
.readout.big{font-size:1.05rem}

/* ---- 等幅・コード ---- */
.mono,code,kbd{font-family:"SFMono-Regular",Consolas,"Courier New",monospace}
code{background:#eef2f8; padding:1px 5px; border-radius:3px; font-size:.92em}
pre.code{
  background:#1e2532; color:#e6ebf5; padding:12px 16px; border-radius:8px;
  overflow-x:auto; font-size:.86rem; line-height:1.7;
  font-family:"SFMono-Regular",Consolas,"Courier New",monospace;
}
pre.code .cm{color:#8fa0bd}
pre.code .kw{color:#ffb96b}
pre.code .st{color:#9fdda0}

/* ---- 真理値表・ビット列など ---- */
table.tt{border-collapse:collapse; font-family:"SFMono-Regular",Consolas,monospace; font-size:.95rem; margin:10px 0}
table.tt th,table.tt td{border:1px solid var(--line); padding:4px 14px; text-align:center}
table.tt th{background:#eef3fa}
table.tt tr.on td{background:#fff3d6; font-weight:700}
.bits{display:flex; gap:4px; flex-wrap:wrap; margin:8px 0; font-family:"SFMono-Regular",Consolas,monospace}
.bit{
  width:34px; height:38px; line-height:38px; text-align:center; border:1px solid var(--line);
  border-radius:5px; background:#fff; cursor:pointer; user-select:none; font-weight:700;
}
.bit.one{background:var(--blue); color:#fff; border-color:var(--blue)}
.bit.fix{cursor:default; opacity:.75}
.bit.s{background:#f7d9d9; border-color:#e0a5a5}
.bit.e{background:#d9e6f7; border-color:#a5bde0}
.bit.m{background:#dff0e0; border-color:#a5d0a8}

/* ---- クリックで開く層・チップ ---- */
.layers{display:flex; flex-direction:column; gap:4px; margin:10px 0}
.layer{
  border:1px solid var(--line); border-left:6px solid var(--blue-l); border-radius:6px;
  padding:8px 14px; background:#fff; cursor:pointer; transition:.12s; font-size:.94rem;
}
.layer:hover{background:#f0f5fc}
.layer.sel{background:#eef4fc; border-left-color:var(--orange); box-shadow:0 2px 8px rgba(20,40,80,.1)}
.layer .ln{font-weight:700; color:var(--blue)}
.layer .lp{font-size:.8rem; color:var(--sub); margin-left:.7em}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:10px 0}
.chip{
  border:1px solid var(--line); background:#fff; border-radius:16px; padding:4px 14px;
  cursor:pointer; font-size:.88rem; transition:.12s;
}
.chip:hover{border-color:var(--blue-l)}
.chip.sel{background:var(--blue); color:#fff; border-color:var(--blue)}
.chip.ok{background:#e8f6ed; border-color:#a8dcbb}
.chip.ng{background:#fdeaea; border-color:#f0c8c8}

/* ---- ステッパ ---- */
.steps{margin:10px 0}
.step{
  border-left:3px solid var(--line); padding:6px 0 6px 14px; margin-left:6px;
  color:#9aa5b5; font-size:.93rem;
}
.step.done{border-left-color:#a8c8ee; color:var(--sub)}
.step.cur{border-left-color:var(--orange); color:var(--ink); font-weight:700; background:#fffaf0}

/* ---- ミニコンソール ---- */
.term{
  background:#12161f; color:#dfe6f2; border-radius:8px; padding:12px 14px; margin:10px 0;
  font-family:"SFMono-Regular",Consolas,"Courier New",monospace; font-size:.88rem; line-height:1.65;
}
.term .out{max-height:230px; overflow-y:auto; white-space:pre-wrap; word-break:break-word}
.term .out .u{color:#8fd3ff}
.term .out .v{color:#9fdda0}
.term .out .e{color:#ff9f9f}
.term .inl{display:flex; align-items:center; gap:8px; margin-top:8px; border-top:1px solid #2c3547; padding-top:8px}
.term .inl span{color:var(--orange); font-weight:700}
.term .inl input{
  flex:1; background:transparent; border:0; color:#dfe6f2; outline:none;
  font-family:inherit; font-size:inherit;
}

/* ---- 章末問題 ---- */
.quiz{border:2px solid var(--orange); border-radius:10px; background:#fff; padding:18px 20px; margin:34px 0}
.quiz h2{border:0; padding:0; margin:0 0 4px; color:var(--orange); font-size:1.2rem}
.quiz .lead{font-size:.9rem; color:var(--sub); margin-bottom:14px}
.q{border-top:1px dashed var(--line); padding:14px 0}
.q:first-of-type{border-top:0}
.q .qt{font-weight:700; margin-bottom:6px}
.q .qt .no{color:var(--orange); margin-right:.5em}
.q label{display:block; padding:3px 0 3px 4px; cursor:pointer}
.q label:hover{background:#fff8ee}
.q input[type=text],.q input[type=number]{
  padding:5px 8px; border:1px solid var(--line); border-radius:4px; width:200px;
}
.q .fb{font-size:.88rem; margin-top:6px; display:none}
.q.ok .fb{display:block; color:var(--ok)}
.q.ng .fb{display:block; color:var(--ng)}
.q.ok{background:#f3fbf6}
.q.ng{background:#fdf4f4}

.ident{display:flex; gap:14px; flex-wrap:wrap; align-items:flex-end; margin:6px 0 12px}
.ident label{font-size:.85rem}
.ident input{display:block; padding:6px 8px; border:1px solid var(--line); border-radius:4px}
.submit{
  background:var(--orange); color:#fff; border:0; border-radius:6px;
  padding:10px 28px; font-size:1rem; cursor:pointer; font-weight:700;
}
.submit:hover{filter:brightness(1.08)}
.submit:disabled{background:#bbb; cursor:not-allowed}
.result{margin-top:14px; padding:12px 16px; border-radius:8px; display:none; font-size:.95rem}
.result.show{display:block}
.result.good{background:#eefaf0; border:1px solid #a8dcbb}
.result.bad{background:#fff5f5; border:1px solid #f0c8c8}
.result .big{font-size:1.5rem; font-weight:700; color:var(--blue)}

/* ---- 回の一覧 ---- */
.weeks{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px; margin-top:16px}
.wk{
  display:block; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--line); border-left:5px solid var(--blue);
  border-radius:8px; padding:14px 16px; transition:.15s;
}
.wk:hover{transform:translateY(-2px); box-shadow:0 4px 12px rgba(20,40,80,.12); border-left-color:var(--orange)}
.wk .n{font-size:.75rem; color:var(--orange); font-weight:700; letter-spacing:.1em}
.wk .t{font-weight:700; margin:2px 0 4px}
.wk .d{font-size:.83rem; color:var(--sub); line-height:1.6}
.wk .m{font-size:.75rem; color:var(--blue); margin-top:6px}

.pager{display:flex; justify-content:space-between; gap:10px; margin-top:40px; font-size:.9rem}
.pager a{text-decoration:none; background:#fff; border:1px solid var(--line); padding:8px 16px; border-radius:6px}
footer{text-align:center; font-size:.8rem; color:var(--sub); padding:30px 20px; border-top:1px solid var(--line); margin-top:40px}

@media(max-width:600px){
  body{font-size:15px}
  .ctrl input[type=range]{width:150px}
  header.top h1{font-size:1.35rem}
  .bit{width:28px; height:34px; line-height:34px; font-size:.85rem}
}