/* サブネット計算 */
.sc-input-label { display: block; margin-top: 4px; }
.sc-input { font-family: Consolas, Menlo, monospace; }
.sc-examples { margin: 8px 0 4px; line-height: 2.2; }
.sc-examples-head { color: #555; margin-right: 2px; }
.sc-example {
	border: 1px solid #ccc; background: #f7f7f7; color: #333; border-radius: 3px;
	padding: 2px 8px; margin: 0 4px 0 0; font-family: Consolas, Menlo, monospace; font-size: 13px;
	word-break: break-all;
}
.sc-example:hover, .sc-example:focus { background: #ececec; }
.sc-error { margin-top: 10px; padding: 8px 12px; border: 1px solid #e4b9b9; background: #fdf0f0; color: #a40000; border-radius: 3px; }
.sc-notes { margin: 10px 0 0; padding: 8px 12px 8px 28px; border: 1px solid #e6d9a8; background: #fdf9e8; color: #5c4b00; border-radius: 3px; }
#sc_result { margin-top: 12px; }

.sc-table td { vertical-align: middle; }
.sc-table td.sc-label { white-space: nowrap; background: #f5f5f5; width: 1%; }
.sc-table td.sc-value { word-break: break-all; font-family: Consolas, Menlo, monospace; }
.sc-table td.sc-value .copy-btn { margin-left: 8px; }

.sc-h2 { font-size: 18px; margin: 24px 0 8px; padding-bottom: 4px; border-bottom: 1px solid #ddd; }
.sc-select { max-width: 320px; }
.sc-contains-result { margin-top: 8px; padding: 8px 12px; border-radius: 3px; border: 1px solid #ccc; background: #f7f7f7; word-break: break-all; }
.sc-contains-result.sc-rel-inside, .sc-contains-result.sc-rel-same { border-color: #9fcf9f; background: #eef8ee; color: #1d5c1d; }
.sc-contains-result.sc-rel-outside { border-color: #d9c38a; background: #fbf6e6; color: #5c4b00; }
.sc-contains-result.sc-rel-wider { border-color: #a9c4e0; background: #eef4fb; color: #1f4570; }
.sc-contains-result.sc-bad, .sc-contains-result.sc-rel-family { border-color: #e4b9b9; background: #fdf0f0; color: #a40000; }

.sc-split-info { margin: 8px 0; }
.sc-split-info .copy-btn { margin-left: 8px; }
.sc-split-table { font-family: Consolas, Menlo, monospace; font-size: 13px; }
.sc-split-table th { white-space: nowrap; font-family: inherit; }
.table-responsive > .sc-split-table > tbody > tr > td { white-space: normal; word-break: break-all; }
.table-responsive > .sc-split-table > tbody > tr > td.sc-no { white-space: nowrap; text-align: right; color: #666; }

/* スマホ幅: ラベルは語の途中で割らず、空白・記号の位置でだけ折り返す */
@media (max-width: 600px) {
	.sc-table td.sc-label { width: auto; white-space: normal; word-break: keep-all; }
	.sc-table td.sc-value .copy-btn { margin: 4px 0 0; display: inline-block; }
	.sc-select { max-width: none; }
}