body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", sans-serif; color: #222; line-height: 1.7; }
#app { margin: 10px auto; width: 90vw; max-width: 900px; padding-bottom: 80px; }
h1 { font-size: 1.2em; }
h3 { font-size: 1em; margin: 24px 0 6px; }
h2 { font-size: 1.05em; margin: 32px 0 6px; padding-left: 8px; border-left: 4px solid #999; }
nav.menu { font-size: 0.9em; color: #777; }
nav.menu a.current { color: #222; font-weight: bold; text-decoration: none; }
a { color: #0645ad; }
table { border-collapse: collapse; width: 100%; margin: 0; }
th, td { padding: 5px 10px; border: 1px solid #ccc; text-align: left; vertical-align: top; }
th { background: #f3f3f3; white-space: nowrap; }
code { font-family: Consolas, Menlo, monospace; font-size: 0.95em; }
.scroll { overflow-x: auto; }
ul { padding-left: 1.4em; }
td pre { margin: 0; }
td pre code.hljs { padding: 6px 8px; border-radius: 4px; background: #f7f7f7; font-size: 0.9em; }
p code, li code { background: #f7f7f7; padding: 1px 4px; }
.good { color: #1a7f37; }
.bad { color: #cf222e; }

/* 早見表（タグ/プロパティ・説明・例の3列）：全セクションで列幅をそろえる */
table.cs { table-layout: fixed; min-width: 640px; }
table.cs th:nth-child(1) { width: 22%; }
table.cs th:nth-child(2) { width: 33%; }
table.cs th:nth-child(3) { width: 45%; }
table.cs td { overflow-wrap: anywhere; }
table.cs td pre code.hljs { white-space: pre-wrap; overflow-wrap: anywhere; }

/* 表の外のコードブロック：背景・枠・余白で、コードだと分かるようにする */
pre code.hljs { padding: 12px 14px; background: #f7f7f7; border: 1px solid #ddd; border-radius: 6px; font-size: 0.9em; line-height: 1.6; }
td pre code.hljs { padding: 6px 8px; border: 0; }

/* 記号の読み方（記号・読み方・意味・例の4列） */
table.cs4 { table-layout: fixed; min-width: 720px; }
table.cs4 th:nth-child(1) { width: 14%; }
table.cs4 th:nth-child(2) { width: 20%; }
table.cs4 th:nth-child(3) { width: 28%; }
table.cs4 th:nth-child(4) { width: 38%; }
table.cs4 td { overflow-wrap: anywhere; }
table.cs4 td pre code.hljs { white-space: pre-wrap; overflow-wrap: anywhere; }
table.cs4 td.sym { font-family: Consolas, Menlo, monospace; font-size: 1.1em; font-weight: bold; }

/* 予約語一覧（単語・説明の2列） */
table.cs2 { table-layout: fixed; min-width: 520px; }
table.cs2 th:nth-child(1) { width: 32%; }
table.cs2 th:nth-child(2) { width: 68%; }
table.cs2 td { overflow-wrap: anywhere; }
table.cs2 td.sym { font-family: Consolas, Menlo, monospace; font-weight: bold; }

/* コードのコピーボタン（pre.copyable の右上） */
.codebox { position: relative; }
.copy-btn { position: absolute; top: 6px; right: 6px; padding: 2px 10px; font-size: 0.8em; color: #444; background: #fff; border: 1px solid #bbb; border-radius: 4px; cursor: pointer; }
.copy-btn:hover { background: #f0f0f0; }