/* "내 기록" 페이지 전용 스타일.
   기본 톤(배경·카드·통계 박스·표·버튼)은 speed.css를 그대로 쓰고,
   여기에는 이 페이지에만 있는 요소(그래프, 막대, 로그인 게이트)만 둔다. */

.wrap-wide { max-width: 860px; }

/* ---- 로그인 전 안내 ---- */
.gate {
  text-align: center;
  padding: 40px 24px;
}
.gate-msg {
  margin: 0 0 18px;
  font-size: 0.98rem;
  color: var(--text);
}
.gate-sub {
  margin: 18px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
}
.gate-sub a { color: var(--accent); text-decoration: none; }
.gate .google-btn { margin: 0 auto; }

/* ---- 계정 줄 ---- */
.account-panel { padding: 14px 20px; }
.account-since {
  flex: 1;
  font-size: 0.82rem;
  color: var(--muted);
}

/* ---- 언어 선택 줄 ---- */
.toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

/* ---- 통계 박스 보강 ---- */
.stat-row-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.stat-sub {
  font-size: 0.76rem;
  color: var(--muted);
  min-height: 1.1em;
}

.panel-note {
  font-size: 0.8rem;
  color: var(--muted);
}
.sub-head {
  margin: 26px 0 10px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--muted);
}
.sub-head:first-of-type { margin-top: 18px; }

/* ---- 꺾은선 그래프 (SVG) ---- */
.chart-wrap {
  width: 100%;
  overflow: hidden;
}
.chart-wrap svg {
  display: block;
  width: 100%;
  height: auto;
}
.line-path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.line-area { fill: rgba(59, 108, 240, 0.1); }
.line-dot { fill: var(--surface); stroke: var(--accent); stroke-width: 1.5; }
.line-dot-best { fill: var(--accent); stroke: var(--accent); }
.line-grid {
  stroke: var(--line-soft);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.line-axis-label {
  fill: var(--muted);
  font-size: 9px;
  font-family: inherit;
}

/* ---- 막대 (요일·시간대) ---- */
.bars {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  height: 90px;
}
.bars-hour { gap: 3px; }
.bar {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  gap: 5px;
}
.bar-fill {
  width: 100%;
  min-height: 3px;
  background: #dbe3f8;
  border-radius: 4px 4px 0 0;
  transition: background 0.15s;
}
.bar.top .bar-fill { background: var(--accent); }
.bar-label {
  font-size: 0.7rem;
  color: var(--muted);
  white-space: nowrap;
}
.bars-hour .bar-label { font-size: 0.62rem; }

.empty-msg {
  margin: 16px 0 0;
  padding: 18px 0;
  text-align: center;
  font-size: 0.88rem;
  color: var(--muted);
}
.empty-msg a { color: var(--accent); text-decoration: none; }

.rank-line {
  margin: 0 0 8px;
  font-size: 1rem;
}
.rank-line b {
  color: var(--accent);
  font-size: 1.25rem;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .stat-row-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .stat-row-4 { grid-template-columns: 1fr; }
  .bars-hour .bar-label { display: none; }
  .toolbar { flex-wrap: wrap; }
}