@charset "UTF-8";

.mock-g-1a-lp {
  --brand:        #58AA35;
  --brand-dark:   #4A9130;

  --c-hvac:   #5470C6;  
  --c-power:  #91CC75;  
  --c-light:  #FAC858;  
  --c-water:  #EE6666;  

  --c-co2:      #8FC3FF;

  --bg:         #F5F5F5;
  --surface:    #FFFFFF;
  --line:       #E9E9E9;
  --line-soft:  #F0F0F0;

  --text:       #333333;
  --text-sub:   #8A8A8A;

  --radius: 8px;
}

.mock-g-1a-lp * { box-sizing: border-box; }

.mock-g-1a-lp {
  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 12px;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
}

.mock-g-1a-lp h1, .mock-g-1a-lp h2, .mock-g-1a-lp h3, .mock-g-1a-lp p { margin: 0; }
.mock-g-1a-lp button { font: inherit; color: inherit; }

.mock-g-1a-lp .ico {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}
.mock-g-1a-lp .ico-r { transform: rotate(180deg); }

.mock-g-1a-lp .icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px;
  background: none; color: #6B6B6C; cursor: pointer;
}
.mock-g-1a-lp .icon-btn--sm { width: 24px; height: 24px; color: #A8A8A8; }
.mock-g-1a-lp .icon-btn--sm .ico { width: 14px; height: 14px; }
.mock-g-1a-lp .divider-v { width: 1px; height: 16px; background: var(--line); flex: none; }

.mock-g-1a-lp .stage {
  max-width: 1032px;
  margin: 0 auto;
}
.mock-g-1a-lp .screen {
  background: var(--surface);
  border-radius: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  box-shadow: 0 1px 4px rgba(0,0,0,.08);
}

.mock-g-1a-lp .topbar {
  height: 42px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
}
.mock-g-1a-lp .topbar-title h1 { font-size: 15px; font-weight: 700; line-height: 1.3; }
.mock-g-1a-lp .topbar-title p { font-size: 10px; color: var(--text-sub); margin-top: 1px; }
.mock-g-1a-lp .topbar-actions { display: flex; align-items: center; gap: 6px; }
.mock-g-1a-lp .avatar {
  width: 28px; height: 28px; border-radius: 50%;
  border: 1px solid #EDEDED; background: #FBFBFB; color: var(--c-hvac);
  font-size: 12px; font-weight: 700; cursor: pointer;
}

.mock-g-1a-lp .tabbar {
  height: 44px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px;
  border-top: 1px solid var(--line-soft);
  border-bottom: 1px solid var(--line);
}
.mock-g-1a-lp .period-tabs { display: flex; align-items: center; gap: 10px; }
.mock-g-1a-lp .period-tabs button {
  width: 26px; height: 26px; border: 0; border-radius: 50%;
  background: none; font-size: 12px; font-weight: 700; color: #4A4A4A; cursor: pointer;
}
.mock-g-1a-lp .period-tabs button.is-active { background: var(--brand); color: #FFF; }

.mock-g-1a-lp .range-group { display: flex; align-items: center; gap: 6px; }
.mock-g-1a-lp .step-btn {
  width: 20px; height: 20px; display: flex; align-items: center; justify-content: center;
  border: 0; background: none; color: #7A7A7A; cursor: pointer; padding: 0;
}
.mock-g-1a-lp .step-btn .ico { width: 13px; height: 13px; transform: rotate(180deg); }
.mock-g-1a-lp .step-btn .ico-r { transform: rotate(0deg); }
.mock-g-1a-lp .range-input {
  display: flex; align-items: center; gap: 22px;
  height: 28px; padding: 0 9px; border: 1px solid #E4E4E4; border-radius: 6px;
  font-size: 11.5px; font-weight: 600; color: #3C3C3C; white-space: nowrap;
}
.mock-g-1a-lp .range-input .ico { width: 14px; height: 14px; color: #A0A0A0; }

.mock-g-1a-lp .content { padding: 0 16px 20px; background: var(--bg); }

.mock-g-1a-lp .tzbar { height: 30px; display: flex; align-items: center; justify-content: space-between; }
.mock-g-1a-lp .tz { font-size: 10px; color: var(--text-sub); }
.mock-g-1a-lp .tz-actions { display: flex; gap: 2px; }

.mock-g-1a-lp .kpi-row { display: flex; gap: 10px; margin-bottom: 12px; }
.mock-g-1a-lp .kpi {

  width: auto; flex: 1 1 0; min-width: 0;
  height: auto; min-height: 86px;
  border-radius: var(--radius); padding: 12px 14px; color: #FFF;
  background: linear-gradient(168deg, #4B8032 0%, #55A035 58%, #63B93C 100%);
  display: flex; flex-direction: column; justify-content: space-between;
}
.mock-g-1a-lp .kpi-value { font-size: 21px; font-weight: 700; line-height: 1; letter-spacing: -.01em; }
.mock-g-1a-lp .kpi-unit { font-size: 10px; font-weight: 600; margin-left: 4px; opacity: .92; }
.mock-g-1a-lp .kpi-label { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 500; }
.mock-g-1a-lp .kpi-ico {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: rgba(255,255,255,.82); color: var(--brand-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.mock-g-1a-lp .kpi-ico .ico { width: 11px; height: 11px; fill: var(--brand-dark); stroke-width: 1; }

.mock-g-1a-lp .card { background: var(--surface); border-radius: var(--radius); padding: 14px 16px 16px; margin-bottom: 12px; }
.mock-g-1a-lp .card-head h2 { font-size: 13px; font-weight: 700; }
.mock-g-1a-lp .card-head p { font-size: 10.5px; color: var(--text-sub); margin-top: 2px; }

.mock-g-1a-lp .legend { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; margin: 10px 0 2px; }
.mock-g-1a-lp .legend--bottom { margin: 8px 0 0; }
.mock-g-1a-lp .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; color: #5C5C5C; white-space: nowrap; }
.mock-g-1a-lp .lg-bar { width: 18px; height: 10px; border-radius: 2px; flex: none; }
.mock-g-1a-lp .lg-line { width: 22px; height: 10px; flex: none; position: relative; }
.mock-g-1a-lp .lg-line::before { content: ""; position: absolute; top: 4.5px; left: 0; width: 100%; height: 2px; background: var(--c); }
.mock-g-1a-lp .lg-line::after { content: ""; position: absolute; top: 1.5px; left: 7px; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }

.mock-g-1a-lp .chart { display: block; width: 100%; margin-top: 6px; }
.mock-g-1a-lp .chart .grid line { stroke: #EFEFEF; stroke-width: 1; }
.mock-g-1a-lp .chart .grid .axis { stroke: #DCDCDC; }
.mock-g-1a-lp .chart text { font-family: inherit; fill: #8A8A8A; font-size: 28px; }
.mock-g-1a-lp .chart .ax-y { text-anchor: end; }
.mock-g-1a-lp .chart .ax-y--right { text-anchor: start; }
.mock-g-1a-lp .chart .ax-x { text-anchor: middle; }
.mock-g-1a-lp .chart .ax-unit, .mock-g-1a-lp .chart .ax-unit-x { fill: #9A9A9A; font-size: 24px; text-anchor: middle; }
.mock-g-1a-lp .chart .ln { fill: none; stroke: var(--c); stroke-width: 2; stroke-linejoin: round; }

@media (max-width: 780px) {

  .mock-g-1a-lp .topbar {
    height: auto; min-height: 42px;
    padding-top: 6px; padding-bottom: 6px;
    align-items: flex-start;
    gap: 8px;
  }
  .mock-g-1a-lp .topbar-title { min-width: 0; }
  .mock-g-1a-lp .topbar-title p { line-height: 1.4; }
  .mock-g-1a-lp .topbar-actions { flex: none; }

  .mock-g-1a-lp .tzbar { height: auto; min-height: 30px; padding: 4px 0; }

  .mock-g-1a-lp .kpi-row { gap: 8px; }
  .mock-g-1a-lp .kpi-value { font-size: 18px; }
  .mock-g-1a-lp .kpi-label { font-size: 10.5px; }

  .mock-g-1a-lp .tabbar {
    height: auto; min-height: 44px;
    flex-wrap: wrap; gap: 4px 0; padding: 6px 12px;
  }
  .mock-g-1a-lp .period-tabs { gap: 4px; }
  .mock-g-1a-lp .range-input { gap: 10px; padding: 0 7px; }

  .mock-g-1a-lp .topbar { padding: 0 12px; }
  .mock-g-1a-lp .content { padding: 0 12px 16px; }
}

@media (max-width: 430px) {
  .mock-g-1a-lp .kpi { padding: 10px; min-height: 78px; }
  .mock-g-1a-lp .kpi-value { font-size: 15px; }
  .mock-g-1a-lp .kpi-unit { font-size: 9px; }
  .mock-g-1a-lp .kpi-label { font-size: 9.5px; gap: 5px; }
  .mock-g-1a-lp .kpi-ico { width: 15px; height: 15px; }
  .mock-g-1a-lp .period-tabs button { width: 23px; height: 23px; font-size: 11px; }
}