/*!
 * ai-credit-v1.css — 상품 주문 화면의 「충전금 잔액 바」.  (2026-08-21)
 *
 * ai-credit-v1.js 가 그리는 것만 담는다. 이미지·영상·주문제작 화면이 공용으로 쓴다.
 * ⛔ 화면별 CSS 에 각자 복사해 넣지 말 것 — 갈라지면 「어떤 화면만 안 보인다」가 된다.
 * 색은 페이지 토큰을 먼저 쓰고 없으면 자체 값으로 떨어진다(페이지마다 팔레트가 다르다).
 */
.aicr {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  margin: 14px 0 4px;
  padding: 13px 16px;
  border: 1px solid var(--line, #E4E2DD);
  border-radius: var(--r, 6px);
  background: var(--surface-2, #F7F6F3);
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink, #16181D);
}

.aicr__msg { flex: 1 1 220px; }
.aicr__msg b { font-weight: 800; }

.aicr__hint {
  flex: 1 1 100%;
  font-size: 13px;
  color: var(--muted, #8E949C);
}

.aicr__link {
  flex: 0 0 auto;
  font-weight: 700;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: var(--r, 6px);
  background: var(--accent, #E8451A);
  color: var(--on-accent, #fff);
  white-space: nowrap;
}
.aicr__link:hover { background: var(--accent-hover, #CE3B12); }
.aicr__link:focus-visible { outline: 2px solid var(--accent, #E8451A); outline-offset: 2px; }

/* 잔액이 넉넉할 때의 「충전」은 조용하게 — 지금 눌러야 하는 버튼이 아니다. */
.aicr__link--quiet {
  background: transparent;
  color: var(--muted, #8E949C);
  border: 1px solid var(--line, #E4E2DD);
  font-weight: 600;
}
.aicr__link--quiet:hover {
  background: transparent;
  color: var(--ink, #16181D);
  border-color: var(--line-strong, #C9C6BF);
}

/* 지금 뭔가 해야 하는 상태(확인·충전) */
.aicr--need {
  border-color: var(--accent, #E8451A);
  background: var(--accent-soft, #FDEDE8);
}

/* 그냥 사실을 알려 주는 상태 */
.aicr--ok { border-style: dashed; }

/* 어두운 화면에서도 읽히게 — 페이지가 토큰을 안 주는 경우의 최소 보정. */
@media (prefers-color-scheme: dark) {
  .aicr {
    background: var(--surface-2, #1C1B20);
    border-color: var(--line, #33313A);
    color: var(--ink, #ECEAE5);
  }
  .aicr--need { background: var(--accent-soft, #3A1A12); }
  .aicr__hint { color: var(--muted, #9B9AA3); }
}