/* ============================================================
   that's rice PriceCard
   ============================================================ */
:root{
  --pc-bg: #f4f5f7;
  --pc-card: #ffffff;
  --pc-border: #d8dbe0;
  --pc-text: #1f2430;
  --pc-muted: #6b7280;
  --pc-accent: #b3862a;
}
@media (prefers-color-scheme: dark){
  :root{
    --pc-bg: #14161a;
    --pc-card: #1c1f26;
    --pc-border: #333844;
    --pc-text: #e7e9ee;
    --pc-muted: #9aa0ab;
    --pc-accent: #caa44a;
  }
}

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

.muted{ color: var(--pc-muted); }

.pcHeader{
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: var(--pc-card);
  border-bottom: 1px solid var(--pc-border);
  position: sticky;
  top: 0;
  z-index: 10;
}
.pcTitle{ font-size: 18px; font-weight: 800; display:flex; align-items:center; gap:8px; }
.pcVersionBadge{ font-size: 11px; color: var(--pc-muted); font-weight: 400; }
.pcHeaderRight{ display: flex; align-items: center; gap: 14px; }

button{
  font-family: inherit;
  font-size: 13px;
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--pc-border);
  background: var(--pc-card);
  color: var(--pc-text);
  cursor: pointer;
}
button.primary{
  background: var(--pc-accent);
  color: #fff;
  border-color: var(--pc-accent);
  font-weight: 700;
}
button.ghost{ background: transparent; }

.pcToolbar{
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  flex-wrap: wrap;
}
#pcSearch{
  flex: 1 1 auto;
  max-width: 420px;
  padding: 9px 12px;
  border-radius: 8px;
  border: 1px solid var(--pc-border);
  background: var(--pc-card);
  color: var(--pc-text);
  font-size: 13px;
}
#pcCategorySelect{
  padding: 9px 10px;
  border-radius: 8px;
  border: 1px solid var(--pc-border);
  background: var(--pc-card);
  color: var(--pc-text);
  font-size: 13px;
}
.pcCheckLabel{
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--pc-muted);
  white-space: nowrap;
}
.pcToolbarSpacer{ flex: 1 1 auto; }

.pcListWrap{ padding: 0 18px 30px; }
.pcTable{
  width: 100%;
  border-collapse: collapse;
  background: var(--pc-card);
  border: 1px solid var(--pc-border);
  border-radius: 10px;
  overflow: hidden;
}
.pcTable th, .pcTable td{
  padding: 9px 12px;
  border-bottom: 1px solid var(--pc-border);
  font-size: 13px;
  text-align: left;
}
.pcTable th{
  background: rgba(128,128,128,.08);
  font-weight: 700;
  color: var(--pc-muted);
}
.pcColCheck{ width: 34px; }
.pcColDesc{
  max-width: 260px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pc-muted);
  cursor: help;
}
.pcColN{ text-align: right; width: 90px; }
.pcTable td.pcColN{ text-align: right; font-variant-numeric: tabular-nums; }
.pcQtyInput{
  width: 52px;
  text-align: right;
  padding: 4px 6px;
  border-radius: 6px;
  border: 1px solid var(--pc-border);
  background: var(--pc-card);
  color: var(--pc-text);
}
tr.pcRowUnsellable{ opacity: .5; }

/* ============================================================
   印刷レイアウト: 中川製作所 CCマルチカード CC-BC10 (A4 10面, 91x55mm)
   上余白15mm/下余白11mm/左右余白14mm(ユーザー提供値)。
   列幅は91mm(左右余白から計算すると余白ぴったり=ズレなし)。
   行ピッチは(297-15-11)/5=54.2mmで計算(カード物理高55mmよりわずかに小さく、
   安全側に倒すことで最終行が用紙下端の余白を超えないようにしている)。
   カード内側にさらに4mmの余白を入れて、印刷ズレでカット線に文字がかからないようにする。

   .printAreaはdisplay:noneではなく画面外配置にしている。商品名の折り返し検知
   (price-card.jsのRange APIを使った行分割)にはレイアウト計算(getClientRects)が
   必要で、display:noneだと寸法が取れないため。
   ============================================================ */
.printArea{ position: absolute; left: -99999px; top: 0; }

@media print{
  #picker{ display: none !important; }
  .printArea{ position: static; left: auto; }
  @page{ size: A4; margin: 0; }
  body{ background: #fff; }
}

.cardSheet{
  position: relative;
  width: 210mm;
  height: 297mm;
  background: #fff;
  page-break-after: always;
}
/* 最後のシートにまでpage-break-afterが効くと、印刷末尾に白紙の1枚が余計に
   追加されてしまう(4枚選択で1枚しか無いのに2ページ扱いになっていた原因)。 */
.cardSheet:last-child{ page-break-after: auto; }
.priceCard{
  position: absolute;
  width: 91mm;
  height: 54.2mm;
  box-sizing: border-box;
  padding: 4mm;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #000;
  font-family: "Yu Mincho", "YuMincho", "Hiragino Mincho ProN", "MS Mincho", serif;
  background-image: url('card-bg.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: 91mm 54.2mm;
  /* Chromeは既定で印刷時に背景画像/背景色を省略する(印刷ダイアログの
     「背景のグラフィック」設定に依存する)。この指定で強制的に印刷対象にする。
     ただし環境によっては印刷ダイアログ側のチェックも別途必要な場合がある。 */
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
  color-adjust: exact;
}

/* 商品名/サブタイトル/説明文をまとめて1つの箱に入れ、その箱自体にmax-heightを設ける。
   価格・バーコードは絶対位置で固定しているため、この箱がどれだけ内容を持っても
   固定要素の領域には物理的に入り込めない(はみ出た分はoverflow:hiddenで切れるだけで、
   文字が重なることはなくなる)。 */
.pcCardTop{
  flex: 0 0 auto;
  max-height: 29mm;
  overflow: hidden;
}
.pcCardName{
  font-size: 14pt;
  font-weight: 700;
  line-height: 1.3;
  margin-top: 5mm;
  min-height: 13mm;
}
.pcCardNameLine1{ display: block; text-align: left; }
.pcCardNameLine2{ display: block; text-align: right; }
.pcCardSub{ font-size: 9pt; color: #333; margin-top: .5mm; }
.pcCardDesc{
  font-size: 6.5pt;
  color: #444;
  line-height: 1.3;
  margin-top: 1mm;
}

/* 価格(右下)とバーコード+商品コード(左下)は、上の商品名/説明文の量に関わらず
   常にカード内の同じ位置に固定したいという要望のため絶対位置指定にしている
   (.priceCardはposition:absoluteだが、position指定のある要素は子のposition:absoluteの
   基準にもなるため、この入れ子で問題なく機能する)。 */
.pcCardPriceRow{
  position: absolute;
  right: 4mm;
  bottom: 2.5mm;
  text-align: right;
}
.pcCardPrice{ font-size: 21pt; font-weight: 800; }
.pcCardPrice .yen{ font-size: 12pt; font-weight: 700; margin-right: .5mm; }
.pcCardTax{ font-size: 6.5pt; color: #666; margin-top: .5mm; }

.pcCardBottomRow{
  position: absolute;
  left: 4mm;
  bottom: 4mm;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 2mm;
}
.pcCardCode{ font-size: 7pt; color: #777; }
.pcCardBarcodeWrap{ line-height: 0; }