:root {
  --bg: #f6f7f9; --panel: #fff; --ink: #1d2330; --muted: #6b7280; --line: #e3e6eb;
  --accent: #2563eb; --accent-soft: #dbeafe; --ok: #15803d; --warn: #b45309; --error: #b91c1c;
  --next: #e11d48; --prev: #65a30d; --changed: #fef3c7; --new: #ecfdf5;
  --str: #15803d; --num: #1d4ed8; --null: #9ca3af; --edge: #1f3a8a; --edge-dim: #c7cdd8;
  --mono: ui-monospace, "Cascadia Mono", "JetBrains Mono", Consolas, "D2Coding", monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); font: 15px/1.5 system-ui, "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
header.top { padding: 20px 24px 8px; }
header.top h1 { margin: 0; font-size: 22px; }
header.top p { margin: 4px 0 0; color: var(--muted); }
footer { padding: 24px; color: var(--muted); font-size: 13px; }
button { font: inherit; padding: 6px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); color: var(--ink); cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.share-box { margin: 10px 0; padding: 12px; border: 1px solid var(--line); border-radius: 8px; }
.share-box input { width: min(100%, 650px); padding: 7px; font: inherit; border: 1px solid var(--line); border-radius: 5px; }
.share-box p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
select, textarea { font: inherit; }
code { font-family: var(--mono); font-size: .92em; }

/* editor */
.editor { margin: 8px 24px 16px; padding: 14px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; }
.editor-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-bottom: 10px; }
.editor-bar label { display: flex; gap: 6px; align-items: center; color: var(--muted); }
.editor-bar select { padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
#status { color: var(--muted); }
#status.is-ok { color: var(--ok); } #status.is-warn { color: var(--warn); } #status.is-error { color: var(--error); }
.editor-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 12px; }
.code-input { position: relative; display: flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; min-height: 320px; }
.gutter { padding: 10px 8px 10px 12px; background: #f1f3f6; color: var(--muted); font-family: var(--mono); font-size: 13px; line-height: 1.5; text-align: right; white-space: pre; overflow: hidden; user-select: none; }
.editor-area { position: relative; flex: 1; min-width: 0; display: flex; }
#source, .overlay { margin: 0; padding: 10px 12px; font-family: var(--mono); font-size: 13px; line-height: 1.5; tab-size: 2; white-space: pre; box-sizing: border-box; }
#source { flex: 1; min-height: 320px; border: 0; outline: none; resize: vertical; overflow: auto; background: transparent; color: transparent; caret-color: var(--ink); position: relative; z-index: 1; }
#source::selection { background: #bfdbfe; }
.overlay { position: absolute; inset: 0; overflow: hidden; pointer-events: none; color: var(--ink); }
.stdin-input { display: flex; flex-direction: column; gap: 6px; }
.stdin-input label { color: var(--muted); font-size: 13px; }
#stdin { min-height: 120px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-family: var(--mono); font-size: 13px; resize: vertical; }
.problems { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-family: var(--mono); }
.problems .is-error { color: var(--error); } .problems .is-warn { color: var(--warn); }

/* trace view */
.viz { display: grid; grid-template-columns: minmax(320px, 46%) minmax(0, 1fr); gap: 16px; margin: 0 24px 24px; align-items: start; }
.tv-left { position: sticky; top: 12px; display: flex; flex-direction: column; gap: 10px; }
.tv-code { max-height: 62vh; overflow: auto; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 8px 0; font-family: var(--mono); font-size: 13px; line-height: 1.55; }
.tv-line { display: flex; align-items: stretch; white-space: pre; }
.tv-line.is-next { background: #fff1f2; }
.tv-line.is-next.is-error { background: #fee2e2; }
.tv-line.is-prev { background: #f7fee7; }
.tv-gutter { width: 26px; display: flex; align-items: center; justify-content: center; flex: none; }
.tv-ln { width: 38px; padding-right: 10px; text-align: right; color: var(--muted); flex: none; user-select: none; }
.tv-src { padding-right: 16px; }
.tv-arrow { display: inline-block; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid transparent; }
.tv-line.is-next .tv-arrow { border-left-color: var(--next); }
.tv-line.is-prev .tv-arrow { border-left-color: var(--prev); }
.tv-legend .tv-arrow.next { border-left-color: var(--next); } .tv-legend .tv-arrow.prev { border-left-color: var(--prev); }
.tv-nav { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; display: flex; flex-direction: column; gap: 8px; }
.tv-legend { font-size: 12px; color: var(--muted); display: flex; gap: 6px; align-items: center; }
.tv-slider { width: 100%; }
.tv-buttons { display: flex; gap: 6px; justify-content: center; }
.tv-position { text-align: center; color: var(--muted); font-size: 14px; }
.tv-position strong { color: var(--ink); }

.tv-right { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.tv-banner { padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.tv-banner.is-warn { background: #fef3c7; color: var(--warn); }
.tv-banner.is-fatal { background: #fee2e2; color: var(--error); }
.tv-title { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--muted); text-transform: uppercase; margin-bottom: 8px; }
.tv-stdout-wrap { background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; }
.tv-stdout { margin: 0; min-height: 44px; max-height: 160px; overflow: auto; font-family: var(--mono); font-size: 13px; white-space: pre-wrap; }
.tv-stdout.is-empty::before { content: "(아직 출력 없음)"; color: var(--null); }
.tv-memory { position: relative; display: grid; grid-template-columns: minmax(200px, 1fr) minmax(260px, 1.4fr); gap: 56px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 14px; min-height: 240px; overflow: visible; }
.tv-arrows { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.tv-edge { fill: none; stroke: var(--edge); stroke-width: 1.6; }
.tv-edge.is-heap { stroke: #0f766e; }
.tv-edge.is-dim { stroke: var(--edge-dim); }
#tv-head path { fill: var(--edge); } #tv-head-dim path { fill: var(--edge-dim); }
.tv-frames, .tv-heap { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.tv-frame { border: 1px solid var(--line); border-radius: 8px; background: #fafbfc; padding: 8px 10px; }
.tv-frame.is-current { background: var(--accent-soft); border-color: #93c5fd; }
.tv-frame.tv-globals { background: #f5f3ff; border-color: #ddd6fe; }
.tv-frame-title { font-family: var(--mono); font-size: 13px; font-weight: 600; margin-bottom: 4px; display: flex; justify-content: space-between; gap: 8px; }
.tv-frame-line { color: var(--muted); font-weight: 400; }
table { border-collapse: collapse; font-family: var(--mono); font-size: 13px; }
td, th { padding: 2px 8px; }
.tv-name { text-align: right; color: #374151; border-right: 1px solid var(--line); }
.tv-value { min-width: 36px; }
tr.is-changed td { background: var(--changed); }
tr.is-return td { font-style: italic; }
tr.tv-empty td, td.tv-empty { color: var(--null); font-style: italic; }
.tv-object { border: 1px solid var(--line); border-radius: 8px; background: #fff; padding: 6px 10px 8px; width: max-content; max-width: 100%; overflow-x: auto; }
.tv-object.is-new { background: var(--new); border-color: #a7f3d0; }
.tv-object-title { font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.tv-id { font-family: var(--mono); color: #9ca3af; margin-right: 6px; }
.tv-array th { font-weight: 400; color: var(--muted); font-size: 11px; border-bottom: 1px solid var(--line); }
.tv-array td { border: 1px solid var(--line); text-align: center; min-width: 32px; }
.tv-array td.is-changed { background: var(--changed); }
.tv-opaque { color: var(--null); font-size: 12px; font-style: italic; }
.tv-object.tv-scalar { padding: 4px 10px 6px; }
.tv-scalar-value { font-family: var(--mono); font-size: 13px; }
.editor-bar label.option { font-size: 13px; cursor: pointer; }
.tv-array td.tv-spare { border-style: dashed; color: var(--null); background: #fafafa; font-size: 11px; }
.tv-chain { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; font-family: var(--mono); font-size: 13px; }
.tv-chip { border: 1px solid var(--line); border-radius: 14px; padding: 2px 10px; background: #fff; }
.tv-chip.is-changed { background: var(--changed); }
.tv-link { color: var(--muted); }
.tv-bag .tv-chip { border-style: dashed; }
.tv-toggle { margin-top: 6px; padding: 2px 8px; font-size: 12px; color: var(--muted); border-color: transparent; background: transparent; }
.tv-toggle:hover { color: var(--accent); }
.tv-internals { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-start; margin-top: 8px; padding: 8px; border: 1px dashed var(--line); border-radius: 8px; background: #fcfcfd; }
.tv-internals .tv-object { background: #fff; }
.tv-chains { display: flex; flex-direction: column; gap: 8px; }
.tv-chain-row { display: flex; gap: 14px; align-items: flex-start; }
.tv-buckets .tv-fields td { padding: 1px 8px; font-size: 12px; }
.tv-note { color: var(--muted); font-size: 13px; }
.v-str { color: var(--str); } .v-num { color: var(--num); } .v-bool { color: #7c3aed; } .v-char { color: #b45309; }
.v-null { color: var(--null); font-style: italic; }
.hl-keyword { color: #7c3aed; font-weight: 600; } .hl-type { color: #0e7490; } .hl-class { color: #1d4ed8; }
.hl-string, .hl-char { color: #15803d; } .hl-number { color: #b45309; } .hl-literal { color: #be185d; }
.hl-comment { color: #6b7280; font-style: italic; } .hl-annotation { color: #a16207; }
.v-ref { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--edge); vertical-align: middle; margin-left: 2px; }
.v-ref.is-dim { background: var(--edge-dim); }

@media (max-width: 900px) {
  .editor-grid, .viz { grid-template-columns: 1fr; }
  .tv-left { position: static; }
  .tv-memory { grid-template-columns: 1fr; gap: 20px; }
}