*{box-sizing:border-box}body{font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;margin:0;background:#f6f7f9;color:#111}
.container{max-width:1200px;margin:0 auto;padding:24px}
h1{font-size:22px;margin:0 0 6px}
.syncbar{display:flex;justify-content:flex-end;align-items:center;margin:6px 0 12px;color:#475569;font-size:13px}
.syncbar input{transform:scale(1.1);margin-right:6px}
.panel{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:16px}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
label{display:block;font-size:12px;margin:8px 0}
input,textarea,select,button{width:100%;padding:10px;border:1px solid #d1d5db;border-radius:8px;font-size:14px}
button{cursor:pointer}
.row{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.row2{display:grid;grid-template-columns:2fr 1fr;gap:8px;align-items:end}
.filename-row{grid-template-columns:1fr 1fr}
#preview{width:100%;height:auto;border:1px dashed #cbd5e1;border-radius:8px;background:#fff;touch-action:none;-ms-touch-action:none;user-select:none;-webkit-user-select:none}
.help{font-size:12px;color:#64748b;margin-top:6px}
.warn{background:#fff7ed;border:1px solid #fed7aa;padding:8px;border-radius:6px}
.scrollbox{max-height:82vh;overflow:auto}
.left-mask{position:relative}
.left-mask::before{content:"記入例";position:sticky;top:0;left:0;right:0;display:block;padding:6px 10px;background:linear-gradient(#f8fafc,#eef2ff);border:1px solid #c7d2fe;border-radius:8px;margin:-6px -6px 8px -6px;color:#3730a3;font-weight:600;font-size:12px}
.left-mask::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(45deg,rgba(0,0,0,.05),rgba(0,0,0,.05) 8px,rgba(0,0,0,0) 8px,rgba(0,0,0,0) 16px);pointer-events:none;border-radius:10px}
@media (max-width:900px){
  .grid{grid-template-columns:1fr}
  .scrollbox{max-height:unset;overflow:visible}
  .row{grid-template-columns:1fr}
  .row2{grid-template-columns:1fr}
}