:root{
    /* ---- A-one 31532 geometry, A4 landscape (5 cols x 2 rows = 10 faces) ---- */
    --page-w: 297mm; --page-h: 210mm;
    --label-w: 50.8mm; --label-h: 86.4mm;
    /* measured on the actual 31532 sheet (A4 landscape) */
    --mt: 18.6mm; --mb: 18.6mm; --ml: 21.2mm; --mr: 21.8mm;
    --col-gap: 0mm; --row-gap: 0mm;
    --offx: 0mm; --offy: 0mm;
    --ink: #000;
  }
  *{ box-sizing:border-box; }
  html,body{ margin:0; padding:0; }
  body{ font-family:"Noto Sans JP",sans-serif; background:#4a4d52; color:#1b1c1e; -webkit-font-smoothing:antialiased; }

  .app{ display:flex; min-height:100vh; }

  /* ============ PANEL ============ */
  .panel{
    width:320px; flex:0 0 320px; background:#23252a; color:#e9eaec;
    padding:22px 20px 40px; overflow-y:auto; height:100vh; position:sticky; top:0;
  }
  .panel h1{ font-size:15px; font-weight:700; margin:0 0 2px; letter-spacing:.02em; }
  .panel .sub{ font-size:11.5px; color:#9aa0a8; margin:0 0 16px; line-height:1.55; }
  .spec{ font-size:11px; color:#aab0b8; background:#1a1c20; border:1px solid #34373d; border-radius:6px;
    padding:9px 11px; margin-bottom:18px; line-height:1.7; }
  .spec b{ color:#e9eaec; font-weight:600; }
  .count{ font-size:12px; color:#cfd2d6; background:#15161a; border:1px solid #34373d; border-radius:6px;
    padding:8px 11px; margin-bottom:18px; }
  .count b{ color:#fff; font-size:15px; }

  .sectlabel{ font-size:10.5px; text-transform:uppercase; letter-spacing:.14em; color:#71767e;
    margin:20px 0 11px; padding-bottom:6px; border-bottom:1px solid #34373d; }
  .field{ margin-bottom:12px; }
  .field label{ display:block; font-size:11px; color:#9aa0a8; margin-bottom:4px; }
  .field input{ width:100%; padding:7px 9px; border-radius:5px; border:1px solid #3a3d44; background:#15161a;
    color:#fff; font-size:13px; font-family:"Noto Sans JP",sans-serif; }
  .field input:focus{ outline:none; border-color:#7c8089; }
  .nudge{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .nudge .field{ margin-bottom:0; }
  .toggle{ display:flex; align-items:center; gap:9px; font-size:12px; color:#cfd2d6; cursor:pointer; margin-bottom:10px; }
  .toggle input{ width:15px; height:15px; accent-color:#c7ccd2; }

  .btn{ width:100%; padding:11px; border:none; border-radius:6px; cursor:pointer;
    font-family:"Noto Sans JP",sans-serif; font-size:13.5px; font-weight:600; letter-spacing:.03em; }
  .btn-print{ background:#f3f4f5; color:#1a1c20; margin-top:16px; }
  .btn-print:hover{ background:#fff; }
  .btn-csv{ background:#3a6ea5; color:#fff; }
  .btn-csv:hover{ background:#4179b3; }
  .csvinfo{ font-size:11px; color:#cfd2d6; margin-top:8px; line-height:1.5; }
  .csvinfo.err{ color:#ff9b8a; }
  .csvinfo.ok{ color:#8fd6a6; }
  .hint{ font-size:10.5px; color:#7d828a; line-height:1.6; margin-top:8px; }

  .toc{ margin-top:8px; }
  .toc-item{ display:flex; gap:8px; align-items:baseline; font-size:11px; color:#c0c4ca;
    padding:5px 7px; border-radius:4px; cursor:pointer; line-height:1.35; }
  .toc-item:hover{ background:#2e3137; }
  .toc-item .n{ color:#71767e; flex:0 0 22px; font-variant-numeric:tabular-nums; }
  .toc-item .nm{ color:#e9eaec; }
  .toc-item.cur{ background:#33373e; }
  .toc-item.cur .nm{ color:#fff; }

  .pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .pager #pgInd{ font-size:13px; color:#e9eaec; font-variant-numeric:tabular-nums; }
  .pgbtn{ flex:1; padding:9px 0; border:1px solid #3a3d44; background:#15161a; color:#e9eaec;
    border-radius:6px; cursor:pointer; font-size:14px; }
  .pgbtn:hover{ background:#2e3137; }

  /* ============ STAGE ============ */
  .stage{ flex:1; overflow:auto; height:100vh; padding:30px 0 60px; }
  .page{ display:flex; flex-direction:column; align-items:center; margin-bottom:38px; }
  .page-head{ width:var(--page-w); color:#cdd0d5; font-size:12.5px; margin:0 0 9px;
    display:flex; gap:12px; align-items:baseline; }
  .page-head .pn{ color:#9aa0a8; font-variant-numeric:tabular-nums; }
  .page-head .pt{ font-weight:600; color:#fff; }
  .page-head .pd{ color:#9aa0a8; }
  .sheet-wrap{ transform-origin:top center; }

  /* paged on-screen viewer: show one sheet at a time (all stay in DOM for print) */
  .stage.paged .page{ display:none; }
  .stage.paged .page.active{ display:flex; }

  /* ============ SHEET ============ */
  .sheet{
    width:var(--page-w); height:var(--page-h); background:#fff; position:relative;
    display:grid; grid-template-columns:repeat(5,var(--label-w)); grid-template-rows:repeat(2,var(--label-h));
    column-gap:var(--col-gap); row-gap:var(--row-gap); padding:var(--mt) var(--mr) var(--mb) var(--ml);
    box-shadow:0 16px 50px rgba(0,0,0,.4); translate:var(--offx) var(--offy);
  }
  .label{ width:var(--label-w); height:var(--label-h); position:relative; display:flex; flex-direction:column;
    align-items:center; padding:5.2mm 2.6mm 4.4mm; color:var(--ink); overflow:hidden; }
  .guides .label::after{ content:""; position:absolute; inset:0; border:0.2mm solid #cfd6dd; border-radius:1.6mm; pointer-events:none; }

  .lg{ display:flex; align-items:center; justify-content:center; height:5.5mm; margin-top:.6mm; width:100%; }
  .lg img{ max-height:5.5mm; max-width:36mm; object-fit:contain; display:block; }
  .product{ font-weight:600; font-size:20pt; line-height:1.02; letter-spacing:.01em; margin-top:3mm;
    text-align:center; white-space:nowrap; width:100%; }
  .kana{ font-weight:400; font-size:6pt; letter-spacing:.4em; margin-top:1.5mm; padding-left:.4em;
    text-align:center; white-space:nowrap; width:100%; }
  .color{ font-weight:500; font-size:12.5pt; line-height:1.05; margin-top:9mm; text-align:center; white-space:nowrap; width:100%; }
  .attr{ font-weight:400; font-size:7.5pt; line-height:1.55; margin-top:2.2mm; text-align:center; width:100%; }
  .attr div{ white-space:nowrap; }
  .spacer{ flex:1 1 auto; }
  .capsule{ display:flex; align-items:center; justify-content:center; }
  .capsule img{ width:23mm; height:auto; display:block; }
  .contact{ font-weight:400; font-size:7.5pt; line-height:1.6; margin-top:3.6mm; text-align:center; width:100%; }
  .contact div{ white-space:nowrap; }

  /* ============ PRINT ============ */
  @page{ size:A4 landscape; margin:0; }
  @media print{
    body{ background:#fff; }
    .panel{ display:none !important; }
    .stage{ overflow:visible; height:auto; padding:0; }
    .page{ margin:0; display:block; }
    .stage.paged .page{ display:block !important; }
    .page-head{ display:none !important; }
    .sheet-wrap{ transform:none !important; width:auto !important; height:auto !important; }
    .sheet{ box-shadow:none; page-break-after:always; break-after:page; }
    .page:last-child .sheet{ page-break-after:auto; break-after:auto; }
    .guides .label::after{ display:none; }
  }

/* 印刷ボタンをパネル下部に固定（2026-06-09）*/
#printBtn{ position:sticky; bottom:8px; z-index:6; box-shadow:0 3px 14px rgba(0,0,0,.5); }
.panel{ padding-bottom:72px; }
@media print{ #printBtn{ position:static; box-shadow:none; } }

/* プリンターでの印刷方法（折りたたみ）2026-06-09 */
details.howto-d{ margin-top:10px; }
details.howto-d>summary{ cursor:pointer; font-size:11px; color:#9aa0a8; padding:6px 0; list-style:none; border-bottom:1px solid #34373d; }
details.howto-d>summary::-webkit-details-marker{ display:none; }
details.howto-d>summary::before{ content:"\25B8 "; }
details.howto-d[open]>summary::before{ content:"\25BE "; }
.howto{ font-size:11.5px; color:#cfd2d6; line-height:1.7; padding:4px 2px 2px; }
.howto b{ color:#fff; }
.howto ol{ margin:6px 0 10px; padding-left:1.4em; }
.howto li{ margin-bottom:4px; }
.howto p{ margin:8px 0; }
.howto .note{ color:#9aa0a8; font-size:10.5px; }

/* Safari等で最後に出る余分な白ページを防止（2026-06-09）*/
@media print{
  html, body{ height:auto !important; }
  .page:last-child, .page:last-child .sheet{ page-break-after:avoid !important; break-after:avoid !important; }
}