/* 계정관리 본문 — 항목별로 나뉜 설정 카드. /admin과 /center가 함께 쓴다.
   (작업자 앱은 폰 전용이라 지금 형태를 그대로 두고 여기서 제외한다.)

   예전에는 라벨과 입력칸이 인라인 style로 하나하나 박혀 있어, 칸마다 여백·모서리·글자
   크기가 조금씩 달랐고 어디까지가 한 묶음인지 알 수 없었다. 여기서는
   "제목+설명 / 입력칸"을 한 줄로 놓는 설정 화면 형태로 통일한다.

   색은 var() 대체값을 겹쳐 써서 그 화면의 색을 따른다 —
   센터는 따뜻한 색(--warm-*, --accent*), 관리자는 푸른 색(--mw-*). */

.acct-card {
  background: var(--warm-card, var(--mw-surface));
  border: 1px solid var(--warm-line, var(--mw-line));
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
  overflow: hidden;
  max-width: 780px;
  margin-bottom: 16px;
}

/* ---- 카드 머리 ---- */
.acct-card-head { padding: 16px 20px; border-bottom: 1px solid var(--warm-line, var(--mw-line)); }
.acct-card-head h3 {
  margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
  color: var(--warm-ink, var(--mw-ink));
}
.acct-card-head p {
  margin: 5px 0 0; font-size: 12px; line-height: 1.6;
  color: var(--warm-sub, var(--mw-muted));
}

/* ---- 프로필 머리줄 (사진 + 이름 + 권한) ---- */
.acct-hero {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 18px 20px; border-bottom: 1px solid var(--warm-line, var(--mw-line));
  background: var(--warm-bg, var(--mw-surface-sunken));
}
.acct-avatar, .acct-avatar-empty {
  width: 58px; height: 58px; flex: 0 0 58px; border-radius: 16px; object-fit: cover;
  background: var(--warm-card, var(--mw-neutral-soft));
  border: 1px solid var(--warm-line, var(--mw-line));
}
.acct-avatar-empty {
  display: flex; align-items: center; justify-content: center;
  /* 바탕이 회색칸(--mw-neutral-soft)이라 흐린 글자를 얹으면 밝은 화면 4.17 · 어두운 화면 4.25 로
     둘 다 모자랐다. 밝은 쪽은 진하게, 어두운 쪽은 밝게 해야 풀려 토큰 하나로는 안 되므로
     여기만 한 단계 진한 것을 쓴다(5.52 / 7.90). 센터는 제 --warm-sub 를 그대로 쓴다 —
     그쪽 바탕은 흰 카드(--warm-card)라 4.96 으로 이미 넉넉하다. */
  font-size: 22px; color: var(--warm-sub, var(--mw-ink-soft));
}
.acct-hero-text { flex: 1 1 160px; min-width: 0; }
.acct-hero-name {
  font-size: 17px; font-weight: 800; letter-spacing: -.01em;
  color: var(--warm-ink, var(--mw-ink));
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.acct-hero-sub { margin-top: 5px; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.acct-chip {
  font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px;
  background: var(--accent-soft, var(--mw-accent-soft));
  color: var(--accent-ink, var(--mw-accent-ink));
}
.acct-hero-note { font-size: 12px; color: var(--warm-sub, var(--mw-muted)); }

/* ---- 항목 한 줄: 왼쪽 "제목 + 설명", 오른쪽 입력칸 ---- */
.acct-sec {
  display: grid; grid-template-columns: minmax(160px, 210px) 1fr; gap: 6px 28px;
  padding: 18px 20px;
}
.acct-sec + .acct-sec { border-top: 1px solid var(--warm-line, var(--mw-line)); }
/* 넓게 펼쳐야 하는 항목(요금제 카드처럼 여러 개를 나란히 두는 것) — 제목을 위로 올리고
   내용이 칸 전체를 쓰게 한다. 두 칸으로 나누면 카드가 좁은 오른쪽 칸에 갇힌다. */
.acct-sec.acct-sec-wide { grid-template-columns: 1fr; gap: 12px; }
.acct-sec-head h4 {
  margin: 0; font-size: 13px; font-weight: 800;
  color: var(--warm-ink, var(--mw-ink));
}
.acct-sec-head p {
  margin: 5px 0 0; font-size: 11.5px; line-height: 1.65;
  color: var(--warm-sub, var(--mw-muted));
}

/* 입력칸 묶음 — 짧은 칸은 한 줄에 둘씩, 좁아지면 저절로 한 줄에 하나씩 */
.acct-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; align-content: start; }
.acct-fields.one-col { grid-template-columns: 1fr; }
.acct-field { display: block; min-width: 0; }
.acct-field > span {
  display: block; margin-bottom: 5px;
  font-size: 11.5px; font-weight: 700; letter-spacing: .01em;
  color: var(--warm-sub, var(--mw-muted));
}
.acct-field input, .acct-field select, .acct-field textarea {
  width: 100%; box-sizing: border-box; height: 40px; padding: 0 12px;
  border: 1px solid var(--warm-line, var(--mw-line-strong)); border-radius: 10px;
  font-size: 13.5px; font-family: inherit;
  color: var(--warm-ink, var(--mw-ink));
  background: var(--warm-bg, var(--mw-surface-sunken));
  transition: border-color var(--mw-dur, .15s) var(--mw-ease, ease),
              box-shadow var(--mw-dur, .15s) var(--mw-ease, ease),
              background var(--mw-dur, .15s) var(--mw-ease, ease);
}
.acct-field input:focus, .acct-field select:focus, .acct-field textarea:focus {
  outline: none; background: var(--warm-card, var(--mw-surface));
  border-color: var(--accent, var(--mw-accent));
  box-shadow: 0 0 0 3px var(--accent-soft, var(--mw-accent-soft));
}
.acct-field input::placeholder { color: var(--warm-sub, var(--mw-muted)); opacity: .7; }
.acct-hint { margin: 6px 0 0; font-size: 11.5px; line-height: 1.6; color: var(--warm-sub, var(--mw-muted)); }

/* 문의 입력칸도 위 입력칸과 같은 모양으로 맞춘다(문의 목록 자체는 공통 account.css 그대로).
   .acct-card 안에서만 적용해서, 이 파일을 안 쓰는 작업자 화면은 지금 모습 그대로 남는다. */
.acct-card .inq-form select, .acct-card .inq-form input, .acct-card .inq-form textarea {
  padding: 10px 12px; border-radius: 10px;
  background: var(--warm-bg, var(--mw-surface-sunken));
  transition: border-color var(--mw-dur, .15s) var(--mw-ease, ease),
              box-shadow var(--mw-dur, .15s) var(--mw-ease, ease),
              background var(--mw-dur, .15s) var(--mw-ease, ease);
}
.acct-card .inq-form select, .acct-card .inq-form input { height: 40px; }
.acct-card .inq-form textarea { height: auto; }
.acct-card .inq-form select:focus, .acct-card .inq-form input:focus, .acct-card .inq-form textarea:focus {
  background: var(--warm-card, var(--mw-surface));
}
.acct-card .inq-item { border-radius: 12px; }

/* ---- 읽기 전용 요약 (회사 정보·구독 정보처럼 JS가 채우는 내용) ---- */
.acct-readout {
  padding: 12px 14px; border-radius: 12px;
  background: var(--warm-bg, var(--mw-surface-sunken));
  border: 1px solid var(--warm-line, var(--mw-line));
  font-size: 13px; line-height: 1.7; color: var(--warm-ink, var(--mw-ink));
}
.acct-readout:empty { display: none; }

/* ---- 카드 맨 아래 실행 줄 ---- */
.acct-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap;
  padding: 14px 20px; border-top: 1px solid var(--warm-line, var(--mw-line));
  background: var(--warm-bg, var(--mw-surface-sunken));
}
.acct-foot .error { margin: 0; margin-right: auto; }
/* 실행 줄이 아니라 항목 안에 버튼이 들어가는 경우(회사 정보 수정 등) */
.acct-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ---- 원격 지원 안내 — 순서대로 따라 하는 절차라 번호를 세워 보여준다 ---- */
.acct-steps { counter-reset: acct-step; list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.acct-steps li {
  position: relative; padding-left: 30px;
  font-size: 13px; line-height: 1.65; color: var(--warm-ink, var(--mw-ink));
}
.acct-steps li::before {
  counter-increment: acct-step; content: counter(acct-step);
  position: absolute; left: 0; top: 1px;
  width: 21px; height: 21px; border-radius: 50%;
  background: var(--accent-soft, var(--mw-accent-soft));
  color: var(--accent-ink, var(--mw-accent-ink));
  font-size: 11px; font-weight: 800; line-height: 21px; text-align: center;
}
.acct-callout {
  margin-top: 12px; padding: 10px 13px; border-radius: 10px;
  background: var(--mw-warn-soft); color: var(--mw-warn-ink);
  font-size: 12px; line-height: 1.6;
}
.acct-cta {
  display: block; text-align: center; text-decoration: none;
  padding: 13px; border-radius: 12px; font-weight: 700; font-size: 14px;
  background: var(--mw-good); color: #fff;
}
.acct-cta:hover { filter: brightness(1.06); }
/* 원격 지원 접속 번호 — 자릿수를 맞춰 크게 */
#remote-code { height: 46px; font-size: 18px; letter-spacing: 2px; text-align: center; font-variant-numeric: tabular-nums; }

/* ---- 요금제 카드 ----
   표로 늘어놓으면 무엇이 다른지 눈으로 비교하기 어렵다. 카드를 나란히 두고 값(금액)을 가장 크게,
   그 아래 제공량, 맨 아래 딸린 기능 순으로 쌓아 위에서 아래로 읽히게 한다. */
.plan-grid {
  display: grid; gap: 12px; margin-top: 4px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.plan-loading { color: var(--mw-muted); font-size: 13px; padding: 20px 0; }
.plan-card {
  position: relative; display: flex; flex-direction: column; text-align: center;
  padding: 20px 16px 18px; border: 1px solid var(--mw-line); border-radius: 14px;
  background: var(--mw-surface); cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  /* 처음 그려질 때 아래에서 살짝 올라오며 나타난다(카드마다 조금씩 늦게 — 아래 --i). */
  animation: plan-rise .42s cubic-bezier(.22, .8, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 70ms);
}
@keyframes plan-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 10px 26px rgba(31, 36, 48, .12); border-color: var(--mw-line-strong); }
.plan-card:focus-visible { outline: 2px solid var(--mw-accent); outline-offset: 2px; }
/* 고른 카드 — 테두리와 옅은 바탕으로 확실히 구분한다. */
.plan-card.picked { border-color: var(--mw-accent); background: var(--mw-accent-soft); box-shadow: 0 8px 22px rgba(47, 95, 218, .18); }
.plan-card.picked:hover { transform: translateY(-4px); }
/* 지금 쓰고 있는 요금제 */
.plan-card.current { border-color: var(--mw-good); }
.plan-badge {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 800; white-space: nowrap;
  background: var(--mw-good); color: #fff;
}
.plan-card.picked .plan-badge.pick-badge { background: var(--mw-accent); }
.plan-name { font-size: 15px; font-weight: 800; color: var(--mw-ink); margin: 2px 0 10px; }
.plan-fee { font-size: 25px; font-weight: 800; letter-spacing: -.5px; color: var(--mw-ink); line-height: 1.15; }
.plan-fee .unit { font-size: 13px; font-weight: 700; color: var(--mw-muted); margin-left: 2px; }
.plan-fee.negotiable { font-size: 20px; }
.plan-quota { margin-top: 8px; font-size: 12.5px; font-weight: 700; color: var(--mw-accent-ink); }
.plan-sub { margin-top: 4px; font-size: 11.5px; color: var(--mw-muted); }
.plan-feats { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--mw-line); display: flex; flex-direction: column; gap: 7px; text-align: left; }
.plan-card.picked .plan-feats { border-top-color: rgba(47, 95, 218, .25); }
.plan-feat { display: flex; gap: 7px; font-size: 12px; color: var(--mw-ink-soft); line-height: 1.45; }
.plan-feat .tick { color: var(--mw-good-ink); font-weight: 800; flex: 0 0 auto; }
.plan-feat.off .tick { color: var(--mw-muted); }
.plan-feat.off { color: var(--mw-muted); }
/* 고른 뒤 나타나는 실행 줄 */
.plan-pick-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  margin-top: 14px; padding: 12px 14px; border-radius: 12px;
  background: var(--mw-accent-soft); border: 1px solid var(--mw-accent);
  animation: plan-rise .28s ease backwards;
}
.plan-pick-bar[hidden] { display: none; }
.plan-pick-text { font-size: 13px; font-weight: 700; color: var(--mw-accent-ink); }
/* 움직임을 줄이도록 설정한 사람에게는 애니메이션을 끈다. */
@media (prefers-reduced-motion: reduce) {
  .plan-card, .plan-pick-bar { animation: none; }
  .plan-card { transition: border-color .15s ease; }
  .plan-card:hover { transform: none; box-shadow: none; }
}
@media (max-width: 560px) {
  .plan-grid { grid-template-columns: 1fr; gap: 10px; }
  .plan-card { text-align: left; padding: 16px 14px; }
  .plan-badge { left: 14px; transform: none; }
  .plan-feats { text-align: left; }
  .plan-pick-bar { justify-content: stretch; }
  /* 폰에서는 손가락으로 누르는 단추라 높이를 넉넉히 잡는다(최소 44px). */
  .plan-pick-bar .btn { flex: 1 1 auto; min-height: 44px; }
}

/* ---- 이번 달 청구 요금 ----
   왼쪽 칸은 "얼마인가" — 달 표시, 큰 금액, 그리고 이름과 금액을 점선으로 이은 항목별 내역.
   오른쪽 칸은 "무엇으로 이뤄졌나(요금 구성)"와 "얼마나 쓰고 있나(제공량)".
   숫자는 자릿수가 흔들리지 않도록 모두 tabular-nums 로 맞춘다. */
.bill-wrap { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 12px; }
.bill-panel {
  min-width: 0; padding: 16px; border: 1px solid var(--mw-line); border-radius: 14px;
  background: var(--mw-surface);
  animation: plan-rise .42s cubic-bezier(.22, .8, .3, 1) backwards;
}
.bill-panel + .bill-panel { animation-delay: 90ms; }
.bill-head { display: flex; align-items: center; gap: 11px; }
.bill-month {
  flex: 0 0 auto; width: 54px; padding: 7px 0; border-radius: 12px; text-align: center;
  background: var(--mw-accent-soft); color: var(--mw-accent-ink);
  font-variant-numeric: tabular-nums;
}
.bill-month .y { display: block; font-size: 10px; font-weight: 700; opacity: .85; }
.bill-month .m { display: block; font-size: 15px; font-weight: 800; line-height: 1.25; }
.bill-head-text { min-width: 0; }
.bill-title { font-size: 11.5px; font-weight: 700; color: var(--mw-muted); }
.bill-plan {
  margin-top: 3px; font-size: 14px; font-weight: 800; color: var(--mw-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.bill-amount {
  margin-top: 15px; font-size: 30px; font-weight: 800; letter-spacing: -1px; line-height: 1.1;
  color: var(--mw-ink); font-variant-numeric: tabular-nums;
}
.bill-amount .unit { font-size: 15px; font-weight: 700; letter-spacing: 0; margin-left: 2px; }
.bill-amount.negotiable { font-size: 21px; letter-spacing: -.3px; color: var(--mw-muted); }
.bill-vat { margin-top: 5px; font-size: 11.5px; color: var(--mw-muted); font-variant-numeric: tabular-nums; }
.bill-rows { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--mw-line); display: grid; gap: 9px; }
.bill-row { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; color: var(--mw-ink-soft); }
.bill-row .lbl { flex: 0 1 auto; min-width: 0; }
.bill-row .note { font-size: 11px; color: var(--mw-muted); }
/* 이름과 금액을 잇는 점선 — 글자 밑선이 아니라 그 사이를 채우는 칸이라 따로 둔다. */
.bill-row .lead { flex: 1 1 12px; min-width: 12px; border-bottom: 1px dotted var(--mw-line-strong); transform: translateY(-4px); }
.bill-row .val { flex: 0 0 auto; font-weight: 700; color: var(--mw-ink); font-variant-numeric: tabular-nums; }
.bill-row.minus .val { color: var(--mw-good-ink); }
.bill-row.total { margin-top: 1px; padding-top: 10px; border-top: 1px solid var(--mw-line); font-size: 13px; color: var(--mw-ink); }
.bill-row.total .lbl { font-weight: 800; }
.bill-row.total .val { font-size: 15px; font-weight: 800; }

.bill-sub { font-size: 11.5px; font-weight: 800; color: var(--mw-ink); margin-bottom: 11px; }
.bill-bar { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--mw-neutral-soft); }
.bill-bar i { display: block; height: 100%; transform-origin: left; animation: bill-grow .55s cubic-bezier(.22, .8, .3, 1) .15s backwards; }
.bill-bar.empty { opacity: .5; }
@keyframes bill-grow { from { transform: scaleX(0); } }
.bill-bar i.c1, .bill-leg .dot.c1 { background: var(--mw-accent); }
.bill-bar i.c2, .bill-leg .dot.c2 { background: var(--mw-good); }
.bill-bar i.c3, .bill-leg .dot.c3 { background: var(--mw-warn); }
.bill-legend { margin-top: 12px; display: grid; gap: 8px; }
.bill-leg { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--mw-ink-soft); }
.bill-leg .dot { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.bill-leg .val { margin-left: auto; font-weight: 700; color: var(--mw-ink); font-variant-numeric: tabular-nums; }
.bill-leg.zero { color: var(--mw-muted); }
.bill-leg.zero .dot { opacity: .3; }
.bill-leg.zero .val { color: var(--mw-muted); font-weight: 400; }

.bill-use { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--mw-line); }
.bill-use-item + .bill-use-item { margin-top: 12px; }
.bill-use-item .t { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; font-size: 12px; color: var(--mw-ink-soft); margin-bottom: 6px; }
.bill-use-item .t .note { font-size: 10.5px; color: var(--mw-muted); }
.bill-use-item .t b { flex: 0 0 auto; color: var(--mw-ink); font-variant-numeric: tabular-nums; }
.bill-track { height: 7px; border-radius: 999px; background: var(--mw-neutral-soft); overflow: hidden; }
.bill-track i { display: block; height: 100%; border-radius: 999px; background: var(--mw-accent); transform-origin: left; animation: bill-grow .55s cubic-bezier(.22, .8, .3, 1) .2s backwards; }
.bill-track i.warn { background: var(--mw-warn); }
.bill-track i.over { background: var(--mw-bad); }

/* ---- 월별 청구 내역 ----
   위는 달별 요금을 견주는 막대, 아래는 한 줄씩 적은 목록. 아직 확정되지 않은 이번 달은
   빗금과 '진행 중' 딱지로 지난 달과 구분한다. */
/* 격자 칸은 기본값(min-width:auto)이면 속의 넓은 그래프에 밀려 화면 밖으로 커진다 — 0으로 눌러야
   아래 .inv-chart-scroll의 가로 스크롤이 실제로 동작한다. */
.inv-wrap { display: grid; gap: 12px; }
.inv-wrap > * { min-width: 0; }
.inv-empty {
  padding: 16px; border: 1px dashed var(--mw-line-strong); border-radius: 12px;
  font-size: 12.5px; color: var(--mw-muted); text-align: center;
}
.inv-chart-card { padding: 16px; border: 1px solid var(--mw-line); border-radius: 14px; background: var(--mw-surface); }
.inv-unit { font-weight: 400; color: var(--mw-muted); }
/* 자리가 있으면 달들이 고르게 나눠 갖고, 12달이 폰 화면에 들어가지 않으면 한 칸을 40px 아래로
   찌그러뜨리는 대신 그래프만 옆으로 밀어 본다(글자가 겹치거나 줄바꿈되는 것보다 낫다). */
.inv-chart-scroll { overflow-x: auto; overflow-y: hidden; }
.inv-chart { display: flex; align-items: flex-end; gap: 6px; height: 132px; min-width: 100%; }
/* 달이 하나뿐일 때 막대 하나가 그래프 폭을 다 차지하지 않도록 위쪽을 막아둔다. */
.inv-col { flex: 1 0 40px; min-width: 0; max-width: 96px; display: flex; flex-direction: column; height: 100%; }
.inv-val { font-size: 10.5px; font-weight: 700; color: var(--mw-muted); text-align: center; font-variant-numeric: tabular-nums; }
.inv-bar-slot { flex: 1 1 auto; display: flex; align-items: flex-end; margin: 4px 0 6px; }
.inv-bar-slot i {
  display: block; width: 100%; border-radius: 5px 5px 2px 2px; background: var(--mw-accent);
  transform-origin: bottom; animation: inv-grow .5s cubic-bezier(.22, .8, .3, 1) backwards;
  animation-delay: calc(var(--i, 0) * 55ms);
}
@keyframes inv-grow { from { transform: scaleY(0); } }
/* 아직 확정 전인 달 — 빗금으로 "진행 중"임을 색만이 아니라 무늬로도 알린다. */
.inv-col.open .inv-bar-slot i {
  background: repeating-linear-gradient(135deg, var(--mw-accent) 0 6px, var(--mw-accent-ink) 6px 12px);
}
.inv-col.open .inv-val { color: var(--mw-accent-ink); }
/* 금액이 별도협의라 그릴 수 없는 달 — 자리만 남긴다. */
.inv-bar-slot i.none { height: 3px; background: var(--mw-line-strong); border-radius: 2px; animation: none; }
.inv-x { font-size: 10.5px; color: var(--mw-muted); text-align: center; font-variant-numeric: tabular-nums; }

.inv-list { display: grid; gap: 8px; }
.inv-row {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 11px 14px; border: 1px solid var(--mw-line); border-radius: 12px; background: var(--mw-surface);
}
.inv-period { flex: 0 0 auto; font-size: 12.5px; font-weight: 800; color: var(--mw-ink); font-variant-numeric: tabular-nums; }
.inv-mid { flex: 1 1 150px; min-width: 0; }
.inv-plan { font-size: 12.5px; font-weight: 700; color: var(--mw-ink); display: flex; align-items: center; gap: 7px; }
.inv-state {
  font-size: 10px; font-weight: 800; padding: 2px 7px; border-radius: 999px;
  background: var(--mw-neutral-soft); color: var(--mw-muted);
}
.inv-state.open { background: var(--mw-accent-soft); color: var(--mw-accent-ink); }
.inv-parts { margin-top: 3px; font-size: 11px; color: var(--mw-muted); }
.inv-total { flex: 0 0 auto; margin-left: auto; font-size: 14px; font-weight: 800; color: var(--mw-ink); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .bill-panel, .bill-bar i, .bill-track i, .inv-bar-slot i { animation: none; }
}
/* 두 칸을 나란히 둘 자리가 없으면 위아래로 쌓는다. */
@media (max-width: 720px) {
  .bill-wrap { grid-template-columns: 1fr; }
  .bill-panel + .bill-panel { animation-delay: 0s; }
}

@media (max-width: 860px) {
  /* 제목 칸과 입력 칸을 나란히 둘 자리가 없다 — 제목을 위로 올리고 입력칸을 아래로 흘린다. */
  .acct-sec { grid-template-columns: 1fr; gap: 12px; }
}
@media (max-width: 560px) {
  .acct-card { border-radius: 14px; }
  .acct-hero, .acct-sec, .acct-card-head, .acct-foot { padding-left: 14px; padding-right: 14px; }
  .acct-fields { grid-template-columns: 1fr; }
  .acct-foot { justify-content: stretch; }
  .acct-foot .btn { flex: 1 1 auto; }
}