/*!
 * 내 충전금 (/ai-service/credit) — 2026-08-21
 * ⛔ 토큰은 layouts/cmshom-page 의 White Editorial 변수를 그대로 쓴다(자체 팔레트 금지).
 *    없을 때를 대비한 폴백만 둔다.
 */

.aiw{
  --aiw-plus:#1F6F5C;
  --aiw-minus:#B4541E;
  padding:56px 0 96px;
  background:var(--canvas, #fff);
  color:var(--body, #5B6169);
}
.aiw-shell{max-width:980px;margin:0 auto;padding:0 20px}
.aiw-shell--narrow{max-width:560px}

.aiw h1{
  font-size:clamp(26px,4.5vw,36px); font-weight:700; letter-spacing:-.02em;
  color:var(--ink, #16181D); margin:6px 0 0; line-height:1.25; text-wrap:balance;
}
.aiw h2{font-size:17px;font-weight:700;color:var(--ink, #16181D);margin:0 0 14px;letter-spacing:-.01em}
.aiw p{margin:0 0 10px}
.aiw p:last-child{margin-bottom:0}

.aiw-eyebrow{
  font-size:11px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--accent, #E8451A);margin:0;
}
.aiw-lede{font-size:15px;line-height:1.8;margin-top:14px;max-width:60ch}
.aiw-who{font-size:14px;color:var(--muted, #8E949C);margin-top:6px;word-break:break-all}
.aiw-sub{font-size:13px;color:var(--muted, #8E949C);line-height:1.7}
.aiw-hint{font-size:13px;color:var(--muted, #8E949C);margin-top:8px}

.aiw-head{margin-bottom:28px}
.aiw-head--row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.aiw-leave{margin:0}

.aiw-card{
  background:var(--surface, #fff);
  border:1px solid var(--line, #E4E2DD);
  border-radius:var(--r-lg, 8px);
  padding:24px;
  margin-bottom:18px;
}

/* ── 잔액 ─────────────────────────────────────────── */
.aiw-balance{
  background:var(--surface-alt, #F6F5F2);
  border:1px solid var(--line, #E4E2DD);
  border-radius:var(--r-lg, 8px);
  padding:28px 26px;
  margin-bottom:18px;
  display:flex;flex-wrap:wrap;gap:26px;align-items:flex-start;
}
.aiw-balance__main{flex:1 1 240px}
.aiw-balance__sub{flex:1 1 240px;padding-left:24px;border-left:1px solid var(--line, #E4E2DD)}
.aiw-balance__label{display:block;font-size:13px;color:var(--muted, #8E949C);margin-bottom:6px}
.aiw-balance__num{
  display:block;font-size:clamp(30px,6vw,42px);font-weight:700;color:var(--ink, #16181D);
  letter-spacing:-.02em;font-variant-numeric:tabular-nums;line-height:1.15;
}
.aiw-balance__sub strong{
  display:block;font-size:22px;font-weight:700;color:var(--ink, #16181D);
  font-variant-numeric:tabular-nums;margin-bottom:6px;
}
.aiw-balance i{font-style:normal;font-size:.5em;font-weight:600;margin-left:4px;color:var(--muted, #8E949C)}
.aiw-balance__sub strong i{font-size:.62em}

@media(max-width:640px){
  .aiw-balance__sub{padding-left:0;border-left:0;border-top:1px solid var(--line, #E4E2DD);padding-top:18px}
}

/* ── 폼·충전 ──────────────────────────────────────── */
.aiw-label{display:block;font-size:13px;font-weight:600;color:var(--ink, #16181D);margin-bottom:7px}
.aiw-input{
  width:100%;padding:13px 14px;font-size:15px;font-family:inherit;
  color:var(--ink, #16181D);background:var(--surface, #fff);
  border:1px solid var(--line-strong, #C9C6BF);border-radius:var(--r, 4px);
  font-variant-numeric:tabular-nums;
}
.aiw-input:focus{outline:2px solid var(--accent, #E8451A);outline-offset:1px;border-color:transparent}

.aiw-amount{margin-top:16px}
.aiw-amount__row{display:flex;align-items:center;gap:9px}
.aiw-amount__row .aiw-input{max-width:220px}
.aiw-won{font-size:14px;color:var(--muted, #8E949C)}

.aiw-quick{display:flex;flex-wrap:wrap;gap:8px}
.aiw-chip{
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  padding:8px 14px;border-radius:999px;
  background:var(--surface-alt, #F6F5F2);color:var(--body, #5B6169);
  border:1px solid var(--line, #E4E2DD);
  font-variant-numeric:tabular-nums;
}
.aiw-chip:hover{border-color:var(--accent, #E8451A);color:var(--accent, #E8451A)}
.aiw-chip:focus-visible{outline:2px solid var(--accent, #E8451A);outline-offset:2px}

.aiw-btn{
  font:inherit;font-weight:700;cursor:pointer;border-radius:var(--r, 4px);
  padding:14px 22px;border:1px solid transparent;min-height:50px;
}
.aiw-btn--primary{
  background:var(--accent, #E8451A);color:var(--on-accent, #fff);width:100%;margin-top:18px;
}
.aiw-btn--primary:hover{background:var(--accent-hover, #CE3B12)}
.aiw-btn--primary:disabled{opacity:.55;cursor:progress}
.aiw-btn--ghost{
  background:transparent;color:var(--muted, #8E949C);
  border-color:var(--line, #E4E2DD);padding:9px 14px;min-height:0;font-size:13px;font-weight:600;
}
.aiw-btn--ghost:hover{color:var(--ink, #16181D);border-color:var(--line-strong, #C9C6BF)}
.aiw-btn--sm{width:auto;margin:0;padding:10px 16px;min-height:0;font-size:14px}
.aiw-btn:focus-visible{outline:2px solid var(--accent, #E8451A);outline-offset:2px}

/* 주문 도중 충전하러 온 고객의 «돌아갈 길» — 없으면 그 자리에서 이탈한다. */
.aiw-back{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  font-size:14px;padding:14px 18px;margin-bottom:18px;
  background:var(--accent-soft, #FDEDE8);border:1px solid var(--accent, #E8451A);
  border-radius:var(--r-lg, 8px);color:var(--ink, #16181D);font-weight:600;
}

.aiw-error{font-size:13px;color:var(--aiw-minus);margin-top:10px;font-weight:600}
.aiw-flash{
  font-size:14px;padding:12px 16px;border-radius:var(--r, 4px);
  background:var(--accent-soft, #FDEDE8);color:var(--ink, #16181D);
  border:1px solid var(--line, #E4E2DD);margin-bottom:18px;
}
.aiw-sent{
  background:var(--accent-soft, #FDEDE8);border:1px solid var(--accent, #E8451A);
  border-radius:var(--r-lg, 8px);padding:22px 24px;margin-bottom:18px;
}
.aiw-sent h2{margin-bottom:8px}
.aiw-empty{font-size:14px;color:var(--muted, #8E949C);padding:22px 0;text-align:center}

/* ── 내역표 ───────────────────────────────────────── */
.aiw-tbl-scroll{overflow-x:auto;border:1px solid var(--line, #E4E2DD);border-radius:var(--r, 4px)}
.aiw-tbl{border-collapse:collapse;width:100%;min-width:600px;font-size:14px}
.aiw-tbl th,.aiw-tbl td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--line, #E4E2DD);vertical-align:top}
.aiw-tbl thead th{
  font-size:12px;font-weight:700;color:var(--muted, #8E949C);
  background:var(--surface-alt, #F6F5F2);white-space:nowrap;
}
.aiw-tbl tbody tr:last-child td{border-bottom:0}
.aiw-tbl .ta-r{text-align:right}
.aiw-date{color:var(--muted, #8E949C);white-space:nowrap;font-variant-numeric:tabular-nums}
.aiw-amt,.aiw-after{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:600}
.aiw-amt.is-plus{color:var(--aiw-plus)}
.aiw-amt.is-minus{color:var(--aiw-minus)}
.aiw-after{color:var(--muted, #8E949C);font-weight:500}
.aiw-note{display:block;font-size:12.5px;color:var(--muted, #8E949C);margin-top:2px}

.aiw-kind{
  display:inline-block;font-size:12px;font-weight:700;white-space:nowrap;
  padding:3px 8px;border-radius:999px;
  background:var(--surface-alt, #F6F5F2);color:var(--body, #5B6169);
  border:1px solid var(--line, #E4E2DD);
}
.aiw-kind--topup,.aiw-kind--refund,.aiw-kind--restore,.aiw-kind--release{
  color:var(--aiw-plus);border-color:var(--aiw-plus);
}
.aiw-kind--charge,.aiw-kind--debit{color:var(--aiw-minus);border-color:var(--aiw-minus)}

/* ── 좁은 화면: 표를 «카드»로 접는다 ───────────────────────────────
   🔴 가로 스크롤로 두면 정작 고객이 보려는 **금액·잔액이 화면 밖**에 있다
      (이 표는 「얼마 빠졌나」를 확인하러 오는 화면이다).
   ⛔ 열을 지우지 않는다 — 자리만 바꿔 전부 보이게 한다. */
@media (max-width:620px){
  .aiw-tbl-scroll{overflow-x:visible}
  .aiw-tbl{min-width:0;display:block;font-size:14px}
  .aiw-tbl thead{display:none}
  .aiw-tbl tbody{display:block}

  .aiw-tbl tr{
    display:grid;grid-template-columns:1fr auto;gap:3px 12px;
    padding:13px 14px;border-bottom:1px solid var(--line, #E4E2DD);
  }
  .aiw-tbl tbody tr:last-child{border-bottom:0}
  .aiw-tbl td{display:block;padding:0;border:0}

  /* 1줄 — 구분 배지 · 금액(가장 크게) */
  .aiw-tbl td:nth-child(2){grid-area:1 / 1}
  .aiw-tbl td:nth-child(4){grid-area:1 / 2;text-align:right;font-size:15.5px}

  /* 2줄 — 서비스 · 남은 잔액 */
  .aiw-tbl td:nth-child(3){grid-area:2 / 1;font-size:13.5px}
  .aiw-tbl td:nth-child(5){grid-area:2 / 2;text-align:right;font-size:12.5px}
  .aiw-tbl td:nth-child(5)::before{content:'잔액 '}

  /* 3줄 — 날짜 */
  .aiw-tbl td:nth-child(1){grid-area:3 / 1 / auto / -1;font-size:12px}

  /* 헤더가 없으므로 단위를 숫자에 붙여 준다 */
  .aiw-tbl td:nth-child(4)::after,
  .aiw-tbl td:nth-child(5)::after{content:'원';font-size:.82em;margin-left:1px}

  .aiw-note{margin-top:1px}
}

/* ── 약관 ─────────────────────────────────────────── */
.aiw-terms ul{margin:0 0 12px;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.aiw-terms li{font-size:13.5px;line-height:1.7}

@media (prefers-reduced-motion: reduce){
  .aiw *{transition:none !important;animation:none !important}
}