@charset "UTF-8";

.mock-a-2-sp {
  --brand:        #58AA35;
  --bar-a:        #91CC75;   
  --bg:           #F5F5F5;
  --surface:      #FFFFFF;
  --line:         #E9E9E9;
  --line-soft:    #F0F0F0;
  --text:         #333333;
  --text-sub:     #8A8A8A;
  --text-faint:   #B4B4B4;
  --radius: 8px;

  font-family: "Noto Sans JP", "Hiragino Sans", "Yu Gothic UI", "Meiryo", system-ui, sans-serif;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text);
}

.mock-a-2-sp *,
.mock-a-2-sp *::before,
.mock-a-2-sp *::after { box-sizing: border-box; }

.mock-a-2-sp h1, .mock-a-2-sp h2, .mock-a-2-sp h3, .mock-a-2-sp p { margin: 0; }

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

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

.mock-a-2-sp .metabar {
  padding: 8px 12px;
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px;
  border-bottom: 1px solid var(--line);
}
.mock-a-2-sp .metabar strong { font-size: 13px; font-weight: 700; }
.mock-a-2-sp .metabar span   { font-size: 10.5px; color: var(--text-sub); }
.mock-a-2-sp .metabar .sep   { color: var(--line); }

.mock-a-2-sp .subnav {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 0 12px; min-height: 34px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.mock-a-2-sp .subnav-tabs { display: flex; gap: 12px; align-self: stretch; }
.mock-a-2-sp .subnav-tabs a {
  font-size: 11px; font-weight: 700; color: var(--text-faint); text-decoration: none;
  display: flex; align-items: center;
  border-bottom: 2px solid transparent;
}
.mock-a-2-sp .subnav-tabs a.is-active { color: var(--brand); border-color: var(--brand); }
.mock-a-2-sp .subnav-period { font-size: 10.5px; font-weight: 600; color: #3C3C3C; white-space: nowrap; }

.mock-a-2-sp .ch-grid { display: block; padding: 12px; background: var(--bg); }
.mock-a-2-sp .ch-card {
  background: var(--surface); border-radius: var(--radius); padding: 12px;
}
.mock-a-2-sp .ch-card-head { display: flex; align-items: center; gap: 6px; }
.mock-a-2-sp .ch-title {
  display: flex; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; min-width: 0;
}
.mock-a-2-sp .badge-usage {
  font-size: 9px; font-weight: 700; color: #4A4A4A;
  background: #F0F0F0; border-radius: 4px; padding: 1px 5px; flex: none;
}

.mock-a-2-sp .btn-report { display: none; }

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

.mock-a-2-sp .ch-body { margin-top: 10px; }
.mock-a-2-sp .statlist { display: flex; flex-direction: column; gap: 4px; }
.mock-a-2-sp .statrow { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.mock-a-2-sp .statrow .k { color: var(--text-sub); }
.mock-a-2-sp .statrow .v { font-weight: 700; color: var(--text); }

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