.qr-cols { display: flex; flex-wrap: wrap; gap: 20px; }
.qr-input { flex: 1 1 340px; min-width: 0; }
.qr-output { flex: 0 1 360px; min-width: 0; }
.qr-input label { display: block; font-size: 13px; font-weight: bold; margin-bottom: 4px; color: #2c3e50; }
.qr-input .checkbox label { font-weight: normal; }
.qr-input .form-group { margin-bottom: 12px; }
.qr-input select.form-control, .qr-input input.form-control, .qr-input textarea.form-control { max-width: 460px; }
.qr-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0 14px; max-width: 460px; margin-top: 6px; }
.qr-color { width: 60px; height: 34px; padding: 2px; border: 1px solid #ccc; border-radius: 3px; background: #fff; cursor: pointer; }

.qr-canvas-wrap { border: 1px solid #ddd; padding: 8px; background: #f7f7f7; text-align: center; }
.qr-canvas-wrap canvas { max-width: 100%; height: auto; image-rendering: pixelated; }
.qr-info { font-size: 12px; color: #777; margin: 8px 0; }
.qr-buttons .btn { margin-right: 6px; margin-bottom: 6px; }

.qr-messages { margin-top: 8px; }
.qr-msg { padding: 7px 10px; margin-bottom: 5px; border-left: 4px solid #ddd; background: #fafafa; font-size: 13px; }
.qr-msg.qr-m-warn { border-left-color: #f0ad4e; background: #fcf8e3; }
.qr-msg.qr-m-bad { border-left-color: #d9534f; background: #f2dede; color: #a94442; }

@media (max-width: 600px) {
	.qr-output { flex-basis: 100%; }
}

/* QRコードの読み取り */
.qr-h2 { font-size: 20px; margin: 28px 0 12px; }
.qrr-drop { border: 2px dashed #b8c4d0; border-radius: 8px; padding: 22px 14px; text-align: center; color: #4a5a6a; background: #fafcfe; cursor: pointer; }
.qrr-drop.qrr-over, .qrr-drop:focus { border-color: #1a5276; background: #eaf2f8; outline: none; }
.qrr-drop .material-icons { font-size: 36px; color: #1a5276; }
.qrr-pick { color: #1a5276; text-decoration: underline; cursor: pointer; font-weight: bold; }
.qrr-sub { font-size: 12px; color: #7b8896; margin-top: 4px; }
#qrr_out { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.qrr-preview canvas { max-width: 200px; border: 1px solid #dde3ea; border-radius: 4px; background: #fff; }
.qrr-result { flex: 1 1 260px; min-width: 0; }
.qrr-type { font-weight: bold; color: #1a5276; margin-bottom: 4px; }
.qrr-table th { width: 9em; padding-right: 12px; white-space: nowrap; font-weight: normal; color: #6b7a89; }
.qrr-val { word-break: break-all; white-space: pre-wrap; }
.qrr-warn { margin: 8px 0; padding: 8px 10px; background: #fff4e5; border-left: 4px solid #e67e22; color: #7a3d00; font-size: 13px; }