/* 잔액 아키타입 (모바일 재구성) — SC-M35 · SC-M15 · SC-D16 …
 *
 * 캔버스: "D1/D2 공용 — 고객에게 명세를 보여주는 화면이기도 하다 (C-16)."
 * 그래서 이 화면은 매니저의 관리 화면인 동시에 **고객에게 돌려 보여주는 화면**이다.
 * 표를 접지 않고 보유마다 잔액을 크게 세운다 — 돌려 보여줬을 때 읽히는 크기여야 한다.
 *
 * 잔액은 틀리는 순간 현장 클레임이 된다(15번 C 정책). 숫자를 작게 쓰지 않는다.
 * 클래스는 .bal / .log / .calc / .soon 으로 (.blk .grid .open .card 는 이미 쓰인다).
 */

.m--balance .head { background: #fff; }
.m--balance .hd-row { display: flex; align-items: center; justify-content: space-between;
                      padding: .55rem .9rem .5rem; }
.m--balance .ttl { font-size: 1.05rem; font-weight: 700; letter-spacing: -.03em; }
.m--balance .ttl em { font-style: normal; font-size: .75rem; font-weight: 500; color: var(--ink-3); }
.m--balance .mini { min-height: 30px; display: inline-flex; align-items: center; gap: .3rem; padding: 0 .6rem;
                    border: 1px solid var(--grid); font-size: .72rem; color: var(--ink-2);
                    text-decoration: none; }

.m--balance .plan { background: var(--sheet); }
.m--balance section { padding: 0 0 .3rem; }
.m--balance h2 { display: flex; align-items: baseline; gap: .35rem; margin: 1rem .9rem .4rem;
                 font-size: .7rem; font-weight: 700; letter-spacing: .08em; color: var(--ink-3); }
.m--balance h2 i { font-style: normal; font-weight: 500; letter-spacing: 0; }

.m--balance .soon { display: block; margin: .7rem .9rem 0; padding: .6rem .75rem; background: #fdfaf2;
                    border-left: 3px solid var(--wait-pay); text-decoration: none; color: inherit; }
.m--balance .soon .hd { display: block; font-size: .88rem; font-weight: 700; color: #8a5a06;
                        letter-spacing: -.02em; }
.m--balance .soon .s { display: block; font-size: .72rem; color: var(--ink-2); line-height: 1.55;
                       margin-top: .2rem; }
.m--balance .soon .s b { color: var(--ink); font-weight: 700; }

/* 보유 — 잔액이 주인공이다 */
.m--balance .bal { margin: 0 .9rem .5rem; padding: .65rem .8rem .6rem; background: #fff;
                   border: 1px solid var(--grid); }
.m--balance .nm { display: flex; align-items: baseline; gap: .35rem; font-size: .86rem;
                  font-weight: 700; letter-spacing: -.02em; }
.m--balance .nm i { font-style: normal; font-size: .64rem; font-weight: 500; color: var(--ink-3);
                    border: 1px solid var(--grid); padding: .02rem .28rem; }
.m--balance .amt { display: block; font-size: 2rem; font-weight: 800; letter-spacing: -.05em;
                   line-height: 1.15; margin: .15rem 0 .05rem; color: var(--live); }
.m--balance .amt em { font-style: normal; font-size: .95rem; font-weight: 700; margin-left: .1rem; }
.m--balance .bal .sub { display: block; font-size: .7rem; color: var(--ink-3); }
.m--balance .bal .sub.warn { color: var(--wait-pay); font-weight: 600; }
.m--balance .bal .meta { display: flex; justify-content: space-between; gap: .5rem; margin-top: .4rem;
                         padding-top: .4rem; border-top: 1px solid var(--grid-2);
                         font-size: .7rem; color: var(--ink-2); }
.m--balance .bal .meta b { font-weight: 700; color: var(--ink); }
.m--balance .scope { color: var(--ink-3); }

.m--balance .fine { margin: 0 .9rem; font-size: .68rem; color: var(--ink-3); line-height: 1.55; }
.m--balance .fine b { color: var(--ink-2); font-weight: 600; }

/* 사용 명세 — 모바일은 최근 셋만 */
.m--balance .log { display: grid; grid-template-columns: 3rem minmax(0,1fr) auto auto;
                   align-items: baseline; gap: .1rem .6rem; padding: .5rem .9rem; background: #fff;
                   border-bottom: 1px solid var(--grid-2); font-size: .76rem; }
.m--balance .log .dt { font-size: .7rem; color: var(--ink-3); }
.m--balance .log .what { color: var(--ink-2); }
.m--balance .log .d { font-weight: 700; color: var(--alert); letter-spacing: -.02em; }
.m--balance .log .d.up { color: var(--live); }
.m--balance .log .left { font-size: .7rem; color: var(--ink-3); min-width: 3rem; text-align: right; }

/* 환불 계산 — 분쟁을 줄이려 노출한다 */
.m--balance .calc { margin: 0 .9rem; padding: .6rem .8rem; background: #fff;
                    border: 1px solid var(--grid); }
.m--balance .calc .line { display: block; font-size: .95rem; font-weight: 700; letter-spacing: -.03em;
                          padding: .15rem 0; }
.m--balance .calc .line em { font-style: normal; font-size: .68rem; font-weight: 400;
                             color: var(--ink-3); margin-left: .4rem; }
.m--balance .calc .line.res { border-top: 1px solid var(--grid); margin-top: .25rem;
                              padding-top: .35rem; color: var(--live); font-size: 1.15rem; }
.m--balance .calc .note { display: block; font-size: .68rem; color: var(--ink-3); line-height: 1.55;
                          margin-top: .4rem; }
.m--balance .calc .note b { color: var(--ink-2); font-weight: 600; }

.m--balance .fbar { position: sticky; bottom: 0; display: flex; align-items: center; gap: .4rem;
                    padding: .5rem .9rem; background: #fff; border-top: 1px solid var(--grid); }
.m--balance .sub-act { min-height: 40px; display: inline-flex; align-items: center; padding: 0 .6rem;
                       border: 1px solid var(--grid); font-size: .74rem; color: var(--ink-2);
                       text-decoration: none; }
.m--balance .use { flex: 1; min-height: 44px; border: 0; background: var(--live); color: #fff;
                   font: inherit; font-size: .86rem; font-weight: 700; cursor: pointer; }
.m--balance .kx { opacity: .72; }