/* 사용 내역·계정 칸. 반응형보다 뒤에 와야 원래 캐스케이드와 같다. (studio.css 에서 옮김) */
/* 사용 내역 */
.usage-status { text-align: left; }
.checkout-notice { margin: var(--sp-4) 0 var(--sp-3); padding: 10px 14px; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); color: var(--c-text); text-align: left; font-size: var(--fs-md); }
.usage-block { margin-top: 28px; }
.usage-block h2 { margin: 0 0 var(--sp-3); font-size: 17px; font-weight: var(--fw-black); }
.usage-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--c-line-strong); border-radius: var(--r-md); background: var(--c-surface); }
.usage-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: var(--sp-3); padding: 12px 16px; border-top: 1px solid var(--c-line); font-size: var(--fs-md); }
.usage-row:first-child { border-top: 0; }
#usageProjectList .usage-row { grid-template-columns: minmax(0, 1fr) auto auto; }
.usage-kind { padding: 2px 8px; border-radius: 999px; background: var(--c-surface-hover); font-size: var(--fs-xs); font-weight: var(--fw-bold); }
.usage-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.usage-when { color: var(--c-muted); font-size: var(--fs-xs); }
.usage-amount { font-variant-numeric: tabular-nums; }
.usage-list .tone-plus { color: var(--c-success); }
.usage-list .tone-minus { color: var(--c-text); }
.usage-empty { padding: 14px 16px; color: var(--c-muted); font-size: var(--fs-sm); }
@media (max-width: 600px) {
  .usage-row, #usageProjectList .usage-row { grid-template-columns: minmax(0, 1fr) auto; }
  .usage-when { grid-column: 1; }
}
/* 계정 칸(사이드바 사용량 아래) · 링크 입력 오류의 로그인 버튼 */
.account-login {
  display: flex; align-items: center; justify-content: center; gap: var(--sp-2); height: 40px; margin-top: var(--sp-2); padding: 0 var(--sp-3);
  border: 1px solid var(--c-line-strong); border-radius: 10px; background: #fff; color: #1f1f1f; font-size: var(--fs-sm); font-weight: var(--fw-bold);
  white-space: nowrap; cursor: pointer;
}
.account-login:hover { filter: brightness(.96); }
.url-login { margin: var(--sp-2) auto 0; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-2); padding: 0 4px; color: var(--c-text-soft); font-size: var(--fs-xs); }
.account-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: var(--fw-bold); }
.account-logout { flex: none; height: 28px; padding: 0 10px; border: 1px solid var(--c-line); border-radius: 8px; background: transparent; color: var(--c-muted); font-size: var(--fs-xs); font-weight: var(--fw-bold); cursor: pointer; }
.result-login { margin-top: var(--sp-2); }
.render-status .btn { margin-left: var(--sp-2); }
@media (max-width: 900px) {
  .side .account-login { flex: none; height: 44px; margin: 0 0 0 var(--sp-2); padding: 0 10px; font-size: var(--fs-xs); }
  .side .account-row { flex: none; margin: 0 0 0 var(--sp-2); padding: 0; }
  .side .account-logout { height: 44px; }
}
@media (max-width: 560px) {
  .side .account-name, .side .account-login-via { display: none; }
}