body {
  font-family: 'Inter', sans-serif;
  /*background-color: #f0f4f8;*/
}

.qr-code-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: white;
  /* paddingを小さく修正。元々10remは大きすぎる可能性があります */
  /*padding: 1rem;*/
  /*margin-bottom: 1.5rem;*/
  break-inside: avoid;
  page-break-inside: avoid;
}

.qr-code-output div {
  padding: 0 !important; /* qrcode.jsが生成するdivのパディングをリセット */
}

/* QRコード表示エリアのスタイル */
.qr-code-output {
  /* relativeを設定し、アイコンの絶対配置の基準とする (HTMLのJS側でTailwindのrelativeクラスを付与済み) */
  /* padding: 1rem; を一旦削除するか、調整してください */
}

/* アイコンオーバーレイのスタイル */
.qr-icon-overlay {
  position: absolute;
  top: 50%; /* 親要素 (qr-code-output) の上端から50% */
  left: 50%; /* 親要素 (qr-code-output) の左端から50% */
  transform: translate(-50%, -50%); /* 要素自身のサイズを考慮し、正確に中央に配置 */
  width: 60px; /* アイコンのサイズ */
  height: 60px; /* アイコンのサイズ */
  border-radius: 8px; /* 角丸のアイコンにする場合 */
  background-color: white; /* QRコードを隠すための白い背景 */
  padding: 5px; /* 白い背景の余白 */
  object-fit: contain;
  z-index: 10;
}

.data-name-display {
  white-space: pre-wrap;
}

/* 印刷時の設定 */
@media print {
  .qr-code-item {
    box-shadow: none; /* 影を削除 */
    border: none !important;
    background-color: white !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* 印刷時のQRコードコンテナのパディングを調整 */
  .qr-code-output {
    padding: 0 !important;
  }

  /* ヘッダーやその他の不要な要素があれば非表示に */
  header,
  #qrTextContainer {
    display: none;
  }

  /* ページの余白を調整したい場合 (プリンタの設定も影響します) */
  @page {
    margin: 1cm; /* 上下左右1cmの余白を設定 */
  }
}