/* 주문서 강화 창(하이랜드 P1-B · LANES G6, DESIGN §4.10). 10-23 사용자 "일러스트는 왜 … 구성 요소가 너무 부족 … 주문서도 숫자 박아두는 게 아니라 아이콘 … 변경버튼은 왜 …
   차라리 팝업식" → 팝업 560(GUI 450 기준). 판 = G7 상점 툴팁(townshop.css .popup.ts-buy, 메이플 툴팁 결)과 같은 값: 무채 검은 반투명 .95 · 1px 회색 테 · 구획 점선.
   10-23 이어서 "위에 강화할 장비 … 필요없음 … 아이템정보탭처럼 메이플스토리식 UI … 마지막 값만 … 힘|속도|마나|잠재옵션|기타"(G6-OPTIONS.md) →
   [왼쪽 메이플 툴팁(물품 창 아이템 정보 카드 .icard 그대로 — inv_fx.css) | 오른쪽 탭 5 + 주문서 줄 + 확인 줄]. 큰 칸 44 · 제목 15 · 본문 11.5~12 · 알약 28 · 단추 = 글자 폭.
   색 = 등급색(등급 등록부) · 주문서 띠 = data/scrolls.json chances[].band · 주문서 능력치 #aab4ff · 오른 값 #66ffff · 금 #e8c979 · 모자람 #ffb3a8(모두 ts-buy 와 같은 값)
   · 재생 청록 #5fc9a8(stone.regen.svg 돌 빛) · 결정 청록(.btn.gold). */
/* 10-24 사용자 "UI/UX 왤케 구리냐 … 인벤토리 아이템 정보 글자 작아졌는데 강화에서 보여 주는 아이템도 … 전반적으로 글자가 너무 큼 · ui 가 꾸며지지도 않았고" →
   판 = 하이랜드 작은 팝업 공통 판(windows-css 18-popup-dark: #25292b → #1b1e20 · 둥근 12 · 네 모서리 Codex 꽃 문양 베이지 금 #cdb98f — 이 창만 빠져 있던 것)
   · 제목 = 진주빛 명조(EnhTitle, 강화 결과 도장과 같은 글꼴) + 양 끝 흐린 빛선 · 툴팁 = 들어간 어두운 판(글자 = 아이템 정보 카드 공통 값 8.5) · 주문서 줄 = 띠 색 왼쪽 결
   · 확률 = 띠 색 막대 그래프(hq-ui "글자 대신 그래프"). 크기 560 × 403 → 440 × 326 · 탭 24/10 · 줄 32/10 · 단추 24/10.5 · 제목 14 */
#ui .popup.scr { --ink: #f2f0e7; --ink-soft: #9a9d98; position: relative; width: 440px; padding: 14px 16px 14px; border: 0; border-image: none; border-radius: 12px; color: var(--ink);
  filter: none; }   /* 판(불투명 — 물품 창 위에서 비치지 않음, 10-23 "비침") = 아래 장식 두 겹 */
/* 판 겉모양 = 공통 규칙을 받는 장식 두 겹(scroll.js SKIN — 10-24 사용자 "강화탭이 나인패치가 다른 거랑 다르게 … 이런 일 안 생기게 통일"). 여기에는 값을 적지 않는다:
   판 색 · 테 · 그림자 · 둥근 · 모서리 · 띠는 windows-css 18-popup-dark(#ui .popup:not(…)) 가 .gf-skin 에 그대로 칠한다. 여기서는 자리(판을 덮음) · 층(back 뒤, front 위) · 움직임 끔만.
   창 자신(.popup.scr · .scr-cube-in · .scr-odds-in)은 판을 그리지 않고 isolation 으로 층을 가둔다(back z −1 이 막 뒤로 빠지지 않게). */
#ui :is(.popup.scr, .scr .scr-cube-in, .scr .scr-odds-in) { isolation: isolate; background: none; box-shadow: none; }
#ui .dim .scr .popup.gf-skin { position: absolute; inset: 0; z-index: -1; display: block; width: auto; height: auto; min-width: 0; min-height: 0; max-width: none; max-height: none; margin: 0; pointer-events: none; animation: none; transform: none; }
#ui .dim .scr .popup.gf-skin.back::after { content: none; }
#ui .dim .scr .popup.gf-skin.front { z-index: 2; background: none; box-shadow: none; }
#ui .popup.scr > .scr-body { margin-top: 8px; }
#ui .scr .btn { flex: none; min-height: 24px; padding: 0 12px; border: 0; border-image: none; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; text-shadow: none; filter: none;
  font-size: 10.5px; font-weight: 800; white-space: nowrap; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); }   /* = 18-popup-dark .btn 결 · 높이 24 */
#ui .scr .btn.gold { background: linear-gradient(#83c3bf, #548f8c); color: #fff; }
#ui .scr .btn.plain { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
#ui .scr .btn.off { filter: grayscale(1); opacity: .45; }
#ui .scr .scr-empty { padding: 24px 0; text-align: center; font-size: 11px; font-weight: 800; color: var(--ink-soft); }

/* 머리: 제목(주문서 흰 선 그림 + 진주빛 명조) · 지갑 알약(금 · 다이아) · 아래 양 끝 흐린 1px 빛선(hq-ui 제목 띠) */
#ui .scr .scr-head { position: relative; display: flex; align-items: center; justify-content: space-between; height: 20px; padding: 0 18px 7px 16px; box-sizing: content-box; }   /* 양옆 = 모서리 문양 자리 */
#ui .scr .scr-head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 214, 170, .55) 18%, rgba(255, 255, 255, .28) 50%, rgba(232, 214, 170, .55) 82%, transparent); }
#ui .scr .scr-head h2 { display: flex; align-items: center; gap: 5px; margin: 0; font-family: "EnhTitle", "GFUIFont", sans-serif; font-size: 14px; font-weight: 900; letter-spacing: 1px;
  color: #f4efe2; text-shadow: 0 0 6px rgba(255, 240, 210, .35), 0 1px 2px #000; }
#ui .scr .scr-head h2::before { content: ""; width: 15px; height: 15px; background: #e8d6aa; -webkit-mask: url(../../assets/growth/icons/items/scroll.stat-str.svg) center / contain no-repeat; mask: url(../../assets/growth/icons/items/scroll.stat-str.svg) center / contain no-repeat; }
#ui .scr .scr-wallet { display: flex; gap: 4px; font-size: 10px; font-weight: 800; }
#ui .scr .scr-wallet > span { display: inline-flex; align-items: center; gap: 3px; height: 18px; padding: 0 7px 0 3px; border-radius: 999px; background: rgba(0, 0, 0, .32); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); }
#ui .scr .scr-wallet img { width: 13px; height: 13px; }
#ui .scr .scr-wallet .w-gold { color: #e8c979; } #ui .scr .scr-wallet .w-diamond { color: #8fc6ff; }   /* = 18-popup-dark win-wallet 색 */

/* 본문 [왼쪽 툴팁 판 196 | 오른쪽 탭 · 주문서 · 확인]. 툴팁이 길면 툴팁만 끌어 스크롤(touch_scroll) */
/* 본문 높이 고정(창이 탭 · 장비마다 늘었다 줄며 위아래로 움직이지 않게 — 10-23 사용자 "힘 → 잠재옵션 가면 칸이 막 움직임 · 불편"). 확인 줄은 아래 붙음(scr-foot margin-top auto). */
#ui .scr .scr-body { position: relative; display: grid; grid-template-columns: 192px 1fr; gap: 10px; height: 290px; }   /* 270 → 290(10-24 능력치 세부 탭 줄 18 + 간격 — 능력치 · 잠재옵션 탭 단추가 판 밖으로 나갔다) */
#ui .scr .scr-stage { position: relative; min-width: 0; min-height: 0; overflow: hidden auto; padding: 8px 9px; border-radius: 8px; scrollbar-width: none;   /* 판 안 여백 = 대상 칸 튐(1.18 배) · 기 모음 빛 자리 */
  background: radial-gradient(120% 60% at 50% 0, rgba(255, 255, 255, .05), transparent 70%), rgba(0, 0, 0, .28); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06), inset 0 2px 6px rgba(0, 0, 0, .35); }
#ui .scr .scr-stage::-webkit-scrollbar { display: none; }
#ui .scr .scr-ctl { display: flex; flex-direction: column; gap: 6px; min-width: 0; }

/* 왼쪽 툴팁 = .icard(inv_fx.css 메이플 아이템 정보) + 추옵 · 잠재 구획. 판 배경은 창이 이미 깔았다 */
#ui .scr .scr-icard { padding: 0 0 2px; background: none; box-shadow: none; border: 0; }
#ui .scr .scr-icard .ic-head { padding: 0; }
#ui .scr .scr-icard .ic-gain { align-items: flex-start; gap: 1px; }   /* 별 줄(옛 +n 강화, 꺼짐)은 뺐다 — 칸 오른쪽 = 착용 Lv · 업그레이드 가능 횟수 · 복구 가능 횟수(메이플 툴팁 아래 줄을 위로 모음) */
#ui .scr .scr-icard .ic-req { margin-top: 0; }
#ui .scr .scr-icard .scr-left { font-size: 8.5px; font-weight: 800; color: var(--ink); } #ui .scr .scr-icard .scr-fails { font-size: 8px; font-weight: 700; color: var(--ink-soft); }
/* 강화 창 툴팁(10-24 사용자 "강화탭 아이템 보여 주는 게 글자들이 큼지막"): 칸 44 → 38 · 구획 간격 4. 글자 크기는 아이템 정보 카드 공통 값(inv_fx.css .icard — 같은 날 "아이템 설명 크기 정규화")을 그대로 쓴다 */
#ui .scr .scr-icard > div + div { margin-top: 4px; padding-top: 4px; }
#ui .scr .scr-icard .item-cell.big { width: 38px; height: 38px; } #ui .scr .scr-icard .item-cell.big .icon { left: 5px; top: 5px; width: 25px; height: 25px; }
#ui .scr .scr-icard .ic-parts em { font-style: normal; } #ui .scr .scr-icard .ic-parts em.b { color: #ccff00; } #ui .scr .scr-icard .ic-parts em.s { color: #aab4ff; }   /* 메이플: 추옵 #ccff00 · 주문서 #aab4ff */
/* 추옵 · 잠재 글자 = 아이템 정보 카드 공통 값(inv_fx.css .icard — 줄 8.5/11.5) */
#ui :is(.scr, .icard) .scr-sec { display: flex; align-items: center; gap: 4px; margin-bottom: 1px; font-size: 8.5px; font-weight: 900; color: var(--ink, #f2f0e7); }
/* 추옵 단계 색(10-24 사용자 "1추면 붉은색 2추면 초록색 3추면 노란색 4추면 보라색 5추면 파란색 6추면 회색"): 줄마다 --cc = 숫자 칸 바탕 · 글자 = --cc 를 흰색에 섞은 밝은 색(어두운 판에서 읽힘). 7추 = 6추와 같은 회색 */
#ui :is(.scr, .icard) .scr-bonus .ic-line.b { --cc: #8d9196; color: color-mix(in srgb, var(--cc) 62%, #fff); }
#ui :is(.scr, .icard) .scr-bonus .ic-line.b.c1 { --cc: #ff5a4e; } #ui :is(.scr, .icard) .scr-bonus .ic-line.b.c2 { --cc: #56d16a; } #ui :is(.scr, .icard) .scr-bonus .ic-line.b.c3 { --cc: #ffd23f; }
#ui :is(.scr, .icard) .scr-bonus .ic-line.b.c4 { --cc: #b06cff; } #ui :is(.scr, .icard) .scr-bonus .ic-line.b.c5 { --cc: #4f9bff; } #ui :is(.scr, .icard) .scr-bonus .ic-line.b.c6 { --cc: #8d9196; }
#ui :is(.scr, .icard) .scr-bonus .chu { display: inline-block; min-width: 10px; margin-right: 4px; padding: 0 2px; border-radius: 2px; font-style: normal; font-size: 7px; line-height: 10px; text-align: center;
  color: #fff; background: var(--cc); text-shadow: 0 1px 1px rgba(0, 0, 0, .45); vertical-align: 1px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
#ui :is(.scr, .icard) .scr-bonus .ic-line.b.c1 .chu { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35), 0 0 6px color-mix(in srgb, var(--cc) 75%, transparent); }   /* 1추 = 빛 */
#ui :is(.scr, .icard) .scr-bonus .ic-line.b:is(.c2, .c3) .chu { color: #1d1f12; text-shadow: none; }   /* 밝은 바탕(초록 · 노랑)은 어두운 숫자 */
/* 잠재 상자(메이플 잠재옵션 칸: 등급색 테 + 등급 머리글자 R·E·U·L 대문자(10-23 사용자 "유 말고 U·L·R") + 3줄) */
#ui :is(.scr, .icard) .scr-pot { position: relative; padding: 3px 5px 4px; border-radius: 4px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc, #6b7073) 75%, transparent); background: color-mix(in srgb, var(--pc, #6b7073) 9%, transparent); }
#ui :is(.scr, .icard) .scr-pot .scr-sec { color: color-mix(in srgb, var(--pc) 55%, #fff); }
#ui :is(.scr, .icard) .scr-pot .pg { flex: none; width: 10px; height: 10px; border-radius: 2px; display: grid; place-items: center; font-style: normal; font-size: 7px; font-weight: 900; color: #fff; background: var(--pc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
#ui :is(.scr, .icard) .scr-pot .ic-line.p { color: var(--ink, #f2f0e7); }
#ui :is(.scr, .icard) .scr-pot .ic-line.p::before { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 6px 2px 1px; border-radius: 50%; background: var(--lc); }   /* 줄 등급 점(메이플 줄마다 등급) */
#ui :is(.scr, .icard) .scr-pot.none { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); background: none; }
#ui :is(.scr, .icard) .scr-pot.none .scr-sec { color: var(--ink-soft, #9a9d98); }
#ui .icard:not(.scr-icard) > .scr-bonus, #ui .icard:not(.scr-icard) > .scr-pot { margin-top: 5px; }   /* 물품 창 아이템 정보 카드(inv_fx.js): 능력치 줄 아래 */
#ui .scr .ic-line.fx-new { animation: scr-line-new .5s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i, 0) * 70ms); }   /* 바뀐 줄 순차 70 ms */

/* 탭 5 = 어두운 알약 줄 + 고른 탭 베이지(01-popup .popup.full .tabs 값) — 고품질UI: 탭 4~5개는 줄 폭 균등 · 높이 24(10-24 "글자가 너무 큼") */
#ui .scr .scr-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; height: 24px; padding: 2px; border-radius: 999px; background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); box-sizing: border-box; }
#ui .scr .scr-tabs .tab { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 0; height: 20px; padding: 0 3px; border: 0; border-image: none; border-radius: 999px; background: none;
  color: var(--ink-soft); font-size: 10px; font-weight: 800; white-space: nowrap; cursor: pointer; transition: background .15s, color .15s; }
#ui .scr .scr-tabs .tab.on { background: linear-gradient(#e6decd, #c7bba3); color: #26221c; box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
#ui .scr .scr-tabs .tab i { flex: none; width: 11px; height: 11px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }

/* 주문서 줄 32: [주문서 그림 24 | 이름 · 효과 | 확률 · 보유] — 확률은 숫자 판이 아니라 줄 끝 값(메이플 "… 주문서 60%"). 줄 바탕 = 왼쪽에서 띠 색이 번지는 결(줄마다 확률 색이 한눈에) */
/* 능력치 세부 탭(10-24 사용자 "능력치에서 세부탭을 둔 다음 거기서 힘|속도|마나 로 나눠"): 위 알약 탭 아래 글자 탭 + 금 밑줄(hq-ui §3 경매장 탭 말씨) — 알약을 두 겹 쌓지 않는다 */
#ui .scr .scr-sub { display: flex; gap: 14px; height: 18px; padding: 0 6px; margin-top: -2px; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08); }
#ui .scr .scr-sub button { position: relative; display: inline-flex; align-items: center; gap: 3px; flex: none; height: 18px; padding: 0 2px; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: 9.5px; font-weight: 800; color: var(--ink-soft, #9a9d98); }
#ui .scr .scr-sub button i { width: 10px; height: 10px; background: currentColor; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; }
#ui .scr .scr-sub button.on { color: #f4efe2; }
#ui .scr .scr-sub button.on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; border-radius: 1px; background: linear-gradient(90deg, #c9a75a, #f1d68e, #c9a75a); box-shadow: 0 0 6px rgba(241, 214, 142, .55); }
#ui .scr .scr-sub button:active { transform: scale(.94); }
#ui .scr .scr-cards { display: flex; flex-direction: column; gap: 4px; min-height: 140px; }
#ui .scr .scr-cards.flip > .scr-card { animation: fx-cell .36s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i, 0) * 50ms); }   /* 탭 판 바뀜 */
#ui .scr .scr-card { position: relative; display: flex; align-items: center; gap: 7px; height: 32px; padding: 0 9px 0 4px; border: 0; border-radius: 7px; color: var(--ink); text-align: left; cursor: pointer;
  background: linear-gradient(90deg, color-mix(in srgb, var(--c) 18%, transparent), rgba(255, 255, 255, .035) 46%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .07); transition: transform .06s ease-out, background .15s; }
#ui .scr .scr-card .scr-ic { flex: none; position: relative; width: 24px; height: 24px; border-radius: 5px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 70%, #fff 8%), color-mix(in srgb, var(--c) 35%, #111)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 60%, #fff), inset 0 1px rgba(255, 255, 255, .25); }
#ui .scr .scr-card .scr-ic::after { content: ""; position: absolute; inset: 4px; background: #fff; -webkit-mask: var(--ic) center / contain no-repeat; mask: var(--ic) center / contain no-repeat; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4)); }
#ui .scr .scr-card .scr-ic.img { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 50%, transparent); }   /* 재화 주문서 = 그 물건 한 색 그림 그대로(물품 창 칸과 같은 그림) */
#ui .scr .scr-card .scr-ic.img::after { inset: 2px; background: var(--img) center / contain no-repeat; -webkit-mask: none; mask: none; filter: none; }
#ui .scr .scr-card .nm { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 12px; }
#ui .scr .scr-card .nm strong { font-size: 10px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .scr .scr-card .nm small { font-size: 9px; font-weight: 700; color: #aab4ff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .scr .scr-card.item .nm small { color: var(--ink-soft); }
#ui .scr .scr-card b { flex: none; font-size: 12.5px; font-weight: 900; color: color-mix(in srgb, var(--c) 40%, #fff); text-shadow: 0 0 6px color-mix(in srgb, var(--c) 50%, transparent); }
#ui .scr .scr-card em { flex: none; display: inline-flex; align-items: center; gap: 2px; font-style: normal; font-size: 9.5px; font-weight: 800; color: #e8c979; }
#ui .scr .scr-card em img { width: 11px; height: 11px; }
#ui .scr .scr-card.on { background: linear-gradient(90deg, color-mix(in srgb, var(--c) 30%, transparent), rgba(255, 255, 255, .1) 55%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 10px color-mix(in srgb, var(--c) 45%, transparent); }   /* 고른 줄 = 흰 빛 테 */
#ui .scr .scr-card:active { transform: scale(.97); }
#ui .scr .scr-card.off .scr-ic, #ui .scr .scr-card.off strong { filter: grayscale(1); opacity: .5; }
#ui .scr .scr-card.off .nm small { color: #ffb3a8; }
#ui .scr .scr-card.hot::after { content: ""; position: absolute; inset: 0; border-radius: 7px; pointer-events: none; box-shadow: 0 0 0 2px #5fc9a8, 0 0 12px rgba(95, 201, 168, .8); animation: scr-hot 1s ease-in-out infinite; }   /* 실패 직후 재생의 돌 맥박 = 그림자 고정 + 투명도만 */
#ui .scr .scr-card.nope { animation: scr-nope .3s ease-out; }
#ui .dim.fx-intro .scr .scr-card { animation: fx-cell .42s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i, 0) * 70ms + .18s); }   /* 고품질UI 칸 순차 70 ms · 420 ms 팝 */

/* 확인 줄: 확률(이름 · 띠 색 막대 · 값) · 안내 · [닫기][강화 | 사용]. 막대 = 확률만큼 차는 그래프(hq-ui "글자 대신 그래프"), 바뀌면 차오름 */
#ui .scr .scr-foot { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 6px; border-top: 1px solid rgba(255, 255, 255, .08); }
#ui .scr .scr-rate { display: flex; flex-wrap: wrap; align-items: center; column-gap: 6px; min-height: 16px; font-size: 9.5px; font-weight: 800; color: var(--ink-soft); }
#ui .scr .scr-rate b { font-size: 12.5px; font-weight: 900; color: color-mix(in srgb, var(--c) 40%, #fff); text-shadow: 0 0 6px color-mix(in srgb, var(--c) 50%, transparent); }
#ui .scr .scr-rate small { flex-basis: 100%; font-size: 9px; font-weight: 700; color: var(--ink-soft); }
#ui .scr .scr-gauge { flex: 1; min-width: 40px; height: 5px; border-radius: 999px; overflow: hidden; background: rgba(0, 0, 0, .45); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); }
#ui .scr .scr-gauge > i { display: block; height: 100%; width: var(--p); border-radius: inherit; background: linear-gradient(90deg, color-mix(in srgb, var(--c) 70%, #000), color-mix(in srgb, var(--c) 60%, #fff));
  box-shadow: 0 0 6px color-mix(in srgb, var(--c) 70%, transparent); animation: scr-gauge .45s cubic-bezier(.2, .9, .3, 1) both; }
@keyframes scr-gauge { from { width: 0; } }
#ui .scr .scr-msg { font-size: 9px; font-weight: 700; line-height: 12px; color: var(--ink-soft); min-height: 24px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#ui .scr .scr-msg.warn { color: #ffb3a8; }
#ui .scr .scr-btns { display: flex; justify-content: flex-end; gap: 6px; padding-right: 12px; }   /* 오른쪽 = 아래 모서리 문양 자리 */
#ui .scr .scr-go:has(> .scr-cost) { gap: 5px; padding-left: 4px; }   /* 왼쪽 4 = 값 알약 자리 — 값 없는 단추(잠재옵션 [재설정])는 좌우 12 그대로(10-24 사용자 "재설정 버튼이 좀 왼쪽에 가 있다": 글자가 왼쪽 4 · 오른쪽 12 로 치우쳤다) */
#ui .scr .scr-cost { display: inline-flex; align-items: center; gap: 2px; height: 17px; padding: 0 7px 0 3px; border-radius: 999px; background: rgba(0, 0, 0, .22); font-size: 10px; }
#ui .scr .scr-cost img, #ui .scr .scr-cost .cost-ic { width: 12px; height: 12px; }
#ui .scr .scr-cost .cost-ic { background: var(--img) center / contain no-repeat; }
#ui .scr .scr-cost.short { color: #ffb3a8; }

/* 잠재옵션 재설정 창(10-23 사용자 "예 아니오 매번 … 아예 잠재옵션 창 자체를 띄워서 여러 번 누를 수 있게") — 강화 창 위에 뜨는 작은 팝업.
   10-24 사용자 "여백이 너무 많음 · 작은 팝업으로도 충분 · 고급은 위아래로 이전/이후 · 아이템 슬롯 · 등급 상승 확률 중앙 · 가로가 쓸데없이 길어" →
   강화 창을 어둡게 덮고(.scr-cube) 가운데 작은 판(.scr-cube-in): [머리: 주문서 · 이름 | 보유 · 다이아] · [가운데: 칸 · 이름 · 등급 상승 확률]
   · [일반 = 상자 하나 | 고급 = 이전 상자 위 · 이후 상자 아래, 이름표 줄 오른쪽에 유지 · 적용] · [모자람 안내(있을 때만)] · [닫기 · 재설정 가운데].
   참고: PC 메이플 큐브 결과 창(BEFORE · AFTER + [선택] + [한 번 더 재설정하기], KMST 1.2.168) */
#ui .scr .scr-cube { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; border-radius: 12px; background: rgba(0, 0, 0, .55); }
#ui .scr .scr-cube[hidden] { display: none; }
/* 10-24 이어서 "전반적으로 글자가 너무 큼 · ui 가 꾸며지지도 않았고": 폭 268 → 244 · 판 = 강화 창과 같은 작은 팝업 판(18-popup-dark) + 모서리 문양 26 · 글자 = 아이템 정보 카드 줄 8.5 */
#ui .scr :is(.scr-cube-in, .scr-odds-in) { position: relative; width: 244px; display: flex; flex-direction: column; padding: 9px 12px 10px; border-radius: 12px; }   /* 판 = 장식 두 겹(공통 규칙) */
#ui .scr .scr-cube-in.pop { animation: fx-pop .283s cubic-bezier(.2, .9, .3, 1.1) both; }   /* 열 때만(10-24 사용자 "재설정할 때마다 창 연출 그 바운드 형태가 굉장히 거슬림" — 굴릴 때마다 판을 다시 그려 팝이 되풀이됐다) · 고품질UI 창 열기 283 ms — 작은 팝업 표준(최대 1.025). 옛 fx-got-in 1.12+ 는 강화 창 판에 잘렸다(10-24) */
#ui .scr .scr-chead { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 6px; height: 18px; padding: 0 12px 6px 12px; box-sizing: content-box; }
#ui .scr .scr-chead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 214, 170, .5) 20%, rgba(255, 255, 255, .25) 50%, rgba(232, 214, 170, .5) 80%, transparent); }
#ui .scr .scr-chead h3 { display: flex; align-items: center; gap: 4px; min-width: 0; margin: 0; font-size: 10px; font-weight: 900; color: #f4efe2; text-shadow: 0 1px 2px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .scr .scr-chead .scr-wallet { flex: none; gap: 3px; font-size: 9px; }
#ui .scr .scr-chead .scr-wallet > span { height: 16px; padding: 0 5px 0 2px; }
#ui .scr .scr-chead .scr-wallet img { width: 11px; height: 11px; }
#ui .scr .scr-chead .cost-ic, #ui .scr .scr-chead .scr-wallet .cost-ic { flex: none; width: 12px; height: 12px; background: var(--img) center / contain no-repeat; }
#ui .scr .scr-cgear { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 6px 0 4px; text-align: center; }
#ui .scr .scr-cgear::before { content: ""; position: absolute; left: 50%; top: 2px; width: 70px; height: 46px; margin-left: -35px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gc, #fff) 30%, transparent), transparent); }   /* 칸 뒤 등급색 빛(물품 카드 ic-top 빛과 같은 결) */
#ui .scr .scr-cgear .item-cell { width: 34px; height: 34px; }
#ui .scr .scr-cgear .item-cell .icon { left: 4px; top: 4px; width: 24px; height: 24px; }
#ui .scr .scr-cgear .nm { max-width: 100%; font-size: 10px; font-weight: 900; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .scr .scr-cgear .scr-rate { justify-content: center; min-height: 0; font-size: 9px; }
#ui .scr .scr-cgear .scr-rate b { font-size: 10.5px; color: color-mix(in srgb, var(--c) 45%, #fff); }
#ui .scr .scr-cgear .scr-rate small { font-size: 8.5px; }
#ui .scr .scr-cone, #ui .scr .scr-cpair { display: flex; flex-direction: column; gap: 4px; }
#ui .scr .scr-cube .scr-pot { min-height: 44px; }
#ui .scr .scr-cube .scr-bonus { min-height: 66px; }   /* 추가옵션 재설정 창 = 줄 수(1~4, bonus.json countBp)와 상관없이 같은 높이(10-24 사용자 "옵션이 많아지면 창 자체의 크기가 세로로 길어지거나 짧아지는데 여유 공간을 미리 둬서 차이 없도록") — 머리 + 4줄 실측 66(GUI) */
#ui .scr .scr-cside { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
#ui .scr .scr-clabel { display: flex; align-items: center; justify-content: space-between; height: 18px; font-size: 9.5px; font-weight: 900; color: var(--ink-soft); }
#ui .scr .scr-cside.after .scr-clabel { color: #66ffff; }
#ui .scr .scr-clabel .btn { min-height: 17px; padding: 0 9px; font-size: 9px; }
/* 잠재옵션 계승 창(10-25): 메이플 잠재능력 전승 창 배치(2026-03-19 캐시 공지 그림) — [계승 재료] + [계승할 장비] » [최종 결과물] 점선 칸 · 칸 아래 이름 알약 · ⓘ 안내 한 줄
   · 고른 위 칸의 후보 줄(칸 30) · 계승 후 잠재 상자. 10-25 사용자 "아이템슬롯이 마스킹이 잘못되어서 짤리고있음" — 공용 .item-cell.on 의 바깥 outline(+fx-ring 3.5px)이
   가로 넘김 줄(overflow-x)에 잘렸다 → 이 창 안 칸은 outline 을 끄고 안쪽 테(inset) + 줄 여백 6 안에 드는 빛으로 고른 것을 보인다. */
#ui .scr .scr-inh-slots { display: flex; align-items: flex-start; justify-content: center; gap: 2px; margin: 2px 0 3px; }
#ui .scr .scr-inh-slots .op { flex: none; width: 12px; margin-top: 17px; font-style: normal; font-size: 12px; font-weight: 900; line-height: 16px; text-align: center; color: var(--ink-soft); }
#ui .scr .scr-inh-slot { flex: none; width: 62px; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 5px 2px 3px; margin: 0; border: 1px dashed rgba(255, 255, 255, .2); border-radius: 7px; background: rgba(0, 0, 0, .22); color: inherit; font: inherit; cursor: pointer; transition: border-color .12s, background .12s; }
#ui .scr .scr-inh-slot.k-res { cursor: default; border-style: solid; border-color: rgba(255, 255, 255, .1); }
#ui .scr .scr-inh-slot.on { border-color: #ffd76a; background: rgba(255, 215, 106, .08); }   /* 지금 후보 줄을 보이는 칸 = 금 점선 */
#ui .scr .scr-inh-slot:active:not(.k-res) { transform: scale(.94); }
#ui .scr .scr-inh-slot .item-cell { width: 40px; height: 40px; border-radius: 7px; cursor: inherit; }
#ui .scr .scr-inh-slot .item-cell .icon { left: 6px; top: 5px; width: 28px; height: 28px; }
#ui .scr .scr-inh-slot.k-res:not(.empty) .item-cell { box-shadow: inset 0 -9px 11px -8px color-mix(in srgb, var(--gc) 85%, #fff), inset 0 1px rgba(255, 255, 255, .22), 0 0 9px color-mix(in srgb, var(--pc) 70%, transparent); }   /* 결과물 = 받을 장비 + 재료 잠재 등급 빛 */
#ui .scr .scr-inh-slot .nm { max-width: 58px; padding: 0 5px; border-radius: 7px; background: rgba(0, 0, 0, .45); font-size: 7.5px; font-weight: 700; line-height: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #f2f0e7; }
#ui .scr .scr-inh-slot.empty .nm { color: var(--ink-soft); }
#ui .scr .scr-inh-slot .cap { font-size: 8px; font-weight: 900; line-height: 10px; color: var(--ink-soft); white-space: nowrap; }
#ui .scr .scr-inh-slot.on .cap { color: #ffd76a; }
#ui .scr .scr-inh .item-cell .pg { position: absolute; left: 1px; top: 1px; width: 9px; height: 9px; border-radius: 2px; display: grid; place-items: center; font-style: normal; font-size: 6.5px; font-weight: 900; line-height: 9px; color: #fff; background: var(--pc); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .35); }
#ui .scr .scr-inh-pick { display: flex; flex-direction: column; margin-bottom: 2px; }
#ui .scr .scr-inh-cells { display: flex; gap: 5px; min-height: 30px; overflow-x: auto; padding: 6px; margin: 0 -6px; scrollbar-width: none; }   /* 여백 6 = 고른 칸 빛이 넘김 줄에 잘리지 않을 자리 */
#ui .scr .scr-inh-cells::-webkit-scrollbar { display: none; }
#ui .scr .scr-inh-nil { margin: auto; font-size: 8.5px; color: var(--ink-soft); }
#ui .scr .scr-inh-cell { position: relative; flex: 0 0 auto; width: 30px; height: 30px; padding: 0; cursor: pointer; transition: opacity .12s, transform .12s; }
#ui .scr .scr-inh-cell.dim { opacity: .4; }   /* 지금 고른 다른 칸과 짝이 안 됨 — 누르면 다른 칸을 맞춰 고친다 */
#ui .scr .scr-inh-cell .icon { left: 3px; top: 3px; width: 22px; height: 22px; }
#ui .scr .scr-inh .item-cell .lv { position: absolute; right: 1px; bottom: 0; font-style: normal; font-size: 7.5px; font-weight: 900; line-height: 9px; color: #fff; text-shadow: 0 0 2px #000, 0 0 2px #000; }
#ui .scr .scr-inh .item-cell.on { outline: none; animation: none; opacity: 1; box-shadow: inset 0 0 0 1.5px #ffd76a, inset 0 -8px 10px -8px color-mix(in srgb, var(--gc) 85%, #fff), 0 0 5px rgba(255, 215, 106, .6); }
#ui .scr .scr-inh-over { display: block; margin-top: 2px; font-size: 8px; line-height: 10.5px; color: #ff9a7a; text-align: center; }
#ui .scr .scr-cube .ic-line { font-size: 8.5px; font-weight: 700; line-height: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* = 아이템 정보 카드 줄(툴팁 밖이라 직접) */
#ui .scr .scr-pot.empty { display: grid; place-items: center; } #ui .scr .scr-pot.empty .scr-sec { margin: 0; }
#ui .scr .scr-cfoot { display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 7px; }
#ui .scr .scr-cfoot .scr-msg { min-height: 0; text-align: center; }
#ui .scr .scr-cfoot .scr-btns { justify-content: center; padding-right: 0; }
#ui .scr .scr-cfoot .btn { min-height: 22px; font-size: 10px; }
#ui .scr .scr-cgo { gap: 5px; padding-left: 4px; } #ui .scr .scr-cgo.nope { animation: scr-nope .3s ease-out; }
/* 굴림(10-24 사용자 "글자가 스프링마냥 왔다 갔다 … 메이플처럼 슬롯이 반짝 · 통신값이 오기 전까지 슬롯이 흰색으로 빛나는 연출"): 글자는 움직이지 않는다.
   누르면 상자가 흰빛으로 차올라 서버 답이 올 때까지 맥박(.rolling) → 새 줄이 그려지는 순간 흰 번쩍이 빠지며 걷힌다(.flash 360 ms) */
#ui .scr .scr-cube .scr-pot::after { content: ""; position: absolute; inset: 0; border-radius: 4px; pointer-events: none; opacity: 0; background: rgba(255, 255, 255, .9); }
#ui .scr .scr-cube .scr-pot.rolling { box-shadow: inset 0 0 0 1px #fff, 0 0 14px rgba(255, 255, 255, .75); }
#ui .scr .scr-cube .scr-pot.rolling::after { animation: scr-glow .5s ease-in-out infinite alternate; }
#ui .scr .scr-cube .scr-pot.flash::after { animation: scr-unglow .36s ease-out both; }
@keyframes scr-glow { 0% { opacity: .55; } 100% { opacity: .85; } }
@keyframes scr-unglow { 0% { opacity: .85; } 100% { opacity: 0; } }
/* 등급 상승: 상자 테가 새 등급색으로 번쩍(크기는 그대로 — 움직임 없음, scroll.js scrCubeRoll .up, --rc) */
#ui .scr .scr-cube .scr-pot.up { animation: scr-potup .7s ease-out both; }
@keyframes scr-potup { 0% { box-shadow: 0 0 0 0 var(--rc), 0 0 0 var(--rc); } 30% { box-shadow: 0 0 0 2px var(--rc), 0 0 22px var(--rc); }
  100% { box-shadow: 0 0 0 1px color-mix(in srgb, var(--rc) 70%, transparent), 0 0 8px color-mix(in srgb, var(--rc) 40%, transparent); } }

/* 불타는 주문서(scroll.js scrCast · burner): 판 아래 → 가운데로 떠오름 → WebGL 디졸브(캔버스) / CSS 대체(마스크) · 뒤에 주황 열기 */
#ui .scr .scr-burn { position: absolute; z-index: 6; pointer-events: none; }
#ui .scr .scr-ctl { transition: opacity .2s; } #ui .scr.casting .scr-ctl { opacity: .3; }   /* 타는 동안 오른쪽 목록을 물려 주문서 · 대상 칸만 또렷하게 */
#ui .scr .scr-burn > canvas, #ui .scr .scr-burn > .scr-burn-css { position: absolute; inset: 0; width: 100%; height: 100%; }
#ui .scr .scr-burn::before { content: ""; position: absolute; inset: -30%; border-radius: 50%; opacity: 0; background: radial-gradient(closest-side, rgba(255, 150, 60, .55), rgba(255, 90, 20, .18) 60%, transparent); transition: opacity .2s; }
#ui .scr .scr-burn.lit::before { opacity: 1; animation: scr-heat .32s ease-in-out infinite alternate; }
/* WebGL 없을 때: 그림 모양(마스크) 안을 크림색으로 + 아래에서 올라오는 자름 마스크와 겹침(intersect) — 한 색 SVG 를 배경으로 깔면 검은 그림이 된다 */
#ui .scr .scr-burn-css { background: #f6ecd2; filter: drop-shadow(0 0 2px var(--c, #e8c979));
  -webkit-mask: linear-gradient(to top, transparent 0 var(--cut, 0%), #000 calc(var(--cut, 0%) + 12%)), var(--img) center / 84% no-repeat; -webkit-mask-composite: source-in;
  mask: linear-gradient(to top, transparent 0 var(--cut, 0%), #000 calc(var(--cut, 0%) + 12%)), var(--img) center / 84% no-repeat; mask-composite: intersect; }
#ui .scr .scr-burn-css.go { animation: scr-burn-css var(--ms, 1s) ease-in both; }
@property --cut { syntax: "<percentage>"; inherits: false; initial-value: 0%; }
@keyframes scr-burn-css { 0% { --cut: -12%; filter: none; } 30% { filter: sepia(1) saturate(3) hue-rotate(-20deg) brightness(1.3); } 100% { --cut: 100%; filter: sepia(1) saturate(4) hue-rotate(-25deg) brightness(1.6); } }
@keyframes scr-heat { from { transform: scale(.94); } to { transform: scale(1.06); } }
@keyframes scr-line-new { 0% { transform: translateX(-8px); opacity: 0; filter: brightness(2.2); } 60% { transform: none; opacity: 1; } 100% { filter: none; } }

/* 주문서 무대(scroll.js scrCast · 10-24 사용자 "어두운 화면에 무기가 한 2배 확대된 채로 보여 주고 · 주문서가 밑에서 나와 아이템에 딱 가면서 불타는 느낌 · 무슨 능력치 올랐는지"):
   화면 전체를 어둡게(::before 가 창 둘레 1200 까지) · 장비 칸 84(툴팁 칸 38 의 2.2 배) + 뒤 등급색 빛 · 결과 글자는 장비 아래(.scr-fx.show). 겹 차례 = 무대 3 < 빛 알갱이 4 < 결과 5 < 주문서 6 */
#ui .scr .scr-show { position: absolute; inset: 0; z-index: 3; pointer-events: none; animation: scr-show-in .22s ease-out both; }
#ui .scr .scr-show::before { content: ""; position: absolute; inset: -1200px; background: rgba(3, 4, 6, .9); }
#ui .scr .scr-show.out { animation: scr-show-out .22s ease-in both; }
#ui .scr .scr-show-glow { position: absolute; width: 190px; height: 190px; margin: -95px 0 0 -95px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gc) 42%, transparent), color-mix(in srgb, var(--gc) 12%, transparent) 60%, transparent); animation: scr-show-glow 1.05s ease-in-out infinite alternate; }   /* 등급 빛 1047 ms 맥동(hq-ui) */
#ui .scr .scr-big { position: absolute; width: 84px; height: 84px; cursor: default; box-shadow: 0 0 18px color-mix(in srgb, var(--gc) 55%, transparent), 0 6px 14px rgba(0, 0, 0, .6); }
#ui .scr .scr-big .icon { left: 13px; top: 13px; width: 56px; height: 56px; }
#ui .scr .scr-big.charging { animation: scr-charge var(--charge, .5s) ease-in both; }
#ui .scr .scr-big.beat { animation: scr-beat .42s ease-in-out both; }
#ui .scr .scr-big.freeze { animation-play-state: paused !important; }
#ui .scr .scr-big.hit-success { animation: scr-hit .5s cubic-bezier(.2, .9, .3, 1.4) both; }
#ui .scr .scr-big.hit-fail { animation: scr-sink .7s ease-out both; }
#ui .scr .scr-big.hit-regen { animation: scr-hit-r .5s ease-out both; }
@keyframes scr-show-in { from { opacity: 0; } }
@keyframes scr-show-out { to { opacity: 0; } }
@keyframes scr-show-glow { from { transform: scale(.92); opacity: .8; } to { transform: scale(1.06); opacity: 1; } }
/* 무대 결과 글자: 띠 · 빛선 · 도장 · 부제 = 장비 아래(72%), 바뀐 능력치 줄 = 그 밑 "힘 : +7 → +9"(오른 값 #66ffff = 툴팁 오른 줄 색) */
#ui .scr-fx.show .scr-fx-band, #ui .scr-fx.show .scr-fx-title, #ui .scr-fx.show .scr-fx-sub { top: 72%; }
#ui .scr-fx.show .scr-fx-line.a { top: calc(72% - 40px); } #ui .scr-fx.show .scr-fx-line.b { top: calc(72% + 39px); }
#ui .scr-fx.show :is(.scr-fx-band, .scr-fx-line, .scr-fx-title, .scr-fx-sub) { animation-duration: 1.9s; }   /* 무대 = FX_MS + 500 */
#ui .scr-fx-delta { position: absolute; left: 0; right: 0; top: calc(72% + 47px); text-align: center; font-size: 11px; line-height: 16px; font-weight: 800; color: #e6e1d4; text-shadow: 0 1px 2px #000; white-space: nowrap; animation: scr-sub 1.9s ease-out both; }
#ui .scr-fx-delta i { margin: 0 3px; font-style: normal; color: var(--ink-soft, #9a9d98); }
#ui .scr-fx-delta b { font-size: 13px; color: #66ffff; text-shadow: 0 0 8px rgba(102, 255, 255, .55), 0 1px 2px #000; }

/* ---- 연출(scroll.js scrGo · scrRegen · scrFx 시간표). 빛 알갱이 = 캔버스 .scr-cv */
#ui .scr .scr-cv { position: absolute; left: -120px; top: -120px; width: calc(100% + 240px); height: calc(100% + 240px); z-index: 4; pointer-events: none; }   /* 창 둘레 120 더 — 불티가 창 테에서 잘리지 않게(scroll.js CV_PAD) */
/* 기 모음: 주문서가 타는 동안 대상 칸 떨림이 1 → 3 px 로 커지고 빛이 차오른다(길이 = --charge) · 결과 직전 멈칫(freeze) */
#ui .scr .scr-stage.charging .scr-target { animation: scr-charge var(--charge, .5s) ease-in both; }
#ui .scr .scr-target.freeze { animation-play-state: paused !important; }
/* 두근 두 번(확률 30% 이하 = +3 · +5, scroll.js BEAT 420): 결과 직전 기대 — 조사 "대성공은 판정 전 늦추고 박동 2회" */
#ui .scr .scr-stage .scr-target.beat { animation: scr-beat .42s ease-in-out both; }
@keyframes scr-beat { 0%, 50%, 100% { transform: scale(1); filter: brightness(1.3); } 22%, 72% { transform: scale(1.14); filter: brightness(1.9) drop-shadow(0 0 10px rgba(255, 236, 170, .9)); } }
#ui .scr .scr-target.hit-success { animation: scr-hit .5s cubic-bezier(.2, .9, .3, 1.4) both; }
#ui .scr .scr-target.hit-fail { animation: scr-sink .7s ease-out both; }
#ui .scr .scr-target.hit-regen { animation: scr-hit-r .5s ease-out both; }
#ui .scr .scr-body.quake { animation: scr-quake .32s linear; }
#ui .scr .scr-body.quake-s { animation: scr-quake-s .25s linear; }

/* 결과 한 겹(창 전체, 누르면 걷힘): 번쩍 · 가운데 띠 · 빛선 · 도장 글자 */
/* 창 밖으로 넘쳐도 자르지 않는다(10-23 사용자 "연출이 짤리고 있잖아" — 대상 칸이 창 왼쪽 끝이라 빛 고리 지름 208 · 빛기둥 260 이 창 테에서 잘렸다). 번쩍 · 띠는 inset 0 이라 창 안 그대로 */
#ui .scr-fx { position: absolute; inset: 0; z-index: 5; pointer-events: auto; overflow: visible; }
#ui .scr-fx .scr-flash { position: absolute; inset: 0; background: #fff; opacity: 0; animation: scr-flash .14s ease-out both; }
#ui .scr-fx.k-regen .scr-flash { background: #c9fbe9; }
#ui .scr-fx.k-fail .scr-flash { background: #000; animation: scr-dark .5s ease-out both; }
/* 대상 칸 자리: 빛기둥(성공) · 빛 고리(성공 · 재생) — 실패는 없음 */
#ui .scr-fx-at { position: absolute; width: 0; height: 0; }
#ui .scr-fx .pillar { position: absolute; left: -26px; bottom: -30px; width: 52px; height: 260px; border-radius: 26px; transform-origin: 50% 100%;
  background: linear-gradient(to top, rgba(255, 236, 170, 0), rgba(255, 236, 170, .75) 25%, rgba(255, 255, 255, 0)); filter: blur(4px); animation: scr-pillar .9s ease-out both; }
#ui .scr-fx .ring { position: absolute; left: -40px; top: -40px; width: 80px; height: 80px; border-radius: 50%; border: 3px solid rgba(255, 240, 190, .9); animation: scr-ring .55s ease-out both; }
#ui .scr-fx.k-regen .pillar { display: none; } #ui .scr-fx.k-regen .ring { border-color: rgba(160, 240, 205, .9); }
#ui .scr-fx.k-fail .scr-fx-at { display: none; }
/* 빛 그림(scroll.js scrBloom — lvup_fx 칸)이 풀렸으면 CSS 빛기둥 · 고리를 끄고, 창 전체 흰 번쩍을 약하게(조사: 화면 전체 번쩍 = 촌스러움 · 빛은 칸 자리에서) */
#ui .scr-fx.spr .scr-fx-at { display: none; }
#ui .scr-fx.spr:not(.k-fail) .scr-flash { animation-name: scr-flash-s; }
@keyframes scr-flash-s { 0% { opacity: .16; } 100% { opacity: 0; } }
#ui .scr-fx.r-potUp .pillar { background: linear-gradient(to top, transparent, color-mix(in srgb, var(--rc, #ffe7a0) 80%, transparent) 25%, transparent); }
#ui .scr-fx.r-potUp .ring { border-color: var(--rc, #ffe7a0); } #ui .scr-fx.r-potUp .scr-fx-sub { color: color-mix(in srgb, var(--rc, #7ad26a) 60%, #fff); }
/* 띠 80(빛선 ±40) 안에 제목 38(−33~+5) · 부제 18(+9~+27) — 10-24 사용자 "힘 +1 써져 있는 게 삐죽 나오고 있잖아": 띠 64 에 부제가 +14~+32 라 아래 빛선(+31)을 밟았다 */
#ui .scr-fx-band { position: absolute; left: 0; right: 0; top: 50%; height: 80px; margin-top: -40px;
  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, .62) 22%, rgba(0, 0, 0, .62) 78%, transparent); animation: scr-band 1.4s ease-out both; }
#ui .scr-fx-line { position: absolute; left: 18%; right: 18%; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 238, 190, .9), transparent); animation: scr-line 1.4s ease-out both; }
#ui .scr-fx-line.a { top: calc(50% - 40px); } #ui .scr-fx-line.b { top: calc(50% + 39px); }
#ui .scr-fx.k-fail .scr-fx-line { background: linear-gradient(90deg, transparent, rgba(200, 200, 200, .55), transparent); }
#ui .scr-fx.k-regen .scr-fx-line { background: linear-gradient(90deg, transparent, rgba(170, 245, 215, .9), transparent); }
#ui .scr-fx-title { position: absolute; left: 0; right: 0; top: 50%; margin-top: -33px; text-align: center; font-family: "EnhTitle", "GFUIFont", sans-serif;
  font-size: 32px; font-weight: 900; line-height: 38px; letter-spacing: 2px; white-space: nowrap; color: #fbf3df; text-shadow: 0 0 10px rgba(255, 226, 150, .65), 0 2px 3px #000; animation: scr-stamp 1.4s ease-out both; }
#ui .scr-fx-title:not(.serif) { font-family: "GFUIFont", sans-serif; letter-spacing: 3px; }
#ui .scr-fx.k-fail .scr-fx-title { color: #d9d4ca; text-shadow: 0 2px 3px #000; animation-name: scr-stamp-f; }
#ui .scr-fx.k-regen .scr-fx-title { text-shadow: 0 0 10px rgba(140, 240, 200, .6), 0 2px 3px #000; }
#ui .scr-fx-sub { position: absolute; left: 0; right: 0; top: 50%; margin-top: 9px; text-align: center; font-size: 13px; line-height: 18px; font-weight: 800; color: #7ad26a; text-shadow: 0 1px 2px #000; animation: scr-sub 1.4s ease-out both; }
#ui .scr-fx.k-fail .scr-fx-sub { color: var(--ink-soft); }
#ui .scr-fx.k-regen .scr-fx-sub { color: #9ff0d2; }
#ui .scr-fx.r-bonus .scr-fx-line { background: linear-gradient(90deg, transparent, rgba(204, 255, 0, .8), transparent); }

@keyframes scr-charge { 0% { transform: none; filter: none; } 20% { transform: translate(-1px, 0); } 35% { transform: translate(1px, -1px); } 50% { transform: translate(-1.5px, 1px); }
  65% { transform: translate(2px, 0); } 78% { transform: translate(-2.5px, -1px); } 90% { transform: translate(3px, 1px); } 100% { transform: translate(-3px, 0); filter: brightness(1.7) drop-shadow(0 0 12px rgba(255, 236, 170, .95)); } }
@keyframes scr-hit { 0% { transform: scale(1); filter: brightness(2.2); } 35% { transform: scale(1.18); filter: brightness(1.4); } 100% { transform: scale(1); filter: none; } }
@keyframes scr-hit-r { 0% { transform: scale(1); filter: brightness(1.8); } 40% { transform: scale(1.1); } 100% { transform: scale(1); filter: none; } }
@keyframes scr-sink { 0% { filter: grayscale(.9) brightness(.6); transform: translate(-3px, 2px); } 12% { transform: translate(3px, 2px); } 24% { transform: translate(-2px, 2px); } 36% { transform: translate(1px, 1px); }
  60% { filter: grayscale(.9) brightness(.7); transform: none; } 100% { filter: none; transform: none; } }
@keyframes scr-quake { 0%, 100% { transform: none; } 15% { transform: translate(-4px, 2px); } 30% { transform: translate(4px, -2px); } 45% { transform: translate(-3px, -1px); } 60% { transform: translate(3px, 1px); } 80% { transform: translate(-1px, 0); } }
@keyframes scr-quake-s { 0%, 100% { transform: none; } 20% { transform: translateX(-3px); } 45% { transform: translateX(3px); } 70% { transform: translateX(-2px); } }
@keyframes scr-hot { 0%, 100% { opacity: 0; } 50% { opacity: 1; } }
@keyframes scr-nope { 0%, 100% { transform: none; } 25% { transform: translateX(-3px); } 50% { transform: translateX(3px); } 75% { transform: translateX(-2px); } }
@keyframes scr-pillar { 0% { transform: scaleY(0); opacity: 0; } 25% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1.1); opacity: 0; } }
@keyframes scr-ring { 0% { transform: scale(.3); opacity: 1; } 100% { transform: scale(2.6); opacity: 0; } }
@keyframes scr-flash { 0% { opacity: .55; } 100% { opacity: 0; } }
@keyframes scr-dark { 0% { opacity: .35; } 100% { opacity: 0; } }
@keyframes scr-band { 0% { transform: scaleY(0); opacity: 0; } 10% { transform: scaleY(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scr-line { 0% { transform: scaleX(0); opacity: 0; } 15% { transform: scaleX(1); opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }
@keyframes scr-stamp { 0% { transform: scale(2.2); opacity: 0; filter: blur(6px); } 16% { transform: scale(1); opacity: 1; filter: none; } 21% { transform: scale(1.06); } 26% { transform: scale(1); } 80% { transform: none; opacity: 1; } 100% { transform: translateY(-8px); opacity: 0; } }
@keyframes scr-stamp-f { 0% { transform: scale(1.4); opacity: 0; } 13% { transform: scale(1); opacity: 1; } 18% { transform: translateX(-3px); } 23% { transform: translateX(3px); } 28% { transform: none; } 80% { opacity: 1; } 100% { transform: translateY(6px); opacity: 0; } }
@keyframes scr-sub { 0%, 18% { opacity: 0; transform: translateY(6px); } 30% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* 물품 창 상세 [강화](scroll.js scrDetailButton): 판 247.5 안에 [사용][강화][장착] 셋 — 셋일 때만 최소 폭 84 → 70(3 × 70 + 간격 12 = 222) */
#ui .inv .inv-actions:has(.inv-scroll:not([hidden])) .btn { min-width: 70px; }

/* 옛 강화 +n 끄기(LANES G6 "새 창이 sandbox 에서 돈 뒤 마지막 커밋에서 끈다"): 상세 [정보|강화] 탭의 [강화] 를 숨기고 정보 판에 고정(scroll.js refreshed).
   잠금 단추 · enh.* 문구 · 서버 rt-battle.bag.enhance 는 그대로(옛 판 클라이언트 · 이미 붙은 +n 표시) */
#ui .detail-pane > .enh-tabs [data-enh-tab="enh"] { display: none; }

/* 복구 빠른 결과(scroll.js scrRegen · scrFx quick — 10-24 사용자 "복구 주문서는 yes no 하지 말고, 연출도 빠르게 넘겨 · 여러 개 써야 하는 거다 보니까"):
   누름 → 툴팁 칸 흰빛 맥박(서버 답까지, 재설정 창 상자와 같은 결) → 칸 위로 "복구 성공 / 실패" 한 줄이 떠올라 0.9 초에 걷힘. 띠 · 번쩍 · 흔들림 없음, 눌림을 막지 않는다 */
#ui .scr .scr-target.rolling { box-shadow: 0 0 0 1px #fff, 0 0 12px rgba(255, 255, 255, .8); animation: scr-tglow .3s ease-in-out infinite alternate; }
@keyframes scr-tglow { from { filter: brightness(1.25); } to { filter: brightness(1.8); } }
#ui .scr-fx.quick { pointer-events: none; }
#ui .scr-fx.quick :is(.scr-flash, .scr-fx-band, .scr-fx-line, .scr-fx-at) { display: none; }
#ui .scr-fx.quick :is(.scr-fx-title, .scr-fx-sub) { right: auto; width: 180px; margin-left: -90px; }   /* left · top = 오른쪽 빈 칸 가운데(scroll.js) */
#ui .scr-fx.quick .scr-fx-title { margin-top: -16px; font-size: 17px; line-height: 20px; letter-spacing: 1px; animation: scr-quick .9s cubic-bezier(.2, .9, .3, 1) both; }   /* 17 = 창 제목 최대(hq-ui) */
#ui .scr-fx.quick .scr-fx-sub { margin-top: 6px; font-size: 10px; line-height: 13px; animation: scr-quick .9s cubic-bezier(.2, .9, .3, 1) .04s both; }
#ui .scr-fx.quick.k-fail .scr-fx-title { color: #c9c4ba; }
@keyframes scr-quick { 0% { transform: translateY(8px) scale(.85); opacity: 0; } 18% { transform: none; opacity: 1; } 70% { opacity: 1; } 100% { transform: translateY(-10px); opacity: 0; } }
#ui .scr .scr-left.fx-new { animation: scr-left-new .6s ease-out both; }
@keyframes scr-left-new { 0% { color: #fff; text-shadow: 0 0 8px #5fe0b4; } 100% { text-shadow: none; } }

/* 추가옵션 재설정 좋은 결과(scroll.js scrBonusGood — 10-24 사용자 "추가옵션도 좋은 거 나오면 좀 이쁜 연출"): 1추 · 2추 줄 = 단계색 빛줄이 왼쪽 → 오른쪽으로 훑고(차례 70 ms)
   글자가 단계색으로 한 번 빛남 · 숫자 칸이 1.35 배로 튐(도깨비 보상 칸 팝 420 ms 결). 상자 테 번쩍 = 잠재 등급 오름 .up(--rc = 가장 좋은 단계색) */
#ui .scr .scr-cube .scr-bonus .ic-line.b.good { overflow: visible; border-radius: 2px; background: linear-gradient(100deg, transparent 35%, color-mix(in srgb, var(--cc) 50%, transparent) 46%, rgba(255, 255, 255, .75) 50%,
  color-mix(in srgb, var(--cc) 50%, transparent) 54%, transparent 65%) no-repeat; background-size: 300% 100%; animation: scr-good-line .9s ease-out both; animation-delay: calc(var(--i, 0) * 70ms); }
#ui .scr .scr-cube .scr-bonus .ic-line.b.good .chu { animation: scr-chu-pop .42s cubic-bezier(.2, .9, .3, 1.5) both; animation-delay: calc(var(--i, 0) * 70ms + .12s); }
@keyframes scr-good-line { 0% { background-position: 100% 0; } 45% { text-shadow: 0 0 8px var(--cc), 0 0 2px #fff; } 100% { background-position: 0 0; text-shadow: none; } }
@keyframes scr-chu-pop { 0% { transform: scale(1); } 40% { transform: scale(1.35); box-shadow: 0 0 10px var(--cc), inset 0 0 0 1px #fff; } 100% { transform: scale(1); } }

/* 확률표(10-24 사용자 "추가옵션 확률표 같은 거 싹 보여 줘야 … 잠재옵션도 ? 버튼 하나 만들어서 팝업으로"): ? = 둥근 14 알약(글자색 테 — hq-ui 흰 선 아이콘 결) ·
   판 = 재설정 창과 같은 작은 팝업 판(위 공통 모서리) 폭 300 · 높이 = 강화 창 안(스크롤) · 글자 = 아이템 정보 카드 줄 8.5 · 표 = 넥슨 확률 안내 표 결(머리 줄 · 오른쪽 맞춤 숫자 · 줄무늬) */
#ui .scr .scr-q { flex: none; display: inline-grid; place-items: center; width: 14px; height: 14px; margin-left: 3px; padding: 0; border: 0; border-radius: 50%; font-family: inherit; font-size: 9px; font-weight: 900; line-height: 1; color: var(--ink);
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45); cursor: pointer; transition: transform .06s; }
#ui .scr .scr-q:active { transform: scale(.92); }
#ui .scr .scr-rate .scr-q { margin-left: 0; vertical-align: 1px; }   /* 확률 숫자 바로 뒤 */
#ui .scr .scr-rate.odds { justify-content: flex-end; column-gap: 4px; font-size: 8.5px; }
#ui .scr .scr-odds { position: absolute; inset: 0; z-index: 4; display: flex; align-items: center; justify-content: center; padding: 7px 0; border-radius: 12px; background: rgba(0, 0, 0, .55); }   /* flex + 높이 정해진 층 = 판 max-height 100% 가 먹는다(grid 자동 줄에서는 안 먹어 판이 창 밖으로 622) */
#ui .scr .scr-odds[hidden] { display: none; }
#ui .scr .scr-odds-in { width: 300px; max-height: 100%; }
#ui .scr .scr-odds-in.pop { animation: fx-pop .283s cubic-bezier(.2, .9, .3, 1.1) both; }
#ui .scr .scr-odds-in .scr-chead { justify-content: center; }
#ui .scr .odds-body { position: relative; z-index: 2; min-height: 0; flex: 1 1 auto; margin: 6px -4px 0; padding: 0 7px 2px 4px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, .25) transparent; }
#ui .scr .scr-odds-in > .scr-btns { position: relative; z-index: 2; justify-content: center; margin-top: 7px; }
#ui .scr .odds-sec { display: flex; align-items: center; gap: 6px; margin: 7px 0 3px; font-size: 8.5px; font-weight: 900; color: #e8d6aa; }
#ui .scr .odds-sec:first-child { margin-top: 0; }
#ui .scr .odds-sec::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(232, 214, 170, .35), transparent); }
#ui .scr .odds-row { display: grid; grid-template-columns: 34px 1fr 44px; align-items: center; gap: 6px; height: 13px; font-size: 8.5px; font-weight: 700; color: var(--ink); }
#ui .scr .odds-row b, #ui .scr .odds-grid b { font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
#ui .scr .odds-bar { position: relative; height: 5px; border-radius: 3px; background: rgba(255, 255, 255, .08); overflow: hidden; }
#ui .scr .odds-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--p); border-radius: 3px; background: linear-gradient(90deg, #548f8c, #83c3bf); }   /* 결정 청록(.btn.gold) */
#ui .scr .odds-grid { display: grid; grid-template-columns: 1fr repeat(var(--cols), 46px); column-gap: 4px; font-size: 8.5px; font-weight: 700; line-height: 13px; color: var(--ink); }
#ui .scr .odds-grid.opt { grid-template-columns: minmax(0, 1fr) repeat(var(--cols), 42px); }
#ui .scr .odds-grid > * { min-width: 0; padding: 0 2px; white-space: nowrap; overflow: hidden; text-overflow: clip; }   /* 넘치면 "…" 대신 전광판(scroll.js scrMarquee → ui_fx, 10-24 "이렇게 길면 안 됨 전광판 효과") — 1.5px 미만은 그냥 자름 */
#ui .scr .odds-grid > .h { position: sticky; top: 0; z-index: 1; padding-bottom: 1px; font-size: 8px; font-weight: 800; text-align: right; color: var(--ink-soft); background: #202426; box-shadow: 0 1px rgba(255, 255, 255, .08); }
#ui .scr .odds-grid > .l { text-align: left; }
#ui .scr .odds-grid > .me { color: #9fe3dc; } #ui .scr .odds-grid > .h.me { color: #cfeeea; }   /* 이 장비 · 고른 주문서 칸 = 청록 */
#ui .scr .odds-grid > .ic-line.b { overflow: visible; }
#ui .scr .odds-grid > .up.cur { font-weight: 900; } #ui .scr .odds-grid > .up.cur::after { content: " ◂"; color: #9fe3dc; }
#ui .scr .odds-grid > .up em { font-style: normal; }
#ui .scr .odds-chips { display: flex; flex-wrap: wrap; gap: 3px; margin: 2px 0 4px; }
#ui .scr .odds-chips button { flex: none; height: 16px; padding: 0 7px; border: 0; border-radius: 999px; font-family: inherit; font-size: 8.5px; font-weight: 800; line-height: 16px; color: var(--c, var(--ink-soft)); background: rgba(0, 0, 0, .35);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); cursor: pointer; }
#ui .scr .odds-chips button.on { color: #26221c; background: linear-gradient(#e6decd, #c7bba3); box-shadow: 0 1px 3px rgba(0, 0, 0, .45); }   /* 고른 칩 = 베이지 알약(탭 줄 결) */
#ui .scr .odds-chips button.on[style] { color: #fff; background: color-mix(in srgb, var(--c) 70%, #1b1e20); text-shadow: 0 1px 1px rgba(0, 0, 0, .5); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 80%, #fff), 0 0 6px color-mix(in srgb, var(--c) 45%, transparent); }   /* 잠재 등급 칩 = 등급색 */
#ui .scr .odds-lg { display: flex; flex-direction: column; margin: 0 0 3px; line-height: 11px; font-size: 8px; font-weight: 700; color: var(--ink-soft); }
#ui .scr .odds-lg em { font-style: normal; font-weight: 800; }
#ui .scr .odds-grid > .z { background: rgba(255, 255, 255, .04); }   /* 줄무늬(한 줄 걸러) */
#ui .scr .odds-note { margin: 6px 0 0; font-size: 7.5px; font-weight: 600; line-height: 10.5px; color: var(--ink-soft); white-space: normal; }

/* 등급 강화 주문서 · 영혼(10-24 사용자 "추가옵션탭에서 [등급 강화 주문서] … 파괴되면 바로 터지는 게 아니라 영혼 상태로 … 강화 탭에서 영혼 복구").
   파괴 확률 글자 = 위험 적갈(고품질UI 강조 색) · 영혼 = 회청 #b8c8ff(inv_fx.css 영혼 칸과 같은 값) */
#ui .scr .scr-rate small em.brk, #ui .scr .odds-grid > b.brk { font-style: normal; color: #e8836a; }
#ui .scr .scr-soul { display: flex; flex-direction: column; gap: 6px; padding: 6px 2px 0; }
#ui .scr .scr-soul-h { display: flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 900; color: #dfe6ff; text-shadow: 0 0 8px rgba(184, 200, 255, .55); }
#ui .scr .scr-soul-h::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, rgba(184, 200, 255, .45), transparent); }
#ui .scr .scr-soul p { margin: 0; font-size: 9px; font-weight: 700; line-height: 1.45; color: var(--ink-soft); }
#ui .scr .scr-soul-mat { display: flex; align-items: center; gap: 7px; padding: 5px 7px; border-radius: 6px; font-size: 9.5px; font-weight: 800; color: var(--ink);
  background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
#ui .scr .scr-soul-mat .item-cell { position: relative; flex: none; width: 30px; height: 30px; }
#ui .scr .scr-soul-mat .item-cell .icon { position: absolute; left: 4px; top: 4px; width: 22px; height: 22px; }
#ui .scr .scr-soul-mat.none { opacity: .6; }
#ui .scr-fx.r-break .scr-fx-title { color: #dfe6ff; text-shadow: 0 0 10px rgba(140, 160, 255, .8), 0 2px 3px #000; }
#ui .scr-fx.r-break .scr-fx-line { background: linear-gradient(90deg, transparent, rgba(184, 200, 255, .8), transparent); }
#ui .scr-fx.r-revive .scr-flash { background: #dfe6ff; }
#ui .scr-fx.r-revive .scr-fx-line { background: linear-gradient(90deg, transparent, rgba(184, 200, 255, .95), transparent); }
/* 등급 상승 = 잠재 등급 상승(r-potUp)과 같은 말씨 — 새 등급색 빛기둥 · 고리 · 부제 */
#ui .scr-fx.r-gradeUp .pillar { background: linear-gradient(to top, transparent, color-mix(in srgb, var(--rc, #ffe7a0) 80%, transparent) 25%, transparent); }
#ui .scr-fx.r-gradeUp .ring { border-color: var(--rc, #ffe7a0); } #ui .scr-fx.r-gradeUp .scr-fx-sub { color: color-mix(in srgb, var(--rc, #7ad26a) 60%, #fff); }