/*
 * 계정 페이지만의 배치. 색·글꼴·결제 줄(.billing-line, .billing-big,
 * .invite-code …)은 style.css 의 것을 그대로 쓴다 — 결제 화면이 문서 앱에서
 * 이리로 옮겨 온 것이라, 같은 자료가 같은 모양으로 보여야 한다. 여기 복사해
 * 두면 한쪽만 바뀌는 날이 온다.
 *
 * Layout only; the billing rows and tokens come from style.css so the same
 * numbers keep the same shape they had in the documents app.
 */

/* 문서 앱은 좌우 분할이라 body 가 flex 였다. 이 페이지는 한 칸짜리 문서다. */
body.account-page {
  display: block;
  overflow-y: auto;
}

#account {
  max-width: 46rem;
  margin: 0 auto;
  padding: 2rem 1.25rem 4rem;
}

.acc-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding-bottom: 1rem;
}
.acc-head .brand { font-size: 1.1rem; font-weight: 600; }
.acc-who { display: flex; align-items: center; gap: 0.6rem; }

/* 잔액은 이 페이지에서 가장 먼저 읽히는 숫자다. 다른 구역과 떨어뜨려 둔다. */
.acc-balance {
  padding: 1.25rem 0 1.75rem;
  border-bottom: 1px solid var(--line, #e5e5e5);
}

/* 제목 **모양**은 style.css 가 정한다(`#account .acc-sec h2`) — 결제 모달의
   소제목과 같은 자료라 같아야 하고, 여기 다시 적으면 한쪽만 바뀐다.
   여기서는 간격만 본다. */
.acc-sec { padding: 1.5rem 0; border-bottom: 1px solid var(--line, #e5e5e5); }
.acc-sec:last-of-type { border-bottom: 0; }

.invite-row { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }

/* 못 불러왔을 때. 빈 화면으로 두면 "내역이 없다" 로 읽힌다. */
.acc-error {
  margin: 1.5rem 0 0;
  padding: 0.75rem 0.9rem;
  border-radius: 6px;
  background: var(--warn-bg, #fff4e5);
  color: var(--warn-fg, #7a4a00);
}

/* 좁은 화면 — 확장에서 넘어온 사람은 창을 좁게 쓰는 경우가 많다. */
@media (max-width: 30rem) {
  #account { padding: 1.25rem 1rem 3rem; }
  .billing-line { font-size: 0.9rem; }
}