/* 크레딧 페이지 공용 스타일 */
.cr { max-width: 720px; margin: 0 auto; }
.cr-loading { text-align: center; padding: 2rem; color: var(--md-default-fg-color--light); font-size: .875rem; }
.cr-noauth { text-align: center; padding: 2rem; }
.cr-noauth h2 { font-size: 1.1rem; margin-bottom: .5rem; }
.cr-login { display: inline-block; padding: .5rem 1.25rem; background: var(--md-primary-fg-color); color: #fff; border-radius: 6px; text-decoration: none; font-size: .875rem; margin-top: .5rem; }

.cr-bal { text-align: center; padding: .75rem 0 .5rem; font-size: .875rem; color: var(--md-default-fg-color--light); }
.cr-bal strong { font-size: 1.4rem; color: var(--md-default-fg-color); }
.cr-bal-label { font-size: .75rem; color: var(--md-default-fg-color--light); }
.cr-bal-sep { color: var(--md-default-fg-color--lighter); margin: 0 .15rem; }

.cr-sec { margin-top: .75rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 8px; padding: .75rem 1rem; }
.cr-sec-title { font-size: .8rem; font-weight: 600; color: var(--md-default-fg-color--light); text-transform: uppercase; margin-bottom: .5rem; }
.cr-sec-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .5rem; }
.cr-sec-head .cr-sec-title { margin-bottom: 0; white-space: nowrap; }
.cr-sec-head .cr-buy-form { flex: 0 1 auto; margin-bottom: 0; }
.cr-sec-head .cr-buy-input-wrap { width: 7rem; }

.cr-tbl { width: 100%; border-collapse: collapse; font-size: .8rem; }
.cr-tbl th { text-align: left; font-size: .7rem; color: var(--md-default-fg-color--light); text-transform: uppercase; padding: .3rem .4rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.cr-tbl td { padding: .35rem .4rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); vertical-align: top; }
.cr-tbl tr:last-child td { border-bottom: none; }
.cr-invoice-btn { padding: .2rem .5rem; border: 1px solid var(--md-primary-fg-color); border-radius: 4px; background: transparent; color: var(--md-primary-fg-color); font-size: .7rem; cursor: pointer; transition: background .15s, color .15s; white-space: nowrap; }
.cr-invoice-btn:hover { background: var(--md-primary-fg-color); color: #fff; }
.cr-scroll { max-height: 400px; overflow-y: auto; }
.cr-empty { text-align: center; padding: 1rem; color: var(--md-default-fg-color--light); font-size: .8rem; }

.cr-amt { font-weight: 600; }
.cr-amt.pos { color: #4caf50; }
.cr-amt.neg { color: #f44336; }

.cr-sel { display: flex; align-items: center; gap: .5rem; margin-bottom: .4rem; }
.cr-sel select { padding: .25rem .5rem; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 4px; font-size: .8rem; background: var(--md-default-bg-color); color: var(--md-default-fg-color); outline: none; }
.cr-sel select:focus { border-color: var(--md-primary-fg-color); }
.cr-sel label { font-size: .75rem; color: var(--md-default-fg-color--light); }

.cr-usage-row { display: flex; justify-content: space-between; padding: .35rem 0; border-bottom: 1px solid var(--md-default-fg-color--lightest); font-size: .8rem; }
.cr-usage-row:last-child { border-bottom: none; }

/* 크레딧 충전 폼 */
.cr-buy-form { display: flex; align-items: center; gap: .5rem; }
.cr-buy-input-wrap { display: flex; align-items: center; flex: 1; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 6px; padding: 0 .5rem; transition: border-color .2s; }
.cr-buy-input-wrap:focus-within { border-color: var(--md-primary-fg-color); }
.cr-buy-currency { font-size: 1rem; font-weight: 600; color: var(--md-default-fg-color--light); }
.cr-buy-input { border: none; outline: none; font-size: 1rem; padding: .5rem .3rem; width: 100%; background: transparent; color: var(--md-default-fg-color); -moz-appearance: textfield; }
.cr-buy-input::-webkit-outer-spin-button, .cr-buy-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.cr-buy-submit { padding: .5rem 1.25rem; border: none; border-radius: 6px; background: var(--md-primary-fg-color); color: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; transition: opacity .2s; white-space: nowrap; }
.cr-buy-submit:hover:not(:disabled) { opacity: .85; }
.cr-buy-submit:disabled { opacity: .5; cursor: not-allowed; }
.cr-buy-note { text-align: center; margin-top: .6rem; font-size: .7rem; color: var(--md-default-fg-color--light); line-height: 1.5; }
.cr-gift-open-btn { padding: .5rem 1.25rem; border: none; border-radius: 6px; background: var(--md-primary-fg-color); color: #fff; font-size: .85rem; font-weight: 600; cursor: pointer; transition: opacity .2s; }
.cr-gift-open-btn:hover { opacity: .85; }
.cr-gift-email { width: 100%; border: 1px solid var(--md-default-fg-color--lightest); border-radius: 6px; padding: .5rem .6rem; font-size: 1rem; outline: none; background: transparent; color: var(--md-default-fg-color); transition: border-color .2s; }
.cr-gift-email:focus { border-color: var(--md-primary-fg-color); }
.cr-modal { position: fixed; inset: 0; z-index: 1000; align-items: center; justify-content: center; }
.cr-modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); }
.cr-modal-box { position: relative; background: var(--md-default-bg-color); border-radius: 10px; width: min(92vw, 420px); max-height: 90vh; overflow-y: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
.cr-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.25rem; border-bottom: 1px solid var(--md-default-fg-color--lightest); }
.cr-modal-title { font-size: 1rem; font-weight: 700; }
.cr-modal-close { background: none; border: none; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--md-default-fg-color--light); padding: 0 .25rem; }
.cr-modal-close:hover { color: var(--md-default-fg-color); }
.cr-modal-body { padding: 1.25rem; }
.cr-modal-label { display: block; font-size: .75rem; font-weight: 600; color: var(--md-default-fg-color--light); margin: 0 0 .35rem; }
.cr-modal-body .cr-gift-email { margin-bottom: 1rem; }
.cr-modal-body .cr-buy-input-wrap { margin-bottom: .5rem; }
.cr-modal-submit { width: 100%; margin-top: 1rem; }
.cr-msg { padding: .4rem .6rem; border-radius: 5px; font-size: .75rem; margin-top: .5rem; text-align: center; }
.cr-msg.ok { background: #e8f5e9; color: #2e7d32; }
.cr-msg.err { background: #fbe9e7; color: #c62828; }