:root{
    /* ---- A-one 31400 (format F150A4-1): A4 portrait, 28x8mm, 6 cols x 25 rows, SPACED ---- */
    --page-w: 210mm; --page-h: 297mm;
    --label-w: 28mm; --label-h: 8mm;      /* 公式一片サイズ */
    --pitch-x: 31mm; --pitch-y: 11mm;     /* 中心ピッチ（ラベル28+すき間3 / 8+3）*/
    --mt: 12.5mm; --ml: 13.5mm;           /* 1面目の左上までの余白（公式）*/
    --offx: 0mm; --offy: 0mm;             /* プリンタ版ズレ補正 */
    --band-h: 4mm;                        /* 黒帯の高さ */
    --bleed: 1mm;                         /* 黒帯の塗り足し（上・左・右）*/
    --fs-cd: 1.75mm;   /* 7Q  商品CD   */
    --fs-price: 3mm;   /* 12Q 金額     */
    --fs-yen: 1.5mm;   /* 6Q  円（税込）*/
    --radius: 0.6mm;   /* 角丸 */
    --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:330px; flex:0 0 330px; background:#23252a; color:#e9eaec;
    padding:22px 20px 48px; 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 14px; line-height:1.55; }
  .spec{ font-size:11px; color:#aab0b8; background:#1a1c20; border:1px solid #34373d; border-radius:6px;
    padding:9px 11px; margin-bottom:16px; 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:16px; }
  .count b{ color:#fff; font-size:15px; }
  .warn{ font-size:11px; color:#ffd9a0; background:#2c2519; border:1px solid #5a4a2a; border-radius:6px;
    padding:9px 11px; margin-bottom:16px; line-height:1.6; }

  .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; display:flex; justify-content:space-between; }
  .field{ margin-bottom:11px; }
  .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; }
  .grid2{ display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .grid2 .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:700; letter-spacing:.03em; }
  .btn-print{ background:#f3f4f5; color:#1a1c20; margin-top:14px; }
  .btn-print:hover{ background:#fff; }
  .btn-calib{ background:#34373d; color:#e9eaec; border:1px solid #4a4e56; margin-top:8px; }
  .btn-calib:hover{ background:#3d4148; }
  .btn-csv{ background:#3a6ea5; color:#fff; margin-top:8px; }
  .btn-csv:hover{ background:#4179b3; }
  .btn-reset{ background:none; color:#8a909a; border:1px solid #3a3d44; padding:6px; font-size:11px;
    border-radius:5px; cursor:pointer; margin-top:6px; width:100%; }
  .btn-reset:hover{ color:#cfd2d6; }
  .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; }

  details.adv{ margin-top:6px; }
  details.adv > summary{ cursor:pointer; font-size:11px; color:#9aa0a8; padding:6px 0; list-style:none;
    border-bottom:1px solid #34373d; }
  details.adv > summary::-webkit-details-marker{ display:none; }
  details.adv > summary::before{ content:"▸ "; }
  details.adv[open] > summary::before{ content:"▾ "; }

  .pager{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
  .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:700; color:#fff; }
  .sheet-wrap{ transform-origin:top center; }
  .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;
    box-shadow:0 16px 50px rgba(0,0,0,.4); translate:var(--offx) var(--offy); }
  /* each label is absolutely positioned on the official spaced grid */
  .tag{ position:absolute; width:var(--label-w); height:var(--label-h); overflow:visible;
    background:#fff; color:var(--ink); display:flex; flex-direction:column; border-radius:var(--radius); }
  .band{ position:relative; height:var(--band-h); background:#000; color:#fff;
    display:flex; align-items:center; justify-content:center; padding:0 .8mm;
    border-radius:var(--radius) var(--radius) 0 0; }
  /* 塗り足し：黒背景を上・左・右へ --bleed だけ外側に拡張（下は拡張しない・文字位置は不変）*/
  .band::before{ content:""; position:absolute; z-index:0;
    top:calc(-1 * var(--bleed)); left:calc(-1 * var(--bleed)); right:calc(-1 * var(--bleed)); bottom:0;
    background:#000; }
  .band span{ position:relative; z-index:1; font-size:var(--fs-cd); font-weight:500; line-height:1; letter-spacing:.01em;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
  .price{ flex:1 1 auto; display:flex; align-items:baseline; justify-content:center; gap:.2mm; padding:0 .6mm .3mm; }
  .price .num{ font-size:var(--fs-price); font-weight:700; line-height:1; letter-spacing:.005em; }
  .price .yen{ font-size:var(--fs-yen); font-weight:500; line-height:1; }
  .price.none{ color:#bbb; } .price.none .num{ font-size:var(--fs-yen); font-weight:500; }

  /* on-screen die-cut guide */
  .guides .tag{ outline:0.18mm solid #c9d0d8; }
  /* calibration mode: print just the outlines, hide content (check against physical sheet) */
  .calib .tag{ background:transparent; border:0.2mm solid #000; }
  .calib .tag .band, .calib .tag .price{ display:none; }

  /* ============ PRINT ============ */
  @page{ size:A4 portrait; 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 .tag{ outline:none !important; }
  }

/* ===== UI改善（2026-06-09）: 大タイトル / モード切替 / アコーディオン / 検索 / ズーム ===== */
.panel h1.title{ font-size:22px; font-weight:800; letter-spacing:.02em; margin:0 0 4px; color:#fff; }
.modesel{ display:flex; gap:8px; margin:0 0 14px; }
.modebtn{ flex:1; padding:10px 4px; border:1px solid #3a3d44; background:#23252a; color:#aeb3bb;
  border-radius:8px; cursor:pointer; font-size:11.5px; font-weight:700; white-space:nowrap; transition:background .12s,color .12s; }
.modebtn:hover{ background:#2e3137; color:#fff; }
.modebtn.active{ background:#3a6ea5; color:#fff; border-color:#3a6ea5; }

details.step{ border:1px solid #34373d; border-radius:8px; margin-bottom:10px; background:#1d1f24; }
details.step[hidden]{ display:none; }
details.step>summary{ list-style:none; cursor:pointer; padding:11px 13px; font-size:12.5px; font-weight:700;
  color:#e9eaec; display:flex; align-items:center; gap:8px; }
details.step>summary::-webkit-details-marker{ display:none; }
details.step>summary::after{ content:'▾'; margin-left:auto; color:#71767e; transition:transform .15s; }
details.step[open]>summary::after{ transform:rotate(180deg); }
details.step .step-body{ padding:2px 13px 14px; }
.badge{ font-size:11px; color:#9aa0a8; font-weight:500; }
.badge b{ color:#fff; }

.search{ width:100%; box-sizing:border-box; padding:8px 10px; border-radius:6px; border:1px solid #3a3d44;
  background:#15161a; color:#fff; font-size:12.5px; margin-bottom:8px; font-family:inherit; }
.search:focus{ outline:none; border-color:#7c8089; }
.toc{ max-height:260px; overflow-y:auto; }
.toc-item:hover{ background:#2e3137; }
.toc-item.sel{ background:#27405c !important; }

/* 固定フッターのメインボタン（次へ＝塗り・最大／印刷） */
.panel-cta{ position:sticky; bottom:0; margin:12px -20px 0; padding:12px 20px 16px;
  background:#1b1d21; border-top:1px solid #34373d; }
.cta{ width:100%; box-sizing:border-box; border:none; border-radius:9px; cursor:pointer; font-family:inherit;
  font-weight:800; font-size:15px; padding:15px; letter-spacing:.02em; }
.cta-next{ background:#3a6ea5; color:#fff; }
.cta-next:hover{ background:#4179b3; }
.cta-print{ background:#f3f4f5; color:#1a1c20; }
.cta-print:hover{ background:#fff; }

/* 「この内容を追加」＝小さめ・塗り（枠線の「次へ」と逆デザイン） */
.btn-sub{ width:100%; box-sizing:border-box; margin-top:8px; padding:8px; cursor:pointer; font-family:inherit;
  background:#3a6ea5; color:#fff; border:none; border-radius:7px; font-size:12px; font-weight:700; }
.btn-sub:hover{ background:#4179b3; }

/* 商品一覧クリックでラベルをハイライト */
.tag.hl{ outline:0.5mm solid #2f6fd0; box-shadow:0 0 0 0.5mm rgba(47,111,208,.55); z-index:3; }
@media print{ .tag.hl{ outline:none !important; box-shadow:none !important; } }

/* ズーム操作（プレビュー右下に固定） */
.zoomctl{ position:fixed; left:344px; top:14px; z-index:50; display:flex; align-items:center; gap:6px;
  background:#23252a; border:1px solid #3a3d44; border-radius:999px; padding:5px 8px; box-shadow:0 3px 12px rgba(0,0,0,.3); }
.zoomctl button{ border:none; background:#33363d; color:#e9eaec; width:30px; height:30px; border-radius:50%;
  cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; }
.zoomctl button#zoomFit{ width:auto; border-radius:15px; padding:0 12px; font-size:12px; font-weight:700; }
.zoomctl button:hover{ background:#41454d; }
.zoomctl #zoomLbl{ min-width:42px; text-align:center; font-size:12px; color:#cfd2d6; font-variant-numeric:tabular-nums; }
@media print { .zoomctl{ display:none !important; } }

/* ===== ステップ番号 / 次へ / 検索候補（2026-06-09 デザイン整理）===== */
.stepnum{ display:inline-flex; align-items:center; justify-content:center; width:20px; height:20px; border-radius:50%;
  background:#3a6ea5; color:#fff; font-size:11px; font-weight:800; margin-right:7px; flex:0 0 auto; }
.btn-next{ display:block; width:100%; box-sizing:border-box; margin-top:14px; padding:9px; cursor:pointer;
  border:1px solid #3a6ea5; background:transparent; color:#9cc3e8; border-radius:8px;
  font-size:12.5px; font-weight:700; font-family:inherit; transition:background .12s,color .12s; }
.btn-next:hover{ background:#3a6ea5; color:#fff; }
.suggest{ margin:-2px 0 10px; max-height:200px; overflow-y:auto; }
.suggest-item{ display:flex; justify-content:space-between; align-items:center; gap:8px; padding:7px 10px;
  font-size:12px; background:#15161a; border:1px solid #34373d; border-top:none; cursor:pointer; }
.suggest-item:first-child{ border-top:1px solid #34373d; border-radius:6px 6px 0 0; }
.suggest-item:last-child{ border-radius:0 0 6px 6px; }
.suggest-item:hover{ background:#23262c; }
.suggest-item b{ color:#e9eaec; font-weight:600; }
.suggest-item.muted{ color:#878c94; cursor:default; }

/* プリンターでの印刷方法（折りたたみ内） */
.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; }
}