:root{
    --a4-w: 210mm;
    --a4-h: 297mm;
    --page-padding: 10mm;

    --stroke: rgba(15,23,42,0.14);
    --text: #0b1220;
    --muted: rgba(15,23,42,0.64);

    --accent: #2563eb;
    --accent2:#7c3aed;

    --sheet-scale: 0.42;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    font-family: system-ui, -apple-system, "Hiragino Sans", "Segoe UI", sans-serif;
    color:var(--text);
    background:#f1f5f9;
    display:flex;
    flex-direction:column;
    height:100vh;
  }

  header{
    position:sticky; top:0; z-index:50;
    background:#fff;
    border-bottom:1px solid var(--stroke);
    padding:10px 12px;
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    gap:12px;
  }
  .hdr-left{ display:flex; flex-direction:column; gap:2px; }
  .hdr-title{ font-weight:900; font-size:16px; line-height:1.2; }
  .hdr-sub{ font-size:11px; color:var(--muted); margin-top:2px; }
  .hdr-right{ display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end; }

  .btn{
    border:1px solid var(--stroke); background:#fff; padding:8px 12px; border-radius:10px;
    font-size:13px; font-weight:800; cursor:pointer; user-select:none; transition: transform 0.1s, opacity 0.1s;
  }
  .btn.primary{ background:linear-gradient(135deg,var(--accent), var(--accent2)); color:#fff; border:none; }
  .btn.secondary{ background:#f8fafc; color:#0b1220; border:1px solid #cbd5e1; }
  .btn.danger{ background:#fff5f5; color:#b91c1c; border:1px solid #fecaca; }
  .btn:active{ transform: translateY(1px); }
  .btn:disabled{ opacity:.45; cursor:not-allowed; }

  main{
    flex:1; overflow-y:auto; padding:0 0 40px 0;
    display:flex; flex-direction:column; align-items:center; gap:14px;
  }

  .tabs-container {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,0.95); backdrop-filter: blur(4px);
    width: 100%; border-bottom: 1px solid var(--stroke);
    padding: 10px; display: flex; justify-content: center;
  }
  .tabs{
    display:flex; gap:8px; overflow-x:auto; width:100%; max-width:520px;
    padding:2px; scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar{ display:none; }
  .tab{
    flex:0 0 auto; padding:8px 16px; border-radius:999px;
    border:1px solid #cbd5e1; background:#f8fafc; color: var(--muted);
    font-size:12px; cursor:pointer; font-weight:800; transition: all 0.2s ease; white-space:nowrap;
    appearance:none;
  }
  .tab.active{
    background:var(--accent); color:#fff; border-color:var(--accent);
    box-shadow: 0 4px 6px -1px rgba(37, 99, 235, 0.4); transform: translateY(-1px);
  }
  .tab:focus-visible, .btn:focus-visible{
    outline: 3px solid rgba(37,99,235,0.45);
    outline-offset: 2px;
  }

  /* Preview Stage */
  .stage{
    width: min(96vw, 520px);
    display:flex; flex-direction:column; gap:10px; align-items:center;
    margin-top:8px;
  }

  /* タブ内ページ送りUI */
  .pager{
    width: min(96vw, 520px);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding: 0 6px;
  }
  .pager .info{
    font-size:12px;
    font-weight:900;
    color: var(--muted);
    user-select:none;
    white-space:nowrap;
  }
  .pager .lr{
    display:flex; gap:8px;
  }

  .sheet-wrap{
    transform: scale(var(--sheet-scale)); transform-origin: top center;
    width: var(--a4-w); height: var(--a4-h);
    margin-bottom: calc(var(--a4-h) * (var(--sheet-scale) - 1) + 16px);
  }
  .sheet{
    width: var(--a4-w); height: var(--a4-h);
    background:#fff; position:relative; overflow:hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.10);
    border:1px solid rgba(2,6,23,0.10); border-radius: 12px;
  }
  .sheet-inner{
    width: 100%; height: 100%;
    padding: var(--page-padding);
    display:flex; flex-direction:column;
    align-items: stretch;
    gap: 0;
  }

  /* Block Items (ページ送りの単位) */
  .p-block { margin-bottom: 5mm; flex-shrink: 0; }
  .p-block-tight { margin-bottom: 2.5mm; flex-shrink: 0; }
  .p-block .table-wrap,
  .p-block .box{ box-shadow: 0 2px 8px rgba(15,23,42,0.03); }

  /* Components */
  .secTitle{
    font-size:14px; font-weight:1000; margin:0 0 2mm 0;
    border-bottom: 2px solid var(--accent); padding-bottom: 4px;
    display: inline-block;
  }
  .h1{ font-size:22px; font-weight:1000; margin:0; }
  .note{ font-size:11px; color:var(--muted); line-height:1.35; }

  .meta{ display:flex; gap:5mm; align-items:flex-start; margin-bottom:5mm; flex-wrap:wrap; }
  .meta > *{ flex: 0 0 auto; }

  .photoCard{
    border:1px solid var(--stroke); border-radius:12px; overflow:hidden;
    position:relative; background:#f8fafc; cursor:pointer;
  }
  .photoCard.large{ width: 58mm; height: 74mm; flex:0 0 auto; }
  .photoCard.medium{ width: 50mm; height: 38mm; flex:0 0 auto; }
  .photoCard.small{ width: 40mm; height: 30mm; flex:0 0 auto; }
  .photoCard img{
    position:absolute; left:50%; top:50%; width:120%; height:auto;
    transform-origin:center; pointer-events:none; user-select:none;
  }
  .photoCard .ph{
    position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
    color:#cbd5e1; font-weight:900; font-size:10px; text-align:center; padding:8px; white-space:pre-line;
  }
  .photoCard .cap{
    position:absolute; bottom:0; width:100%; background:rgba(255,255,255,0.85);
    font-size:10px; padding:3px 6px; text-align:center; font-weight:900; color:#0b1220;
  }

  .flow-grid { display:flex; flex-wrap:wrap; gap:4mm; }

  .box{
    border:1px solid var(--stroke); border-radius:10px; padding:8px; background:#fff;
    min-height:16mm; cursor:pointer; transition: background 0.1s;
    width: 100%;
  }
  .box.half { width: calc(50% - 2mm); }
  .box:active{ background:#f1f5f9; }
  .lbl{ font-size:10px; color:var(--muted); font-weight:900; }
  .val{ font-size:12px; white-space:pre-wrap; margin-top:2px; line-height:1.35; word-break:break-word; }
  .hint{ color:#cbd5e1; font-style:italic; font-weight:700; }

  /* Table */
  .table-wrap { width:100%; border:1px solid var(--stroke); border-radius:10px; overflow:hidden; background:#fff; }
  .trow{ display:grid; grid-template-columns: 25% 37.5% 37.5%; border-top:1px solid var(--stroke); }
  .trow:first-child{ border-top:none; }
  .thead{ background:#f8fafc; font-weight:1000; }
  .tcell{ padding:8px; font-size:11px; min-height:12mm; word-break:break-word; cursor:pointer; line-height:1.35; }

  /* Modal */
  .modal{
    position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:100;
    display:none; align-items:center; justify-content:center; padding:20px; backdrop-filter: blur(2px);
  }
  .modal.show{ display:flex; }
  .m-content{
    background:#fff; width:100%; max-width:520px; border-radius:15px; padding:20px;
    max-height:90vh; overflow-y:auto; box-shadow: 0 20px 60px rgba(0,0,0,0.25);
    animation: popIn 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  @keyframes popIn{ from{transform:scale(0.9); opacity:0;} to{transform:scale(1); opacity:1;} }
  .m-content h3{ margin:0 0 14px 0; font-size:16px; font-weight:1000; }

  textarea, input[type="text"], input[type="date"]{
    width:100%; padding:12px; border-radius:10px; border:1px solid rgba(15,23,42,0.18);
    font-size:16px; font-family: inherit; outline:none;
  }
  textarea:focus, input:focus{ border-color:var(--accent); }
  textarea{ min-height:140px; resize:vertical; }

  /* Photo editor */
  .editor-canvas{
    width:100%; height:260px; background:#111827; position:relative;
    overflow:hidden; border-radius:12px; touch-action:none; border:1px solid rgba(255,255,255,0.12);
  }
  .editor-canvas img{
    position:absolute; left:50%; top:50%; width:120%; height:auto;
    transform-origin:center; user-select:none; pointer-events:none;
  }
  .controls{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; margin-top:10px; }
  .controls .btn{ padding:10px 8px; font-size:12px; }
  .seg{ display:grid; grid-template-columns: repeat(3, 1fr); gap:6px; }
  .size-btn.active{
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
  }

  /* Progress overlay */
  #progress{
    position:fixed; inset:0; background:rgba(0,0,0,0.85); color:#fff;
    display:none; flex-direction:column; align-items:center; justify-content:center;
    z-index:200; padding:20px; text-align:center;
  }
  .p-wrap{ width:min(320px, 80vw); height:10px; background:#374151; border-radius:999px; margin-top:14px; overflow:hidden; }
  #p-bar{ width:0%; height:100%; background:var(--accent); transition:0.25s; }

  /* Export Host */
  #exportHost{ position:fixed; top:0; left:0; z-index:-9999; opacity:0; pointer-events:none; }
  #toast{
    position: fixed;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%) translateY(20px);
    background: rgba(15,23,42,0.95);
    color: #fff;
    padding: 10px 14px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: all 0.2s ease;
    z-index: 250;
    max-width: min(92vw, 560px);
    text-align: center;
  }
  #toast.show{
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* Print CSS */
  @page { size:A4 portrait; margin:0; }
  @media print{
    header, .tabs-container, .pager, #progress, .modal, .no-export { display:none !important; }
    body, main { background:#fff; height:auto; display:block; padding:0; margin:0; overflow:visible; }
    .stage { width:auto; margin:0; display:block; }
    body.printing-export main { display:none !important; }
    body.printing-export #exportHost {
      display:block !important;
      position:static !important;
      opacity:1 !important;
      z-index:9999 !important;
    }
    .sheet-wrap {
      transform:none !important; width:auto !important; height:auto !important; margin:0 !important;
      page-break-after: always; break-after: page;
    }
    .sheet { border:none !important; box-shadow:none !important; page-break-inside: avoid; }
    .sheet-wrap { display:block !important; }
  }