@charset "UTF-8";

.mock-g-1a-print {
  --c-hvac:   #5470C6;
  --c-power:  #91CC75;
  --c-light:  #FAC858;
  --c-water:  #EE6666;
  --c-co2:    #8FC3FF;

  --brand:      #58AA35;
  --text:       #2E2E2E;
  --text-sub:   #7A7A7A;
  --line:       #EFEFEF;
}

.mock-g-1a-print {
  width: 104mm;
  height: 56.4mm;
  padding: 2mm 2.2mm;
  display: flex;
  flex-direction: column;
  gap: 1.4mm;
  background: #F5F5F5;
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  color: var(--text);
}

.mock-g-1a-print,
.mock-g-1a-print * {
  print-color-adjust: exact;
  -webkit-print-color-adjust: exact;
}

.mock-g-1a-print .kpi-row {
  display: flex;
  gap: 1.8mm;
}
.mock-g-1a-print .kpi {
  flex: 1;
  min-width: 0;
  border-radius: 1.2mm;
  padding: 1.3mm 1.6mm;
  color: #FFF;
  background: linear-gradient(168deg, #4B8032 0%, #55A035 58%, #63B93C 100%);
  display: flex;
  flex-direction: column;
  gap: .6mm;
}
.mock-g-1a-print .kpi-label {
  margin: 0;
  font-size: 7.2pt;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}
.mock-g-1a-print .kpi-value {
  margin: 0;
  font-size: 10.5pt;
  font-weight: 700;
  line-height: 1.15;
  white-space: nowrap;
}
.mock-g-1a-print .kpi-value .unit {
  font-size: 7.2pt;
  font-weight: 600;
  margin-left: .4mm;
}

.mock-g-1a-print .chart-card {
  background: #FFFFFF;
  border-radius: 1.2mm;
  padding: 1.55mm 1.8mm;
  display: flex;
  flex-direction: column;
  gap: 1mm;
}
.mock-g-1a-print .chart-title {
  margin: 0;
  font-size: 7.5pt;
  font-weight: 700;
  line-height: 1.3;
}

.mock-g-1a-print .chart { display: block; }
.mock-g-1a-print .chart .grid line { stroke: var(--line); stroke-width: .0667; }
.mock-g-1a-print .chart .grid .axis { stroke: #D8D8D8; }
.mock-g-1a-print .chart text {
  font-family: inherit;
  fill: #8A8A8A;
  font-size: 2.7px;
}
.mock-g-1a-print .chart .ax-y { text-anchor: end; }
.mock-g-1a-print .chart .ax-y--right { text-anchor: start; }
.mock-g-1a-print .chart .ax-x { text-anchor: middle; font-weight: 700; fill: #5C5C5C; }
.mock-g-1a-print .chart .ln { fill: none; stroke: var(--c-co2); stroke-width: .5; stroke-dasharray: 1.4 1; stroke-linejoin: round; }

.mock-g-1a-print .legend {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3mm;
}
.mock-g-1a-print .lg {
  display: inline-flex;
  align-items: center;
  gap: .8mm;
  font-size: 9pt;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  white-space: nowrap;
}
.mock-g-1a-print .lg-chip {
  display: inline-block;
  width: 2.6mm;
  height: 2.6mm;
  border-radius: .5mm;
  flex: none;
}

.mock-g-1a-print .lg-line {
  display: inline-block;
  width: 4.8mm;
  height: 2.6mm;
  flex: none;
  position: relative;
}
.mock-g-1a-print .lg-line::before {
  content: "";
  position: absolute;
  top: 1.05mm;
  left: 0;
  width: 100%;
  height: .5mm;
  background: repeating-linear-gradient(to right,
    var(--c-co2) 0 1.4mm, transparent 1.4mm 2.4mm);
}