:root{
  --washi:#FAF7F0; --ink:#26241F; --ink-soft:#6B675E; --line:#E4DFD3;
  --indigo:#1F3A5F; --accent:#C73E2E; --amber:#D9A441;
  --serif:"Hiragino Mincho ProN","Yu Mincho","MS PMincho",serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic UI","Yu Gothic",Meiryo,system-ui,sans-serif;background:#EFEAE0;color:var(--ink)}
.app{max-width:1120px;margin:0 auto;padding:24px 16px 64px;display:flex;gap:28px;align-items:flex-start}
/* ---- controls ---- */
.panel{width:320px;flex-shrink:0;background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px}
.panel h1{font-size:19px;font-weight:700;letter-spacing:.05em}
.panel h1 small{font-size:11px;font-weight:500;color:var(--ink-soft);margin-left:6px}
.f{margin-top:16px}
.f label{display:block;font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink-soft);margin-bottom:6px}
.f input, .f textarea{width:100%;font-family:inherit;font-size:14px;padding:11px 12px;border:1.5px solid var(--line);border-radius:10px;background:#FDFCF9;outline:none}
.f input:focus, .f textarea:focus{border-color:var(--indigo)}
.f textarea{resize:vertical;min-height:56px;line-height:1.6}
.tabs{display:flex;gap:6px;margin-top:18px}
.tabs button{flex:1;font-family:inherit;font-size:12.5px;font-weight:700;padding:10px 6px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer}
.tabs button.on{background:var(--ink);border-color:var(--ink);color:#fff}
.print-btn{width:100%;margin-top:18px;font-family:inherit;font-size:15px;font-weight:700;letter-spacing:.06em;color:#fff;background:var(--accent);border:none;border-radius:999px;padding:14px;cursor:pointer;box-shadow:0 6px 16px rgba(199,62,46,.35)}
.hint{font-size:11px;color:var(--ink-soft);line-height:1.8;margin-top:14px;border-top:1px solid var(--line);padding-top:12px}
.hint b{color:var(--ink)}
.hint .warn{color:var(--accent);font-weight:700}
/* ---- preview ---- */
.stage{flex:1;min-width:0}
.stage-label{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink-soft);margin-bottom:10px}
.fitbox{width:100%;overflow:hidden}
.sheet-wrap{transform-origin:top left}
/* ---- A4 sheet (shared) ---- */
.sheet{width:210mm;height:297mm;background:#fff;box-shadow:0 14px 40px rgba(30,26,18,.18);display:none;position:relative;overflow:hidden}
.sheet.active{display:block}
/* ---- sample QR grid ---- */
.qr-grid{display:grid;grid-template-columns:repeat(17,1fr);grid-template-rows:repeat(17,1fr);width:100%;height:100%;background:#fff}
.qr-grid i{background:transparent;border-radius:1px}
.qr-grid i.on{background:#1B1A17}
.qrbox{position:relative}
.qr-sample{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none}
.qr-sample span{font-weight:700;letter-spacing:.24em;color:rgba(199,62,46,.6);background:rgba(255,255,255,.72);padding:1mm 2.5mm;border-radius:2mm;transform:rotate(-18deg)}
/* ---- wall poster ---- */
.wall{padding:18mm 16mm;text-align:center;display:flex;flex-direction:column;align-items:center}
.wall .brand{font-size:13pt;font-weight:700;letter-spacing:.4em;color:var(--ink-soft)}
.wall .main{font-size:38pt;font-weight:700;letter-spacing:.04em;line-height:1.4;margin-top:10mm;white-space:pre-line}
.wall .qrbox{background:#fff;padding:5mm;border:1.2mm solid var(--ink);border-radius:5mm;margin-top:12mm}
.wall .qrbox .qr-grid{width:78mm;height:78mm}
.wall .qr-sample span{font-size:14pt}
.wall .sub{font-size:14pt;line-height:1.9;margin-top:11mm;color:var(--ink);white-space:pre-line}
.wall .trust{display:flex;gap:4mm;margin-top:9mm}
.wall .trust span{font-size:9.5pt;font-weight:700;color:var(--accent);border:.5mm solid var(--accent);border-radius:99px;padding:1.8mm 4.5mm}
.wall .store{position:absolute;bottom:14mm;left:0;right:0;text-align:center}
.wall .store .n{font-family:var(--serif);font-size:17pt;font-weight:700}
.wall .store .u{font-size:8.5pt;color:var(--ink-soft);margin-top:2mm;letter-spacing:.04em}
/* ---- table tent ---- */
.tri .panelface{position:absolute;left:0;width:210mm;height:99mm}
.tri .pA{top:0}
.tri .pB{top:99mm}
.tri .pC{top:198mm;height:99mm}
.face{width:210mm;height:99mm;display:flex;align-items:center;padding:8mm 12mm;gap:9mm}
.pA .face{transform:rotate(180deg)}
.face .qrbox{background:#fff;padding:3.5mm;border:.9mm solid var(--ink);border-radius:3.5mm;flex-shrink:0}
.face .qrbox .qr-grid{width:56mm;height:56mm}
.face .qr-sample span{font-size:10pt}
.face .tx{flex:1;min-width:0}
.face .brand{font-size:9pt;font-weight:700;letter-spacing:.4em;color:var(--ink-soft)}
.face .main{font-size:24pt;font-weight:700;letter-spacing:.03em;line-height:1.35;margin-top:3mm;white-space:pre-line}
.face .sub{font-size:9.5pt;line-height:1.8;margin-top:3.5mm;color:var(--ink);white-space:pre-line}
.face .store{font-family:var(--serif);font-size:11pt;font-weight:700;margin-top:3.5mm}
.fold{position:absolute;left:0;right:0;border-top:.35mm dashed #BBB4A4;z-index:3}
.fold span{position:absolute;right:4mm;top:-2.6mm;font-size:6.5pt;color:#A79F8D;background:#fff;padding:0 2mm;letter-spacing:.2em}
.f1{top:99mm}
.f2{top:198mm}
.pC{padding:9mm 12mm;display:flex;flex-direction:column;justify-content:space-between}
.pC .howto{font-size:8.5pt;color:var(--ink-soft);line-height:2}
.pC .howto b{color:var(--ink);font-size:9pt}
.pC .bottomline{display:flex;justify-content:space-between;align-items:flex-end}
.pC .bn{font-family:var(--serif);font-size:10pt;font-weight:700;color:var(--ink-soft)}
.pC .base{font-size:7.5pt;color:#B5AD9B;letter-spacing:.3em}
/* ---- responsive ---- */
@media (max-width:860px){
  .app{flex-direction:column}
  .panel{width:100%}
}
/* ---- print ---- */
@page{size:A4 portrait;margin:0}
@media print{
  body{background:#fff}
  .panel,.stage-label,.hint{display:none}
  .app{padding:0;display:block;max-width:none}
  .fitbox{overflow:visible}
  .sheet-wrap{transform:none !important}
  .sheet{box-shadow:none}
}