/*!
 * 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; }

/* ── 「충전 · 이메일 확인」 단계 안내 (2026-08-28 사장님 지시) ────────────────
   확인이 안 된 상태에서는 두 단계를 **둘 다** 보여 준다. 옛 화면은 이메일 확인만
   말해서, 확인을 마치고도 잔액이 0 이라 못 사는 사람이 생겼다. */
.aicr--steps {
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.aicr__head {
  margin: 0;
  font-weight: 800;
  font-size: 14.5px;
  color: var(--accent, #E8451A);
}

.aicr__step {
  display: flex;
  align-items: center;
  gap: 10px 14px;
  flex-wrap: wrap;
  padding: 11px 13px;
  border: 1px solid var(--line, #E4E2DD);
  border-radius: var(--r, 6px);
  background: var(--surface, #fff);
}
.aicr__step .aicr__msg { flex: 1 1 220px; }

/* 이미 끝난 단계 — 지워 버리면 「두 단계짜리 흐름」이라는 사실이 안 보인다. */
.aicr__step--done {
  border-style: dashed;
  background: transparent;
  color: var(--muted, #8E949C);
}
.aicr__ok-mark {
  color: var(--ok, #16794C);
  font-weight: 800;
}

/* 큰 버튼을 눌렀을 때 «여기를 누르시면 됩니다»를 눈으로 알린다.
   ⛔ 이게 없으면 새 탭도 안 열고 아무 표시도 없어 「반응 없음」이 된다. */
.aicr--flash { animation: aicrFlash 1.05s ease-out 2; }
@keyframes aicrFlash {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 69, 26, 0); }
  35%      { box-shadow: 0 0 0 5px rgba(232, 69, 26, .30); }
}
@media (prefers-reduced-motion: reduce) {
  .aicr--flash { animation: none; border-color: var(--accent, #E8451A); }
}

/* 어두운 화면에서도 읽히게 — 페이지가 토큰을 안 주는 경우의 최소 보정. */
@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); }
  .aicr__step { background: var(--surface, #232228); border-color: var(--line, #33313A); }
  .aicr__step--done { background: transparent; }
}