@charset "UTF-8";

.mock-b-2-print{
  --c-showcase: #5470C6;
  --bg:         #F5F5F5;
  --surface:    #FFFFFF;
  --line:       #DDDDDD;
  --line-soft:  #E4E4E4;
  --text:       #333333;
  --text-sub:   #8A8A8A;

  --mock-accent: #58AA35;
}

.mock-b-2-print *{ box-sizing: border-box; }

.mock-b-2-print{
  width: 120mm;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  line-height: 1.5;
  color: var(--text);
}

.mock-b-2-print h1,
.mock-b-2-print p{ margin: 0; }
.mock-b-2-print h1{ font-family: inherit; }

.mock-b-2-print,
.mock-b-2-print *{
  -webkit-print-color-adjust: exact;
  print-color-adjust: exact;
}

.mock-b-2-print .stage{ width: 120mm; }

.mock-b-2-print .screen{
  width: 120mm;
  background: var(--surface);
  border: .3mm solid var(--line);
  border-radius: 2mm;
  overflow: hidden;
}

.mock-b-2-print .ico{
  width: 2.6mm;
  height: 2.6mm;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mock-b-2-print .topbar{
  height: 7.5mm;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 3.5mm;
}
.mock-b-2-print .topbar-title{
  display: flex;
  align-items: baseline;
  gap: 2.5mm;
}
.mock-b-2-print .topbar-title h1{
  font-size: 10pt;
  font-weight: 700;
  line-height: 1.3;
}
.mock-b-2-print .mon-date{
  font-size: 7pt;
  line-height: 1.3;
  color: var(--text-sub);
  white-space: nowrap;
}

.mock-b-2-print .content{
  background: var(--bg);
  padding: 2.2mm 3mm 3mm;
}

.mock-b-2-print .toolbar{
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 6.5mm;
  margin-bottom: 1.2mm;
}
.mock-b-2-print .sort-group,
.mock-b-2-print .count-group{
  display: flex;
  align-items: center;
  gap: 1.5mm;
  font-size: 7pt;
  line-height: 1.2;
  color: var(--text-sub);
}
.mock-b-2-print .sort-group .ico,
.mock-b-2-print .count-group .ico{ color: #A8A8A8; }
.mock-b-2-print .sort-label{ font-weight: 600; color: #5C5C5C; }
.mock-b-2-print .sort-pill{
  display: inline-flex;
  align-items: center;
  height: 4mm;
  padding: 0 1.6mm;
  border-radius: 2mm;
  font-size: 7pt;
  font-weight: 700;
  line-height: 1;
  background: #FFF;
  border: .3mm solid #DDDDDD;
  color: #6B6B6B;
}
.mock-b-2-print .sort-pill.is-on{
  background: var(--mock-accent);
  border-color: var(--mock-accent);
  color: #FFF;
}
.mock-b-2-print .count-val{
  font-weight: 700;
  color: var(--text);
  font-size: 7.5pt;
}

.mock-b-2-print .card-grid{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 3mm;
}

.mock-b-2-print .mon-card{
  position: relative;
  background: var(--surface);
  border: .3mm solid var(--line);
  border-radius: 1.4mm;
  padding: 2.2mm 2.2mm 1.8mm;
}

.mock-b-2-print .mon-store{
  font-size: 8.5pt;
  font-weight: 700;
  color: #1A1A1A;
  line-height: 1.15;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mock-b-2-print .mon-chname{
  font-size: 7.5pt;
  font-weight: 500;
  color: #555555;
  line-height: 1.15;
  margin-top: 1mm;
}

.mock-b-2-print .mon-meta{
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  font-size: 7pt;
  font-weight: 400;
  color: #8A8A8A;
  line-height: 1.15;
  margin-top: .8mm;
  padding-top: .8mm;
  border-top: .3mm solid var(--line-soft);
}
.mock-b-2-print .mon-chno{ color: var(--c-showcase); font-weight: 700; }
.mock-b-2-print .mon-unit{ white-space: nowrap; }

.mock-b-2-print .mini-chart{
  display: block;
  width: 100%;
  margin-top: 1.2mm;
}