/* ====== 実行環境の共通スタイル（HTML版・p5.js版で共用）====== */
:root {
    --bg: #15151a;
    --panel: #1b1b21;
    --panel-head: #202028;
    --code-bg: #17171c;
    --term-bg: #0e0e12;
    --label-bg: #141419;
    --border: #2b2b33;
    --text: #e8e8ec;
    --code-text: #e3e6ea;
    --muted: #8a8a96;
    --muted2: #6c6c78;
    --muted3: #5f5f6a;
    --out: #d8dbe0;
    --echo: #7cc6ff;
    --wait: #ffd479;
    --err: #ff8a80;
    --err-detail: #c9938d;
    --accent: #f0a83d;
    --ui-font: ui-sans-serif, -apple-system, "Hiragino Kaku Gothic ProN", sans-serif;
    --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

body {
    margin: 0; height: 100vh; min-height: 640px; overflow: hidden;
    background: var(--bg); color: var(--text); font-family: var(--ui-font);
    display: flex; flex-direction: column;
}

header {
    display: flex; align-items: center; gap: 16px; padding: 10px 20px;
    background: var(--panel); border-bottom: 1px solid var(--border); flex-shrink: 0;
}
header h1 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: .01em; }
.spacer { flex: 1; }
.hint { font-size: 12px; color: var(--muted); }

button {
    font-family: inherit; font-size: 13px; cursor: pointer;
    border: 1px solid var(--border); border-radius: 6px;
    background: transparent; color: var(--text); padding: 8px 14px;
}
button:hover { filter: brightness(1.15); }
button.primary {
    display: flex; align-items: center; gap: 8px;
    background: var(--accent); color: #1b1206; border: none;
    padding: 9px 18px; font-size: 14px; font-weight: 700;
}
button.danger { display: flex; align-items: center; gap: 7px; color: var(--err); border-color: #4a2b2b; }
button:disabled { opacity: .45; cursor: default; filter: none; }

main { flex: 1; display: grid; grid-template-columns: 1fr 0; min-height: 0; transition: grid-template-columns .15s; }
main.canvas-open { grid-template-columns: 1fr 400px; }

.left { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.scroll { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; min-height: 0; }
.card { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; background: var(--panel); flex-shrink: 0; }
.card.grow { display: flex; flex-direction: column; flex: 1; min-height: 220px; }
.card-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: var(--panel-head); user-select: none; }
.card-head.clickable { cursor: pointer; }
.card-title { font-size: 12.5px; font-weight: 600; color: #c4c4cc; }
.card.grow .card-title { color: var(--text); }
.card-sub { font-size: 11px; color: var(--muted3); }
.tri { transition: transform .15s; flex-shrink: 0; }
.tri.open { transform: rotate(90deg); }
pre.readonly { margin: 0; padding: 14px 16px; font: 12.5px/1.7 var(--mono); color: #9aa0ac; background: var(--code-bg); white-space: pre-wrap; overflow-x: auto; }
.card-head .spacer { flex: 1; }
.toggle { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--muted); cursor: pointer; user-select: none; }
.toggle input { accent-color: var(--accent); margin: 0; }
.toggle input[type=range] { width: 90px; }
body:not(.highlight-on) .hl-only { display: none; }

/* コード欄と、その後ろに敷く実行行のハイライト */
.editor { position: relative; flex: 1; display: flex; min-height: 200px; background: var(--code-bg); }
.hl-layer { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.hl-line { position: absolute; left: 0; right: 0; background: rgba(240, 168, 61, .16); border-left: 3px solid var(--accent); }
#code { flex: 1; resize: none; border: none; outline: none; background: transparent; color: var(--code-text); font: 13.5px/1.7 var(--mono); padding: 14px 16px; white-space: pre; position: relative; z-index: 1; }

/* エディタとターミナルの境目。ドラッグで高さを変えられる */
.splitter {
    flex-shrink: 0; height: 7px; cursor: row-resize; background: var(--border);
    position: relative;
}
.splitter::after {
    content: ""; position: absolute; left: 50%; top: 3px;
    width: 40px; height: 1px; margin-left: -20px; background: var(--muted3);
}
.splitter:hover, .splitter.dragging { background: var(--accent); }
body.resizing { cursor: row-resize; user-select: none; }
body.resizing iframe { pointer-events: none; }   /* ドラッグ中にiframeへ吸われないように */

.term-wrap { flex-shrink: 0; height: 260px; display: flex; flex-direction: column; background: var(--term-bg); }
.term-label { display: flex; align-items: center; gap: 8px; padding: 6px 14px; background: var(--label-bg); font-size: 11.5px; font-weight: 700; letter-spacing: .06em; color: var(--muted2); }
#terminal { flex: 1; overflow-y: auto; padding: 10px 14px; font: 13px/1.6 var(--mono); white-space: pre-wrap; word-break: break-word; }
.l-sys { color: #5f6a7a; }
.l-out { color: var(--out); }
.l-echo { color: var(--echo); }
.l-err { color: var(--err); cursor: pointer; }
.err-detail { color: var(--err-detail); background: #241416; border-left: 2px solid #6b2a26; padding: 6px 10px; margin: 4px 0 4px 12px; white-space: pre-wrap; }
#stdin { background: transparent; border: none; border-bottom: 1px solid var(--wait); outline: none; color: var(--wait); font: inherit; width: 16ch; caret-color: var(--wait); }

.right { display: flex; flex-direction: column; min-width: 0; overflow: hidden; }
.right .term-label { border-bottom: 1px solid var(--border); }
#frame { flex: 1; width: 100%; border: none; background: #111116; }

dialog { background: var(--panel); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 20px; font-family: var(--ui-font); min-width: 420px; }
dialog::backdrop { background: rgba(0,0,0,.5); }
dialog h2 { margin: 0 0 14px; font-size: 15px; }
dialog label { display: block; font-size: 12px; color: var(--muted); margin: 12px 0 4px; }
dialog input[type=text] { width: 100%; background: var(--code-bg); border: 1px solid var(--border); border-radius: 6px; color: var(--code-text); font: 12.5px var(--mono); padding: 8px 10px; }
dialog .row { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }
dialog .note { font-size: 11.5px; color: var(--muted3); margin-top: 6px; line-height: 1.6; }

/* キャンバスを持たない HTML版では、関係する部分を隠す */
body[data-canvas="off"] .right,
body[data-canvas="off"] #btnCanvas,
body[data-canvas="off"] .p5-only { display: none; }
body[data-canvas="off"] .left { border-right: none; }