:root{
  --black:#111;
  --paper:#f2f0e9;
  --ink:#171616;
  --yellow:#f0c900;
  --line:#d4d0c6;
  --muted:#67645e;
}
*{box-sizing:border-box}
html{background:#d6d8d5}
body{
  margin:0;
  color:var(--ink);
  background:linear-gradient(180deg,#dddcd6,#efede7);
  font-family:"Noto Sans JP",-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
}
button,input{font:inherit}
button{cursor:pointer}
.site-header{
  position:relative;
  z-index:20;
  min-height:62px;
  padding:0 max(18px,env(safe-area-inset-right)) 0 max(18px,env(safe-area-inset-left));
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:18px;
  color:#fff;
  background:#111;
}
.site-header a{color:inherit;text-decoration:none;font-weight:900}
.site-header .brand{font-size:18px}
.site-header nav{display:flex;align-items:center;gap:7px;font-size:13px;white-space:nowrap}
.site-header nav span{color:#777}
.builder{
  width:min(100%,1440px);
  margin:auto;
  padding:28px;
  display:grid;
  grid-template-columns:minmax(300px,380px) minmax(0,1fr);
  gap:26px;
  align-items:start;
}
.form-panel,.preview-panel{
  border:1px solid rgba(17,17,17,.12);
  border-radius:18px;
  background:rgba(250,249,245,.9);
  box-shadow:0 14px 40px rgba(21,22,20,.12);
}
.form-panel{padding:22px}
.preview-panel h2{
  margin:0 0 20px;
  font-size:20px;
  font-weight:900;
}
.inline-field{
  display:grid;
  grid-template-columns:90px minmax(0,1fr) 42px;
  align-items:center;
  gap:9px;
  margin-top:12px;
}
.inline-field>span{font-size:13px;font-weight:900}
.inline-field input{
  width:100%;
  min-width:0;
  height:42px;
  padding:0 11px;
  border:1px solid #aaa69d;
  border-radius:8px;
  background:#fff;
  outline:none;
}
.inline-field input:focus{border-color:#111;box-shadow:0 0 0 3px rgba(240,201,0,.32)}
.inline-field small{text-align:right;color:var(--muted);font-size:11px}
.stamp-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px;margin-top:18px}
.stamp-choice{
  position:relative;
  min-width:0;
  padding:7px;
  border:2px solid transparent;
  border-radius:11px;
  background:#e5e3dc;
  color:#222;
}
.stamp-choice.is-active{border-color:var(--yellow);background:#fff}
.stamp-choice img{
  display:block;
  width:100%;
  aspect-ratio:1;
  object-fit:contain;
  border-radius:7px;
  background:#fff;
}
.stamp-choice span{display:block;margin-top:5px;font-size:11px;font-weight:700}
.stamp-add-row,.stamp-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-top:12px;
  font-size:12px;
}
.small-button,.text-button{
  border:0;
  border-radius:8px;
  padding:8px 10px;
  font-weight:800;
}
.small-button{background:#222;color:#fff}
.small-button.accent{background:var(--yellow);color:#111}
.preview-panel{
  position:sticky;
  top:18px;
  padding:22px;
}
.preview-panel h2{margin-bottom:14px}
.canvas-shell{
  width:100%;
  overflow:hidden;
  border:3px solid var(--yellow);
  background:#ddd;
  box-shadow:0 8px 24px rgba(0,0,0,.15);
  touch-action:none;
}
#headerCanvas{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/1;
  touch-action:none;
}
.edit-tools{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:18px;
  margin-top:16px;
}
.edit-tools label{display:grid;grid-template-columns:48px 1fr;align-items:center;gap:10px;font-size:12px;font-weight:900}
.edit-tools input{width:100%;accent-color:#111}
.stamp-actions{justify-content:flex-end;flex-wrap:wrap}
.stamp-actions>span{margin-right:auto;color:var(--muted)}
.text-button{padding:7px 9px;background:#e2e0d9;color:#222}
.text-button:disabled{cursor:default;opacity:.38}
.text-button.danger{color:#a3241d}
.finish-actions{
  display:grid;
  grid-template-columns:1.35fr 1fr;
  gap:10px;
  margin-top:18px;
}
.primary-button,.secondary-button{
  min-height:52px;
  border-radius:11px;
  font-weight:900;
}
.primary-button{border:0;background:#111;color:#fff}
.secondary-button{border:2px solid #111;background:transparent;color:#111}
.status-message{min-height:20px;margin:10px 0 0;color:#555;font-size:12px}

@media(max-width:780px){
  .site-header{min-height:54px}
  .site-header .brand{font-size:15px}
  .site-header nav{gap:3px;font-size:10px}
  .builder{display:flex;flex-direction:column;padding:12px;gap:12px}
  .form-panel,.preview-panel{width:100%;border-radius:13px}
  .form-panel{padding:14px}
  .inline-field{grid-template-columns:78px minmax(0,1fr) 37px;gap:6px;margin-top:8px}
  .inline-field>span{font-size:12px}
  .inline-field input{height:38px;font-size:13px}
  .stamp-grid{grid-template-columns:repeat(4,1fr);gap:6px;margin-top:10px}
  .stamp-choice{padding:4px;border-radius:8px}
  .stamp-choice span{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .stamp-add-row{margin-top:8px}
  .preview-panel{position:static;padding:12px}
  .preview-panel h2{margin-bottom:9px;font-size:17px}
  .edit-tools{gap:9px;margin-top:11px}
  .edit-tools label{grid-template-columns:38px 1fr;gap:6px;font-size:11px}
  .stamp-actions{gap:6px;margin-top:8px;font-size:10px}
  .text-button{font-size:10px}
  .finish-actions{grid-template-columns:1fr;margin-top:12px}
  .primary-button,.secondary-button{min-height:48px}
}
@media(max-width:380px){
  .site-header .brand{font-size:13px}
}