:root{
  --bg:#f6f7fb;
  --card:#fff;
  --text:#0f172a;
  --muted:#6b7280;
  --line:#e5e7eb;
  --primary:#2563eb;

  /* モダン印刷カラー */
  --ink:#0f172a;
  --muted2:#475569;
  --line2:#cbd5e1;
  --headBg:#eaf2ff;
  --genreBg:#f1f5f9;
}

*{ box-sizing:border-box; }
body{
  margin:0;
  font-family:system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
  background:var(--bg);
  color:var(--text);
}

.header{
  background:#fff;
  border-bottom:1px solid var(--line);
  padding:10px 12px 8px;
  display:flex;
  gap:10px;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
}
.title h1{ margin:0; font-size:17px; }
.sub{ margin-top:4px; color:var(--muted); font-size:11px; }
.nav{ display:flex; gap:8px; }

.container{
  max-width:1100px;
  margin:0 auto;
  padding:10px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
}

.view{ display:none; }
.view.active{ display:block; }

h2{ margin:0 0 8px; font-size:15px; }

.grid2{
  display:grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap:8px;
}
.grid3{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap:8px;
}
@media (max-width: 860px){
  .grid2, .grid3{ grid-template-columns:1fr; }
}

label{
  display:flex;
  flex-direction:column;
  gap:5px;
  font-size:12px;
  color:var(--muted);
}
input{
  font-size:15px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  outline:none;
  background:#fff;
  color:var(--text);
}
input:focus{ border-color:#93c5fd; }

.row{
  display:flex;
  gap:8px;
  align-items:center;
  margin-top:8px;
  flex-wrap:wrap;
}
.row.right{ justify-content:flex-end; }
.row.between{ justify-content:space-between; }

button{
  border:1px solid var(--line);
  background:#fff;
  padding:8px 10px;
  border-radius:10px;
  font-size:13px;
  cursor:pointer;
}
button.primary{
  background:var(--primary);
  color:#fff;
  border-color:transparent;
}
button.ghost{ background:#fff; }

.file{
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 10px;
  font-size:13px;
  color:var(--text);
  background:#fff;
  display:inline-flex;
  gap:8px;
  align-items:center;
  cursor:pointer;
}
.file input{ display:none; }

.hint{ margin-top:8px; color:var(--muted); font-size:11px; }
.msg{
  margin-top:8px;
  padding:10px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#f9fafb;
  font-size:12px;
}

/* ヘッダー（確認/印刷） */
.printHeader{
  margin-top:8px;
  padding:10px 12px;
  border:1px solid var(--line2);
  border-radius:12px;
  background:#fff;
}
.ph-title{
  font-size:16px;
  font-weight:900;
  margin-bottom:6px;
  letter-spacing:.02em;
}
.ph-row{
  display:grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:10px;
  font-size:12px;
}
.printFooter{ display:none; margin-top:8px; color:#6b7280; font-size:11px; }

/* ===== ピッカー ===== */
.picker{ margin-top:10px; }
.picker h3{ margin:0 0 8px; font-size:13px; color:#374151; }
.pickerGrid{
  display:grid;
  grid-template-columns: 300px 1fr;
  gap:10px;
}
@media (max-width: 860px){
  .pickerGrid{ grid-template-columns:1fr; }
}
.pickerBox{
  border:1px solid var(--line);
  border-radius:10px;
  padding:10px;
  background:#fff;
}
.pickerTitle{ font-size:11px; color:#6b7280; margin-bottom:8px; }
.radioList, .checkList{
  display:flex;
  flex-direction:column;
  gap:8px;
  max-height:260px;
  overflow:auto;
  padding-right:6px;
}
.radioItem, .checkItem{
  display:flex;
  gap:10px;
  align-items:center;
  padding:7px 8px;
  border:1px solid var(--line);
  border-radius:10px;
  background:#fff;
}

/* ===== マスタ（ドラッグ） ===== */
.masterArea{ margin-top:10px; display:flex; flex-direction:column; gap:10px; }
.groupBox{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.groupHead{
  padding:8px 10px;
  background:#f3f4f6;
  border-bottom:1px solid var(--line);
  font-weight:900;
}
.groupList{ padding:10px; display:flex; flex-direction:column; gap:8px; }
.dragRow{
  border:1px solid var(--line);
  border-radius:12px;
  padding:8px 10px;
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
}
.dragRow.dragging{ opacity:.5; }
.handle{
  width:26px;
  text-align:center;
  font-weight:900;
  cursor:grab;
  user-select:none;
}
.rowText{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rowBtns{ display:flex; gap:6px; }
.miniBtn{
  border:1px solid var(--line);
  background:#fff;
  border-radius:10px;
  padding:4px 8px;
  font-size:12px;
  cursor:pointer;
}

/* ===== 明細（カード） ===== */
.slipArea{ margin-top:10px; display:flex; flex-direction:column; gap:12px; }

.genreSection{
  border:1px solid var(--line);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.genreTitle{
  padding:8px 10px;
  background:#f3f4f6;
  font-weight:900;
  border-bottom:1px solid var(--line);
}

.cardsGrid{
  padding:10px;
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap:10px;
}
@media (max-width: 980px){
  .cardsGrid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 620px){
  .cardsGrid{ grid-template-columns: 1fr; }
}

.cardItem{
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#fff;
  display:flex;
  flex-direction:column;
  gap:8px;
}
.cardItem.dragging{ opacity:.5; }
.cardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:8px;
}
.cardName{
  font-weight:900;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.cardActions{ display:flex; gap:6px; align-items:center; }
.qtyInput{
  width:100%;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid var(--line);
  font-size:14px;
  text-align:right;
}
.smallLabel{ font-size:11px; color:var(--muted); margin-bottom:4px; }

/* ===== 確認プレビュー ===== */
.previewWrap{
  margin-top:10px;
  border:1px solid var(--line);
  border-radius:12px;
  padding:10px;
  background:#fff;
}
.previewTitle{
  font-weight:900;
  margin-bottom:8px;
  font-size:13px;
  color:#374151;
}

/* ===== 下部バー（常に下に） ===== */
.bottomBar{
  position: sticky;
  bottom: 8px;
  
  border-radius: 14px;
  padding: 10px;
  z-index: 5;
}

/* ===== 印刷用テーブル ===== */
.tableWrap{
  width:100%;
  margin-top:10px;
  border:1px solid var(--line2);
  border-radius:12px;
  overflow:hidden;
  background:#fff;
}
.print-only{ display:none; }

.slipPrint{
  border-collapse: separate;
  border-spacing: 0;
  width:100%;
  table-layout: fixed;
  color:var(--ink);
}
.slipPrint th{
  background:var(--headBg);
  color:var(--ink);
  font-weight:900;
  border-bottom:1px solid var(--line2);
  padding:8px 8px;
  font-size:12px;
  text-align:left;
}
.slipPrint td{
  border-bottom:1px solid #e2e8f0;
  padding:7px 8px;
  font-size:12px;
}
.slipPrint .sepR{ border-right:1px solid var(--line2); }
.slipPrint .genreRow td{
  background:var(--genreBg);
  font-weight:900;
  border-top:1px solid var(--line2);
}
.slipPrint td.qty, .slipPrint th.qty{
  text-align:right;
  padding-right:10px;
  font-variant-numeric: tabular-nums;
}
.slipPrint td.name, .slipPrint th.name{ padding-right:10px; }
.slipPrint td.bar, .slipPrint th.bar{
  text-align:center;
  color:var(--muted2);
  padding:0;
}

/* ===== Hover ===== */
button:hover{ filter: brightness(0.98); }
button.primary:hover{ filter: brightness(0.95); }

.radioItem:hover,
.checkItem:hover,
.dragRow:hover,
.cardItem:hover{
  border-color:#93c5fd;
  background:#eff6ff;
}
.radioItem:hover span,
.checkItem:hover span{
  font-weight:700;
}
.dragRow.dragging,
.cardItem.dragging{
  outline:2px solid #60a5fa;
  outline-offset:2px;
}

/* ===== 印刷 ===== */
@page{ size:A4 portrait; margin:10mm; }

@media print{
  html, body{
    background:#fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    font-size: 10pt;
    line-height: 1.25;
  }
  .no-print{ display:none !important; }
  .slipArea{ display:none !important; }
  .print-only{ display:block !important; }

  .card{ border:none; padding:0; }
  .container{ max-width:none; padding:0; gap:6px; }

  .printHeader{
    border:1px solid var(--ink) !important;
    border-radius:10px;
    padding:10px 12px;
  }
  .ph-title{ font-size:14pt; }
  .ph-row{ font-size:10.5pt; }

  .tableWrap{
    border:1px solid var(--ink);
    border-radius:0;
    overflow:visible !important;
  }

  .slipPrint th{ background:var(--headBg) !important; }
  .slipPrint .genreRow td{ background:var(--genreBg) !important; }

  .printFooter{ display:block; }
}

/* =========================================================
  ★ここから追記：画像どおり「赤枠を消す（外側を囲わない）」
   - 緑枠＝printHeader
   - 青枠＝tableWrap
   - 外側（previewWrap）は枠なし
========================================================= */

/* 確認プレビューの外側枠（赤枠の原因）を消す */
.previewWrap{
  border: none !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* 確認タイトルは残して、上だけ少し空ける */
.previewTitle{
  margin: 10px 0 8px !important;
}

/* 確認画面：緑枠と青枠の間に余白 */
.previewWrap .printHeader{
  margin-top: 0 !important;
  margin-bottom: 12px !important;
}

/* 確認画面：青枠の上余白を消して揃える */
.previewWrap .tableWrap{
  margin-top: 0 !important;
}

/* =========================================================
   「全体の外枠（赤枠）」を無くして
   ヘッダー枠 と 表枠 を分離する（確認画面＆印刷 共通）
========================================================= */

/* まず tableWrap の枠を消す（これが赤枠の原因） */
.tableWrap{
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
  padding: 0 !important;
}

/* ヘッダーはヘッダーだけ枠（緑枠）＋下に余白 */
.printHeader{
  border: 1px solid var(--line2) !important;
  border-radius: 12px !important;
  background: #fff !important;
  margin: 0 0 12px 0 !important;  /* ← 表との隙間 */
}

/* 表だけを囲う（青枠） */
#slipPrintTable{
  border: 1px solid var(--line2) !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background:#fff !important;
}

/* 印刷時も同じ（tableWrapの枠を絶対に出さない） */
@media print{
  /* 1) 余計な上書きをやめて、画面と同じレイアウトを維持 */
  html, body{
    background:#fff;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* 2) 印刷時はUIだけ消す（レイアウトを変えない） */
  .no-print{ display:none !important; }
  .slipArea{ display:none !important; }
  .print-only{ display:block !important; }

  /* 3) ここがズレの原因なので「上書きしない」方針にする
        （↓あなたのCSSにあった下記のような変更は入れない）
        ・font-size:10pt
        ・line-height:1.25
        ・.card{border:none;padding:0}
        ・.container{max-width:none;padding:0}
        ・.printHeader border変更/角丸変更/フォントpt変更
        ・.tableWrap border-radius:0
  */

  /* 4) 印刷で途切れる時の保険（必要なら） */
  .tableWrap{ overflow: visible !important; }
}