/* src/public/css/json-schema.css … JSON Schema バリデーター＆ジェネレーター
   基本の見た目は calculator/money.css（お金の計算と共通）を使い、ここではこのツールだけの部品を足します。
   ダークモードは theme-dark.css の末尾（=== JSON Schema ===）にあります。 */

.js-label-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 8px; }
.js-label-row label { margin-bottom: 0 !important; }
.js-mini { padding: 5px 10px; font-size: 0.8rem; }
.js-code {
    width: 100%; box-sizing: border-box; padding: 12px; border: 1px solid #ccc; border-radius: 6px; background: #fff; color: inherit;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.88rem; line-height: 1.5; resize: vertical; tab-size: 2;
}
.js-code[readonly] { background: #f8fafc; }
.js-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 16px; }
.js-options { display: flex; flex-direction: column; gap: 10px; }
.js-check { display: inline-flex; align-items: center; gap: 8px; font-size: 0.92rem; cursor: pointer; margin: 4px 0 8px; }
.js-draft { max-width: 260px; margin: 4px 0 0; }
.js-verdict { margin: 0 0 12px; padding: 12px 14px; border-radius: 8px; font-weight: bold; }
.js-verdict.is-ok { background: #ecfdf5; color: #166534; border: 1px solid #bbf7d0; }
.js-verdict.is-ng { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.js-errors code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 0.85rem; overflow-wrap: anywhere; }
.js-errors td:first-child { min-width: 8em; }
.js-errors .js-err-msg { min-width: 12em; }
.js-errors tr.is-link { cursor: pointer; }
.js-errors tr.is-link:hover td, .js-errors tr.is-link:focus td { background-color: #eef3fb; }
.js-copied { min-height: 1.2em; margin: 8px 0 0; font-size: 0.85rem; color: #15803d; font-weight: bold; }

@media (max-width: 760px) {
    .js-two { grid-template-columns: 1fr; }
}