:root {
  /* bokete.jp の実測値: 差し色 #ffc400 / 文字 #3c3c3c / 境界 #d9dce0 / 角丸5px */
  --fg:#3c3c3c; --bg:#f0f0f0; --line:#d9dce0;
  --accent:#ffc400; --accent-line:#f5bf0f; --on-accent:#3c3c3c;
}
* { box-sizing: border-box; }
body {
  margin:0; padding:16px; color:var(--fg); background:var(--bg);
  font-family: system-ui, -apple-system, "Hiragino Sans", "Yu Gothic", Meiryo, sans-serif;
  line-height:1.6;
}
header { max-width:1000px; margin:0 auto 12px; }
h1 { font-size:20px; margin:0 0 4px; }
.note { margin:0; font-size:13px; color:#555; }
main { max-width:1000px; margin:0 auto; }

.drop {
  border:2px dashed var(--line); border-radius:5px; background:#fff;
  padding:48px 16px; text-align:center; color:#666;
}
.drop.over { border-color:var(--accent-line); background:#fffaea; }
.big { font-size:18px; margin:0 0 8px; color:var(--fg); }
.btn, button, label.btn {
  font:inherit; font-size:16px; padding:8px 14px; border:1px solid var(--line);
  border-radius:5px; background:#fff; cursor:pointer; color:var(--fg);
}
button.primary { background:var(--accent); border-color:var(--accent-line); color:var(--on-accent); font-weight:700; }
button:disabled { opacity:.45; cursor:default; }
.tools { display:flex; flex-wrap:wrap; gap:8px; justify-content:space-between; margin-bottom:8px; }
.modes, .acts { display:flex; flex-wrap:wrap; gap:6px; }
.mode.on { background:var(--accent); border-color:var(--accent-line); color:var(--on-accent); font-weight:700; }
.hint { font-size:14px; color:#555; margin:4px 0 10px; }
.hint.err { color:#b03030; font-weight:600; }

.stage { background:#fff; border:1px solid var(--line); border-radius:5px; padding:8px; overflow:auto; }
canvas { max-width:100%; height:auto; display:block; margin:0 auto; touch-action:none; cursor:crosshair; }

.panel { margin-top:12px; background:#fff; border:1px solid var(--line); border-radius:5px; padding:12px; }
.row { display:block; margin-bottom:10px; }
.row.grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:10px; }
label { font-size:14px; color:#333; display:block; }
/* iOS は 16px 未満の入力にフォーカスすると拡大するので下回らせない */
textarea, select, input[type=text] { font:inherit; font-size:16px; width:100%; padding:8px;
  border:1px solid var(--line); border-radius:5px; background:#fff; color:var(--fg); }
input[type=range] { width:100%; }
input[type=color] { width:100%; height:38px; padding:2px; border:1px solid var(--line); border-radius:5px; background:#fff; }
kbd { border:1px solid var(--line); border-bottom-width:2px; border-radius:4px; padding:1px 5px; font-size:12px; background:#fff; }
footer { max-width:1000px; margin:16px auto 0; font-size:12px; color:#666; }
footer a { color:#555; }
.note.caution { color:#8a5a00; background:#fff8e6; border:1px solid #f0dfae;
  border-radius:5px; padding:6px 10px; margin-top:6px; }
button.soft { background:#fff6d9; border-color:#f0dfae; color:#7a5c00; }
.stage { touch-action: none; }

/* スマホでは、キャンバスを画面の上に置き、操作ボタンがスクロールせず届く高さに収める。
   キャンバスは touch-action:none なので指を置いたままではスクロールできない(2026-09-04 指摘)。 */
header { margin-bottom: 8px; }
.stage { margin-bottom: 8px; }
canvas { max-height: 58vh; width: auto; object-fit: contain; }
main > .note { margin-top: 12px; }

/* 入力中はキャンバスを上に固定して、打ちながら結果が見えるようにする */
body.typing header { display: none; }
body.typing .stage {
  position: fixed; top: 0; left: 8px; right: 8px; z-index: 20;
  margin: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.12);
}
body.typing canvas { max-height: 40vh; }

/* 見出しはボケてらしく黄色の帯にする */
header { background: var(--accent); border-radius: 5px; padding: 10px 14px; }
h1 { color: var(--on-accent); font-weight: 800; letter-spacing: .02em; }
.stage, .panel, .drop { background:#fff; }
.mode.on, button.primary { box-shadow: 0 1px 0 var(--accent-line); }
body.typing header { display: none; }

/* 説明ページ・本文ブロック */
.doc { max-width: 1000px; margin: 20px auto 0; background:#fff; border:1px solid var(--line);
  border-radius:5px; padding:16px; line-height:1.9; }
.doc h2 { font-size:17px; margin:20px 0 8px; padding-left:10px; border-left:5px solid var(--accent); }
.doc h2:first-of-type { margin-top:4px; }
.doc p, .doc li { font-size:15px; color:#444; }
.doc ol, .doc ul { padding-left:1.4em; }
.doc li { margin-bottom:6px; }
.doc a { color:#1a5fa8; }