/* WEB印判：錠前師と同じ作り。左に入力、右に QR の見本 */
.inb{
	--inb-ink:#1c2b36; --inb-text:#2a3a46; --inb-mute:#5f6f7b; --inb-rule:#d5e0e8;
	--inb-sky:#e4f2fb; --inb-blue:#0c6283; --inb-teal:#08475f; --inb-coral:#f0634a; --inb-coral2:#c4412b; --inb-red:#c2412b;
	--inb-head:"Zen Kaku Gothic New","Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
	border:1px solid var(--inb-rule); border-radius:2px; background:#fff; color:var(--inb-text);
	font-size:15px; line-height:1.85; margin:0 0 2.4em;
}
.inb *,.inb *::before,.inb *::after{box-sizing:border-box}
.inb p,.prose .inb p{margin:0}
.inb button,.inb input,.inb select,.inb textarea{font:inherit;color:inherit}
.inb :focus-visible{outline:2px solid var(--inb-coral); outline-offset:2px}
.inb [hidden]{display:none !important}

.inb-main{background:var(--inb-sky); padding:28px; display:grid; grid-template-columns:minmax(0,1fr) 272px; gap:28px; align-items:start}
.inb-input{display:flex; flex-direction:column; gap:10px; min-width:0}
.inb-text{width:100%; min-height:120px; padding:12px 14px; border:1px solid var(--inb-rule); border-radius:2px; background:#fff; font-size:15px; line-height:1.7; resize:vertical; word-break:break-all}
.inb-count{font-size:12.5px; color:var(--inb-mute); min-height:1.6em}
.inb-preview{position:relative; background:#fff; border:1px solid var(--inb-rule); border-radius:2px; padding:15px; display:flex; align-items:center; justify-content:center}
.inb-canvas{display:block; width:240px; height:240px; image-rendering:pixelated}
.inb-msg{position:absolute; inset:15px; display:flex; align-items:center; justify-content:center; text-align:center; font-size:13px; font-weight:500; color:var(--inb-red); line-height:1.7}

.inb-actions{display:flex; flex-wrap:wrap; gap:10px}
.inb-btn{appearance:none; min-height:48px; padding:0 22px; border:1.5px solid transparent; border-radius:2px; font-family:var(--inb-head); font-weight:700; font-size:15px; line-height:1.4; cursor:pointer}
.inb-btn--main{background:var(--inb-coral); color:#fff}
.inb-btn--main:hover{background:var(--inb-coral2)}
.inb-btn--ghost{background:#fff; border-color:var(--inb-blue); color:var(--inb-blue)}
.inb-btn--ghost:hover{background:var(--inb-sky)}
.inb-btn:disabled{opacity:.45; cursor:not-allowed}
.inb-note{font-size:12px; color:var(--inb-mute); line-height:1.75}
.inb-warn{color:var(--inb-red); font-weight:500}

.inb-acc{border-top:1px solid var(--inb-rule)}
.inb-acc > summary{list-style:none; cursor:pointer; display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:52px; padding:10px 28px; font-family:var(--inb-head); font-weight:700; font-size:15px; color:var(--inb-ink)}
.inb-acc > summary::-webkit-details-marker{display:none}
.inb-acc > summary:hover{background:#f4f9fc}
.inb-chev{flex:none; transition:transform .2s}
.inb-acc[open] .inb-chev{transform:rotate(180deg)}
.inb-acc__body{padding:6px 28px 26px; display:flex; flex-direction:column; gap:18px; font-size:14px}

.inb-field{border:0; margin:0; padding:0; min-width:0; display:flex; flex-direction:column; gap:6px}
.inb-field legend,.inb-flabel{display:block; padding:0; margin:0 0 2px; font-family:var(--inb-head); font-weight:700; font-size:14px; color:var(--inb-teal)}
.inb-field legend{margin-bottom:8px}
.inb-chips{display:flex; flex-wrap:wrap; gap:8px}
.inb-chip{appearance:none; background:#fff; border:1px solid var(--inb-rule); border-radius:2px; padding:5px 14px; font-size:13.5px; cursor:pointer}
.inb-chip:hover{border-color:var(--inb-blue)}
.inb-chip[aria-pressed="true"]{border-color:var(--inb-blue); color:var(--inb-blue); background:var(--inb-sky); font-weight:700}
.inb-two{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px; align-items:end}
.inb-color{display:flex; align-items:center; gap:10px}
.inb-color input{width:52px; height:36px; padding:2px; border:1px solid var(--inb-rule); border-radius:2px; background:#fff; cursor:pointer}
.inb .inb-color code{font-family:ui-monospace,SFMono-Regular,Consolas,monospace; font-size:13px; color:var(--inb-mute); background:none; border:0; padding:0}
.inb-range{width:100%; height:28px; margin:0; accent-color:var(--inb-blue)}
.inb-input-text{width:100%; padding:8px 12px; border:1px solid var(--inb-rule); border-radius:2px; background:#fff; font-size:15px}
.inb-file{font-size:14px}
.inb-opt{display:flex; align-items:center; gap:10px; border:1px solid var(--inb-rule); border-radius:2px; padding:8px 12px; cursor:pointer; min-height:42px}
.inb-opt input{width:18px; height:18px; margin:0; accent-color:var(--inb-blue)}
.inb-kind{display:flex; flex-direction:column; gap:14px}
.inb-tm{border-top:1px solid var(--inb-rule); padding:10px 28px; font-size:11.5px; color:var(--inb-mute)}

@media (max-width:720px){
	.inb-main{grid-template-columns:1fr; padding:20px 16px; gap:18px}
	.inb-preview{order:-1; justify-self:center}
	.inb-acc > summary{padding:10px 16px; font-size:14.5px}
	.inb-acc__body{padding:4px 16px 20px}
	.inb-two{grid-template-columns:1fr}
	.inb-btn{flex:1 1 auto; padding:0 14px; white-space:nowrap}
	.inb-tm{padding:10px 16px}
}
@media (prefers-reduced-motion:reduce){ .inb-chev{transition:none} }