/* AI 사용량 — 모든 규칙을 .us 안으로 한정(다른 화면의 .k · .al 등을 건드리지 않게) · 색은 변수만 */
.us{max-width:1320px;display:flex;flex-direction:column;gap:18px;padding-bottom:40px}
.us .ph{margin-bottom:4px}
.us .grow{flex:1}
.us .bad-t{color:var(--bad);font-weight:700}
.us .us-mu{color:var(--muted);font-size:13.5px;margin:6px 0}
.us .panel-x>h3 small,.us .us-sh h3 small{font-size:13px;color:var(--muted);font-weight:600;margin-left:6px}

/* 기간·통화 선택 */
.us .us-seg{display:inline-flex;background:var(--panel);border:1px solid var(--line-2);border-radius:11px;padding:3px;gap:2px}
.us .us-seg button{border:0;background:none;padding:7px 14px;border-radius:8px;font:650 13.5px var(--sans);color:var(--text-2);cursor:pointer;min-height:32px}
.us .us-seg button:hover{color:var(--text)}
.us .us-seg button.on{background:var(--brand);color:var(--brand-ink,#fff)}
.us .us-live{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:650;color:var(--ok)}
.us .us-live.off{color:var(--muted)}

/* 머리 숫자 */
.us .us-hero{display:grid;grid-template-columns:1.4fr 1.2fr 1fr;gap:var(--ui-gap,18px)}
.us .us-big{background:var(--panel);border:1px solid var(--line);border-radius:var(--ui-radius,16px);padding:20px 22px;display:flex;flex-direction:column;gap:6px;min-width:0}
.us .us-big.ok{border-color:color-mix(in srgb,var(--ok) 45%,var(--line));background:linear-gradient(135deg,color-mix(in srgb,var(--ok) 10%,var(--panel)),var(--panel) 70%)}
.us .us-big.warn{border-color:color-mix(in srgb,var(--warn) 45%,var(--line))}
.us .k-l{font-size:14px;font-weight:650;color:var(--text-2);display:flex;align-items:center;gap:6px}
.us .us-big-v{font-size:40px;font-weight:800;letter-spacing:-.03em;line-height:1.1;color:var(--text);font-variant-numeric:tabular-nums}
.us .us-big-v small{font-size:17px;font-weight:650;color:var(--text-2);margin-left:4px}
.us .us-big.ok .us-big-v{color:var(--ok)}
.us .k-s{font-size:13.5px;color:var(--text-2);display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.us .us-zero{display:inline-flex;align-self:flex-start;align-items:center;gap:6px;padding:5px 12px;border-radius:999px;font-size:14px;font-weight:650;
  color:var(--ok);background:color-mix(in srgb,var(--ok) 14%,transparent);border:1px solid color-mix(in srgb,var(--ok) 40%,transparent)}
.us .us-zero b{font-size:15px}

/* 용도 막대 */
.us .us-pbars{display:flex;flex-direction:column;gap:12px}
.us .us-pb{display:grid;grid-template-columns:96px minmax(0,1fr) 64px 40px;align-items:center;gap:10px;font-size:14px}
.us .us-pb-l{display:flex;align-items:center;gap:8px;color:var(--text);font-weight:600}
.us .us-pb-l i,.us .us-leg i,.us .us-lg i{width:10px;height:10px;border-radius:3px;flex:none;display:inline-block}
.us .us-pb-t{height:12px;border-radius:99px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}
.us .us-pb-t i{display:block;height:100%;border-radius:99px;transition:width .5s ease}
.us .us-pb b{text-align:right;font-variant-numeric:tabular-nums}
.us .us-pb small{text-align:right;color:var(--muted);font-size:12.5px}

/* 날마다 처리한 일 */
.us .us-lg{display:flex;gap:16px;font-size:13px;color:var(--text-2);margin:-4px 0 8px;flex-wrap:wrap}
.us .us-lg span{display:inline-flex;align-items:center;gap:6px}
.us .us-lg i.sub{background:var(--ok)} .us .us-lg i.api{background:var(--warn)}
.us .us-ch{width:100%;display:block;overflow:visible}
.us .us-ch .b-sub{fill:var(--ok)} .us .us-ch .b-api{fill:var(--warn)}
.us .us-ch g:hover rect.b-sub,.us .us-ch g:hover rect.b-api{opacity:.75}
.us .us-ch .ax{font:500 12px var(--sans);fill:var(--muted)}
.us .us-ch .ax-l{stroke:var(--line-2)}

/* AI별 카드 */
.us .us-ais{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.us .us-ai{background:var(--panel);border:1px solid var(--line);border-radius:var(--ui-radius,16px);padding:16px 18px;display:flex;flex-direction:column;gap:10px;min-width:0;transition:border-color .3s,box-shadow .3s}
.us .us-ai.flash{border-color:var(--brand);box-shadow:0 0 0 4px color-mix(in srgb,var(--brand) 22%,transparent)}
.us .us-ai-h,.us .us-w-h{display:flex;align-items:center;gap:10px;min-width:0}
.us .us-ai-n{display:flex;flex-direction:column;line-height:1.35;min-width:0}
.us .us-ai-n b{font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us .us-ai-n small{font-size:12.5px;color:var(--muted)}
.us .us-kind{flex:none;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--text-2);white-space:nowrap}
.us .us-kind.sub{color:var(--ok);border-color:color-mix(in srgb,var(--ok) 45%,transparent);background:color-mix(in srgb,var(--ok) 10%,transparent)}
.us .us-kind.api,.us .us-kind.warn{color:var(--warn);border-color:color-mix(in srgb,var(--warn) 45%,transparent);background:color-mix(in srgb,var(--warn) 10%,transparent)}
.us .us-kind.credit{color:var(--info);border-color:color-mix(in srgb,var(--info) 45%,transparent);background:color-mix(in srgb,var(--info) 10%,transparent)}
.us .us-kind.bad{color:var(--bad);border-color:color-mix(in srgb,var(--bad) 45%,transparent);background:color-mix(in srgb,var(--bad) 10%,transparent)}
.us .us-ai-c{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.us .us-ai-c b{font-size:30px;font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.us .us-ai-c span{font-size:13.5px;color:var(--text-2)}
.us .us-ai-c em{font-style:normal;font-size:13px;margin-left:auto}
.us .us-ai-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}
.us .us-ai-bar i{display:block;height:100%;border-radius:99px;background:var(--ok);transition:width .5s ease}
.us .us-ai-bar i.api{background:var(--warn)} .us .us-ai-bar i.credit{background:var(--info)}
.us .us-stack{display:flex;height:8px;border-radius:99px;overflow:hidden;gap:2px}
.us .us-stack i{display:block;height:100%;min-width:3px}
.us .us-leg{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--text-2)}
.us .us-leg span{display:inline-flex;align-items:center;gap:5px}
.us .us-ai-f{display:flex;gap:8px;font-size:13px;color:var(--text-2);padding-top:8px;border-top:1px solid var(--line)}
.us .us-ai-last{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text-2);padding:7px 10px;border-radius:10px;background:var(--panel-2);border:1px solid var(--line);min-width:0}
.us .us-ai-last span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.us .us-ai-last i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.us .us-ai-last.bad i{background:var(--bad)} .us .us-ai-last.bad{color:var(--bad)}

/* 왜 있나요 */
.us .us-why .grid-x b{display:block;font-size:15px;margin-bottom:4px;color:var(--text)}
.us .us-why .grid-x p{margin:0;font-size:14px;color:var(--text-2);line-height:1.65}

/* 고급: API 키 비용 관리 */
.us .us-adv{padding:0}
.us .us-adv>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:14px;padding:18px 20px;flex-wrap:wrap}
.us .us-adv>summary::-webkit-details-marker{display:none}
.us .us-adv>summary::before{content:"";width:9px;height:9px;border-right:2px solid var(--text-2);border-bottom:2px solid var(--text-2);transform:rotate(-45deg);transition:transform .2s;flex:none}
.us .us-adv[open]>summary::before{transform:rotate(45deg)}
.us .us-adv>summary>span:first-of-type{display:flex;flex-direction:column;gap:2px;min-width:0}
.us .us-adv>summary b{font-size:16px}
.us .us-adv>summary small{font-size:13px;color:var(--text-2)}
.us .us-adv-b{display:flex;flex-direction:column;gap:18px;padding:0 20px 20px;border-top:1px solid var(--line);padding-top:18px}
.us .us-sh{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap}
.us .us-sh h3{margin:0;font-size:15px}
.us .us-al{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.us .us-al li{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;border:1px solid var(--line);background:var(--panel-2);font-size:14px;line-height:1.55;color:var(--text-2)}
.us .us-al li b{color:var(--text)}
.us .us-al i{width:9px;height:9px;border-radius:50%;margin-top:7px;flex:none;background:var(--info)}
.us .us-al li.warn i{background:var(--warn)} .us .us-al li.bad i{background:var(--bad)} .us .us-al li.ok i{background:var(--ok)}
.us .us-ws{display:grid;grid-template-columns:repeat(auto-fill,minmax(290px,1fr));gap:14px}
.us .us-w{border:1px solid var(--line);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:10px;background:var(--panel-2);min-width:0}
.us .us-w.warn{border-color:color-mix(in srgb,var(--warn) 50%,var(--line))} .us .us-w.bad{border-color:color-mix(in srgb,var(--bad) 50%,var(--line))}
.us .us-w-v{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.us .us-w-v b{font:700 28px/1.1 var(--mono);color:var(--text)}
.us .us-w.warn .us-w-v b{color:var(--warn)} .us .us-w.bad .us-w-v b{color:var(--bad)}
.us .us-w-v span{font:500 13.5px var(--mono);color:var(--text-2)} .us .us-w-v small{font-size:13px;color:var(--muted)}
.us .us-w-bar{height:8px;border-radius:99px;background:color-mix(in srgb,var(--text) 8%,transparent);overflow:hidden}
.us .us-w-bar i{display:block;height:100%;border-radius:99px;background:var(--ok)}
.us .us-w-bar.warn i{background:var(--warn)} .us .us-w-bar.bad i{background:var(--bad)}
.us .us-w-f,.us .us-w-t{font-size:13px;color:var(--text-2);margin:0}
.us .us-w-g{display:grid;grid-template-columns:1fr 1fr;gap:8px 12px;padding:10px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.us .us-w-g span{display:block;font-size:12.5px;color:var(--muted)} .us .us-w-g b{font:650 14.5px var(--mono)}
.us .us-w-a{display:flex;gap:8px;flex-wrap:wrap} .us .us-w-a .btn{flex:1}
.us .note-x.sm{padding:9px 12px;font-size:13px}
.us .us-tw{overflow-x:auto;-webkit-overflow-scrolling:touch}
.us .us-t{width:100%;border-collapse:collapse;font-size:14px;min-width:420px}
.us .us-t th{text-align:right;font-size:12.5px;color:var(--muted);font-weight:650;padding:9px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.us .us-t td{text-align:right;padding:9px 10px;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:13px}
.us .us-t th:first-child,.us .us-t td:first-child{text-align:left;font-family:var(--sans)}
.us .us-t tr:last-child td{border-bottom:0}
.us-ped{width:100%;border-collapse:collapse}.us-ped td,.us-ped th{padding:5px 6px;text-align:left;font-size:13px}.us-ped input{width:110px}

@media (max-width:1100px){.us .us-hero{grid-template-columns:1fr 1fr}.us .us-hero .us-big.ok{grid-column:1/-1}}
@media (max-width:900px){
  .us .us-hero{grid-template-columns:1fr}
  .us .us-big-v{font-size:34px}
  .us .us-pb{grid-template-columns:80px minmax(0,1fr) 56px 36px;gap:8px}
  .us .us-adv>summary{padding:16px}
  .us .us-adv-b{padding:16px}
  .us .ph-a{width:100%;justify-content:space-between}
}