@charset "UTF-8";

.mock-a-2 {
  --brand:        #58AA35;
  --brand-dark:   #4A9130;

  --bar-a: #91CC75;  
  --bar-b: #FAC858;  

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

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

  --radius: 8px;
}

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

.mock-a-2 {
  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-a-2 h1,
.mock-a-2 h2,
.mock-a-2 h3,
.mock-a-2 p { margin: 0; }
.mock-a-2 button { font: inherit; color: inherit; }

.mock-a-2 .ico {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: currentColor;
  stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round;
}

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

.mock-a-2 .metabar {
  padding: 14px 16px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px;
  border-bottom: 1px solid var(--line);
}
.mock-a-2 .metabar strong { font-size: 14px; font-weight: 700; }
.mock-a-2 .metabar span { font-size: 11px; color: var(--text-sub); }
.mock-a-2 .metabar .sep { color: var(--line); }
.mock-a-2 .metabar-sub { width: 100%; font-size: 10.5px; color: var(--text-faint); margin-top: 2px; }

.mock-a-2 .subnav {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 16px; height: 38px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mock-a-2 .subnav-tabs { display: flex; gap: 20px; height: 100%; }
.mock-a-2 .subnav-tabs a {
  font-size: 12px; font-weight: 700; color: var(--text-faint); text-decoration: none;
  display: flex; align-items: center; height: 100%;
  border-bottom: 2px solid transparent;
}
.mock-a-2 .subnav-tabs a.is-active { color: var(--brand); border-color: var(--brand); }
.mock-a-2 .subnav-period { font-size: 11.5px; font-weight: 600; color: #3C3C3C; }

.mock-a-2 .ch-grid { display: flex; gap: 14px; padding: 16px; background: var(--bg); }
.mock-a-2 .ch-card { flex: 1; min-width: 0; background: var(--surface); border-radius: var(--radius); padding: 14px 16px 16px; }
.mock-a-2 .ch-card-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mock-a-2 .ch-title { display: flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.mock-a-2 .badge-usage { font-size: 9.5px; font-weight: 700; color: #4A4A4A; background: #F0F0F0; border-radius: 4px; padding: 2px 6px; flex: none; }
.mock-a-2 .btn-report {
  display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 10px;
  border: 1px solid #E0E0E0; border-radius: 5px; background: #FFF;
  font-size: 10.5px; font-weight: 600; color: #4A4A4A; cursor: pointer; flex: none;
}
.mock-a-2 .btn-report .ico { width: 12px; height: 12px; }

.mock-a-2 .chart { display: block; width: 100%; margin-top: 10px; }
.mock-a-2 .chart .grid line { stroke: #EFEFEF; stroke-width: 1; }
.mock-a-2 .chart .grid .axis { stroke: #DCDCDC; }
.mock-a-2 .chart text { font-family: inherit; fill: #8A8A8A; font-size: 11px; }
.mock-a-2 .chart .ax-y { text-anchor: end; }
.mock-a-2 .chart .ax-unit { fill: #9A9A9A; font-size: 10px; }

.mock-a-2 .ch-body { display: flex; gap: 14px; margin-top: 12px; }
.mock-a-2 .statlist { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; justify-content: center; }
.mock-a-2 .statrow { display: flex; justify-content: space-between; gap: 8px; font-size: 11.5px; }
.mock-a-2 .statrow .k { color: var(--text-sub); }
.mock-a-2 .statrow .v { font-weight: 700; color: var(--text); }

.mock-a-2 .metarow {
  display: flex; flex-wrap: wrap; gap: 5px 14px; margin-top: 12px; padding-top: 10px;
  border-top: 1px solid var(--line-soft); font-size: 10.5px; color: var(--text-sub);
}
.mock-a-2 .metarow b { color: var(--text); font-weight: 600; }