.sc-form { margin-bottom: 18px; }
.sc-form .form-group { margin-bottom: 12px; }
.sc-form label { display: block; font-size: 13px; font-weight: bold; margin-bottom: 4px; color: #2c3e50; }
.sc-form input.form-control { max-width: 520px; }
.sc-paste { width: 100%; max-width: 100%; box-sizing: border-box; font-family: Consolas, Menlo, monospace; font-size: 12px; resize: vertical; }
.sc-size { font-size: 12px; color: #666; margin-top: 4px; }
.sc-status { font-size: 13px; color: #777; min-height: 1em; }
.sc-input-error { margin-top: 4px; font-size: 13px; color: #a94442; word-break: break-all; }

/* 入力の種類の切り替え。狭い幅では折り返しても重ならない */
.sc-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; border-bottom: 1px solid #ddd; }
.sc-tab { border: 1px solid #ccc; border-bottom: 0; background: #f5f5f5; color: #333; padding: 6px 14px; font-size: 14px; border-radius: 3px 3px 0 0; cursor: pointer; margin-bottom: -1px; }
.sc-tab.is-active { background: #fff; font-weight: bold; color: #1a5276; border-color: #ddd; border-bottom: 1px solid #fff; }

.sc-error { padding: 10px 12px; margin-bottom: 14px; border: 1px solid #ebccd1; background: #f2dede; color: #a94442; font-size: 13px; border-radius: 3px; word-break: break-all; }
.sc-error-link { white-space: nowrap; }
.sc-disclaimer { padding: 8px 12px; border: 1px solid #faebcc; background: #fcf8e3; color: #8a6d3b; font-size: 13px; border-radius: 3px; margin: 0 0 12px; }
.sc-title { font-size: 14px; font-weight: bold; margin: 18px 0 8px; border-left: 4px solid #337ab7; padding-left: 8px; }
.sc-note { font-size: 12px; color: #666; margin: 4px 0; }

/* 判定のバッジ。最も長い表記(判定不能)が入る幅にそろえる */
.sc-badge { display: inline-block; box-sizing: border-box; width: 5.5em; flex: none; text-align: center; padding: 1px 4px; border-radius: 3px; font-size: 12px; font-weight: bold; white-space: nowrap; vertical-align: middle; }
.sc-badge.sc-l-ok { background: #dff0d8; color: #3c763d; }
.sc-badge.sc-l-info { background: #d9edf7; color: #31708f; }
.sc-badge.sc-l-warn { background: #fcf8e3; color: #8a6d3b; }
.sc-badge.sc-l-bad { background: #f2dede; color: #a94442; }
.sc-badge.sc-l-unknown { background: #e8dff5; color: #5b3a8c; }
.sc-badge.sc-l-skip { background: #eee; color: #666; }

/* 概要(ラベル|値)。ラベル欄は固定幅にせず、最も長いラベルの幅にそろう(表の列) */
.sc-kv { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 8px; table-layout: auto; }
.sc-kv td { border: 1px solid #e3e3e3; padding: 5px 8px; vertical-align: top; text-align: left; }
.sc-kv td.sc-label { background: #fafafa; font-weight: bold; color: #2c3e50; white-space: nowrap; width: 1%; }
.sc-kv td.sc-value { word-break: break-all; overflow-wrap: anywhere; }

/* 3つの層の要約。広い幅では横一列で高さをそろえ、600px 以下では縦に積む */
.sc-layers { display: flex; gap: 10px; align-items: stretch; margin-bottom: 8px; }
.sc-layer-card { flex: 1 1 0; min-width: 0; border: 1px solid #ddd; border-radius: 3px; padding: 8px 10px; background: #fafafa; font-size: 13px; box-sizing: border-box; }
.sc-layer-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-layer-name { font-weight: bold; color: #2c3e50; }
.sc-layer-count { margin-top: 4px; color: #444; }
.sc-layer-reason { margin-top: 4px; color: #666; font-size: 12px; }

/* 判定の行 */
.sc-items { list-style: none; margin: 0 0 8px; padding: 0; }
.sc-item { display: flex; align-items: flex-start; gap: 8px; padding: 6px 0; border-bottom: 1px solid #f0f0f0; font-size: 13px; min-width: 0; }
.sc-item:last-child { border-bottom: 0; }
.sc-item-body { flex: 1; min-width: 0; word-break: break-all; overflow-wrap: anywhere; }
.sc-item-head { display: flex; flex-wrap: wrap; gap: 6px; }
.sc-layer { color: #555; font-size: 12px; border: 1px solid #ddd; border-radius: 3px; padding: 0 4px; white-space: nowrap; }
.sc-item-text { flex: 1 1 12em; min-width: 0; color: #2c3e50; }
.sc-item-pos { margin-top: 2px; font-family: Consolas, Menlo, monospace; font-size: 12px; color: #555; }
.sc-item-fix { margin-top: 2px; color: #31708f; }
.sc-example { margin-top: 4px; }
.sc-example-label { font-size: 12px; color: #666; }
.sc-example .copy-btn { margin-top: 4px; }
.sc-priority a { text-decoration: none; }
.sc-none { color: #3c763d; }

/* ブロックとノード */
.sc-card { border: 1px solid #ddd; border-radius: 3px; padding: 8px 12px; margin-bottom: 12px; min-width: 0; overflow-wrap: anywhere; }
.sc-card-title { font-size: 14px; font-weight: bold; margin: 0 0 8px; color: #2c3e50; }
.sc-block-state { font-size: 13px; margin-bottom: 6px; }
.sc-node { border-top: 1px dashed #e3e3e3; padding-top: 6px; margin-top: 6px; }
.sc-node-head { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 13px; align-items: baseline; word-break: break-all; overflow-wrap: anywhere; }
.sc-node-type { font-weight: bold; color: #1a5276; }
.sc-node-id, .sc-node-ptr { font-family: Consolas, Menlo, monospace; font-size: 12px; color: #555; min-width: 0; }
.sc-node-google { flex-basis: 100%; font-size: 12px; color: #555; }

/* 抜粋・整形した JSON。折り返して、横にはみ出さない */
.sc-pre { white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; background: #f8f8f8; border: 1px solid #e3e3e3; padding: 6px 8px; font-size: 12px; margin: 2px 0 0; font-family: Consolas, Menlo, monospace; }
.sc-json { max-height: 480px; overflow-y: auto; }
.sc-excerpt { font-family: Consolas, Menlo, monospace; font-size: 12px; background: #f8f8f8; border: 1px solid #e3e3e3; padding: 6px 8px; margin-bottom: 6px; white-space: pre-wrap; word-break: break-all; overflow-wrap: anywhere; }
.sc-ln { color: #999; }
.sc-mark { background: #f2dede; color: #a94442; padding: 0 1px; }
.sc-details { margin-top: 8px; font-size: 13px; }
.sc-details summary { cursor: pointer; color: #337ab7; }
.sc-details .copy-btn { margin-top: 4px; }
.sc-scope { font-size: 13px; padding-left: 20px; }
.sc-scope li { margin-bottom: 4px; word-break: break-all; overflow-wrap: anywhere; }

@media (max-width: 600px) {
	.sc-kv td.sc-label { width: auto; white-space: normal; word-break: keep-all; }
	.sc-layers { flex-direction: column; }
	.sc-layer-card { flex: none; }
}