/* 물품 창 연출 · 장비 능력치 목록 · 아이템 정보 카드(2026-10-23 사용자 "인벤토리 UI/UX 가 퀄리티가 너무 낮음 · 연출도 좀 아쉽고 · 트렌드한 인기 게임 레퍼런스로").
   windows.css(04-inventory 칸 · 판 자리) · ui_fx.css 뒤에 실린다. 시점은 inv_fx.js 가 클래스로 준다. 근거:
   - 장비 8칸 격자 + 능력치 목록 = 메이플스토리 장비창 · 능력치 창(10-23 사용자 "메이플 참고") · 메이플 키우기 장비 화면(공격력 · 방어력 · 최대 HP 줄) — dokkaebi-world.md §11.9
   - 아이템 정보 = 메이플 툴팁(사용자 사진 10-23) — 착용 비교는 카드의 "증가량" 큰 숫자(옛 ▲▼ 줄 비교를 대신함)
   - 시간 값 = ui-juice README(누름 60 ms 0.92 → 뗄 때 1.06 · 칸 순차 70 ms 간격 · 420 ms 팝 · 등급 빛 1047 ms). 색 = 등급색 --gc · 초록 #7ad26a(14b-enhance 좋아짐) · 적갈 #e0705a(위험) */

/* ---------------- 장비 능력치 목록(정보 판 아래 12칸 2열 — 메이플 능력치 창 · 메이플 키우기 능력치 칸: 이름 위 작게 · 값 아래 굵게. 10-23 "정보량이 많을수록 예쁠 것") */
#ui .eq-sum .eq-row { position: relative; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 7px; border-radius: 5px; }
#ui .eq-sum .eq-row:nth-child(4n + 1), #ui .eq-sum .eq-row:nth-child(4n + 2) { background: rgba(255, 255, 255, .035); }   /* 두 칸 한 줄씩 옅은 띠(물품 상세 .odd 값의 절반) */
#ui .eq-sum .eq-row span { font-size: 10px; font-weight: 700; line-height: 12px; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .eq-sum .eq-row b { font-size: 12.5px; font-weight: 800; line-height: 14px; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; transform-origin: left center; }
#ui .eq-sum .eq-row.fx-up b { animation: inv-num .5s cubic-bezier(.2, .9, .3, 1.4); color: #7ad26a; }
#ui .eq-sum .eq-row.fx-down b { animation: inv-num .5s cubic-bezier(.2, .9, .3, 1.4); color: #e0705a; }
#ui .eq-float { position: absolute; right: 6px; bottom: 2px; font-size: 11px; font-style: normal; font-weight: 900; color: #7ad26a; pointer-events: none; text-shadow: 0 0 6px rgba(122, 210, 106, .6), 1px 1px #0008;
  animation: inv-float .9s cubic-bezier(.2, .8, .3, 1) both; }
#ui .eq-float.down { color: #e0705a; text-shadow: 0 0 6px rgba(224, 112, 90, .5), 1px 1px #0008; }

/* ---------------- 장착: 칸이 쾅 들어앉고(1.3 → 0.94 → 1) 등급색 고리가 번진다 */
#ui .equip-cell::before { content: ""; position: absolute; inset: -2px; border-radius: 10px; border: 2px solid color-mix(in srgb, var(--gc) 70%, #fff); opacity: 0; pointer-events: none; }
#ui .equip-cell.fx-equip { animation: inv-slam .42s cubic-bezier(.2, .9, .3, 1.3); z-index: 1; }
#ui .equip-cell.fx-equip::before { animation: inv-ring .55s .08s ease-out both; }
#ui .equip-cell.fx-equip .icon { animation: inv-icon .42s cubic-bezier(.2, .9, .3, 1.5); }
#ui .equip-cell.on:is(.g-epic, .g-unique, .g-legendary) { animation: inv-glow 1.047s ease-in-out infinite; }

/* ---------------- 물품 칸: 뗄 때 1.06 튕김 · 탭을 바꾸면 칸이 70 ms 간격으로 팝 · 영웅↑ 광택이 지나간다 · 고유↑ 등급 빛 맥동 */
#ui .item-cell.fx-up { animation: inv-release .18s ease-out; }
#ui .item-grid.fx-tab .item-cell:not(.off) { animation: fx-cell .3s cubic-bezier(.2, .9, .3, 1.3) both; animation-delay: calc(var(--i, 0) * 28ms); }
#ui .item-cell:is(.g-epic, .g-unique, .g-legendary):not(.off) { overflow: hidden; }
#ui .item-cell:is(.g-epic, .g-unique, .g-legendary):not(.off)::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .32), transparent); transform: skewX(-18deg); animation: inv-sheen 3.6s ease-in-out infinite; }
#ui .item-cell.g-legendary:not(.off)::after { animation-duration: 2.4s; }
#ui .item-cell:is(.g-unique, .g-legendary):not(.off):not(.on) { animation: inv-glow 1.047s ease-in-out infinite; }

/* ---------------- 아이템 정보 = 메이플 툴팁 차례(마을 상점 구매 카드 townshop.css .ts-buy .tip-* 와 같은 색 · 줄 값, 판 폭 231 이라 한 단 작게)
   10-23 사용자 "아이템 정보 위에 써져 있는데 밑에 정보 또 버튼으로 써져 있는 이유가 뭐야 — 메이플식으로 깔끔하게"(메이플 툴팁 사진): 정보 · 강화 탭 줄 없앰 → 카드가 판 이름 바로 아래.
   바인딩 칸(detail-top · detail-rows = Unity 목업 · 검사가 읽는 자리)은 남기고 웹에서는 잠금 단추만 카드 오른쪽 위에 둔다.
   색: 이름 = 등급색 · 별 #ffcc00 · 오른 능력치 줄 #66ffff · 등급 몫 #ccff00 · 강화 몫 #ffcc00 · 주문서 #aab4ff · 교환 #e8c979 · 못 맞춤 · 내려감 #ffb3a8(townshop.css 머리 주석 근거) */
#ui #inv-dim .detail-pane > .enh-tabs { display: none; }
#ui #inv-dim .detail-pane > .detail { top: 29px; height: 286px; gap: 0; }
#ui #inv-dim .detail-top:not([hidden]) { display: block; position: absolute; right: 0; top: 0; width: 26px; height: 26px; z-index: 2; }
#ui #inv-dim .detail-top > :not(.enh-lock) { display: none; }
#ui #inv-dim .detail-rows { display: none; }
/* 10-24 사용자 "경매장도 똑같이 아이템 설명 크기가 큰데 · 아이템 설명 크기 좀 정규화 좀 하자 · 매번 할아버지들 시력 안 좋아서 큼지막하게 설정해 둔 것마냥":
   아이템 정보 카드 글자 크기는 여기 하나(옛 값 1/1.35 — 이름 10 · 등급/교환 8 · 줄 8.5/11.5 · 증가량 15). 물품 창 · 경매장 · 이벤트 툴팁 · 강화 창 툴팁이 모두 이 값을 쓴다.
   화면별 파일에서 글자 크기를 다시 덮어쓰지 않는다(자리 · 너비 · 칸 크기만). 추옵 · 잠재 상자 글자도 같은 값(features/scroll/scroll.css) */
#ui .icard { --ink: #f2f0e7; --ink-soft: #9a9d98; padding: 7px 8px 8px; border-radius: 6px; color: var(--ink);
  background: linear-gradient(rgba(22, 23, 24, .78), rgba(12, 13, 14, .78)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }   /* 메이플 툴팁 무채 검은 판 + 회색 1px 테(창 판 위라 테는 옅게) */
#ui .icard > div + div { margin-top: 5px; padding-top: 5px; border-top: 1px dashed rgba(255, 255, 255, .22); }   /* 메이플 구획 점선 */
#ui .icard .ic-head { text-align: center; line-height: 1.2; padding: 0 22px; }   /* 오른쪽 위 잠금 단추 자리만큼 양옆 비움(가운데 맞춤 유지) */
#ui .icard .ic-stars { display: flex; justify-content: center; gap: 1px; margin-bottom: 2px; }
#ui .icard .ic-stars i { width: 6px; height: 6px; background: #4a4c4e; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
#ui .icard .ic-stars i.on { background: #ffcc00; }
/* 별 = 장비 등급 6칸(10-24 — 옛 강화 10칸 · 5개 묶음 대신). 켜진 별 = 메이플 별색 #ffcc00 그대로 */
#ui .icard .ic-name { font-size: 10px; font-weight: 900; text-shadow: 0 1px 2px #000; overflow-wrap: anywhere; }
#ui .icard .ic-sub { font-size: 8px; font-weight: 700; color: var(--ink-soft); }
#ui .icard .ic-sub.bound { color: #e8c979; }
#ui .icard .ic-top { position: relative; display: grid; grid-template-columns: 44px 1fr; gap: 10px; align-items: stretch; }
#ui .icard .item-cell.big { width: 44px; height: 44px; cursor: default; z-index: 1; }   /* 큰 칸 58 × 0.75(10-23 "25% 줄여야") */
#ui .icard .item-cell.big .icon { left: 6px; top: 6px; width: 29px; height: 29px; }
#ui .icard .ic-gain { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; min-width: 0; }   /* 메이플: 아이콘 오른쪽 "공격력 증가량" + 큰 숫자 + REQ LEV */
#ui .icard .ic-gain small { font-size: 7.5px; font-weight: 700; color: var(--ink-soft); }
#ui .icard .ic-gain b { font-size: 15px; font-weight: 900; line-height: 1.05; letter-spacing: -.3px; }
#ui .icard .ic-gain b.down { color: #ffb3a8; }
#ui .icard .ic-req { align-self: flex-start; margin-top: 2px; font-size: 7.5px; font-weight: 800; color: #e8c979; }
#ui .icard .ic-req::before { content: "■ "; font-size: 5px; vertical-align: 1px; }
#ui .icard .ic-req.low { color: #ffb3a8; }
#ui .icard .ic-line { font-size: 8.5px; font-weight: 700; line-height: 11.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }   /* 메이플: 능력치 당 1줄 "이름 : +값" */
#ui .icard .ic-line.up { color: #66ffff; }
#ui .icard .ic-parts { color: var(--ink); }
#ui .icard .ic-parts em { font-style: normal; } #ui .icard .ic-parts em.g { color: #ccff00; } #ui .icard .ic-parts em.e { color: #ffcc00; }
#ui .icard .ic-line.scr { color: #aab4ff; }
#ui .icard .ic-line.soft { color: var(--ink-soft); }
/* 고르면 카드 팝 · 큰 칸 튐 + 등급 빛 · 영웅↑ 빛살 · 줄 차례로 */
#ui .icard .ic-top::before { content: ""; position: absolute; left: -16px; top: 50%; width: 76px; height: 76px; margin-top: -38px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--gc, #6b7073) 55%, transparent), transparent); opacity: .7; }
#ui .icard.g-hi .ic-top::after { content: ""; position: absolute; left: -26px; top: 50%; width: 96px; height: 96px; margin-top: -48px; border-radius: 50%; pointer-events: none; mix-blend-mode: screen;
  background: repeating-conic-gradient(rgba(255, 255, 255, .7) 0 5deg, transparent 5deg 30deg);
  -webkit-mask: radial-gradient(circle, transparent 26%, #000 34%, transparent 68%); mask: radial-gradient(circle, transparent 26%, #000 34%, transparent 68%); opacity: .22; animation: fx-spin 14s linear infinite; }
#ui .icard.fx-sel { animation: fx-card-in .26s cubic-bezier(.2, .8, .3, 1) both; }   /* 카드 = 1 을 넘지 않는 등장(ui_fx.css fx-card-in) — 담은 칸이 스크롤 칸이라 커지면 잘린다(10-24) */
#ui .icard.fx-sel .item-cell.big { animation: fx-got-in .42s .04s ease-out both; }   /* 칸 튐 최대 1.12(곡선 넘침 없이 — 카드 안쪽 여백 8 안) */
#ui .icard.fx-sel .ic-top::before { animation: fx-got-pulse 1.047s ease-in-out 1; }
#ui .icard.fx-sel .ic-line { animation: fx-rise .26s ease-out both; }
#ui .icard.fx-sel .ic-line:nth-child(2) { animation-delay: .05s; } #ui .icard.fx-sel .ic-line:nth-child(3) { animation-delay: .1s; } #ui .icard.fx-sel .ic-line:nth-child(4) { animation-delay: .15s; }
#ui .icard.fx-sel .ic-line:nth-child(n + 5) { animation-delay: .2s; }

@keyframes inv-num { 0% { transform: scale(1); } 35% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes inv-float { 0% { opacity: 0; transform: translateY(6px) scale(.8); } 20% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-18px) scale(1); } }
@keyframes inv-slam { 0% { transform: scale(1.3); filter: brightness(1.8); } 55% { transform: scale(.94); filter: brightness(1.2); } 100% { transform: scale(1); filter: none; } }
@keyframes inv-ring { 0% { opacity: .95; transform: scale(1); } 100% { opacity: 0; transform: scale(1.7); } }
@keyframes inv-icon { 0% { transform: translateY(-14px) scale(1.25); opacity: 0; } 60% { transform: translateY(1px) scale(.96); opacity: 1; } 100% { transform: none; } }
@keyframes inv-glow { 0%, 100% { box-shadow: inset 0 -12px 14px -10px color-mix(in srgb, var(--gc) 85%, #fff), inset 0 1px rgba(255, 255, 255, .22), 0 0 3px color-mix(in srgb, var(--gc) 45%, transparent); }
  50% { box-shadow: inset 0 -12px 14px -10px color-mix(in srgb, var(--gc) 85%, #fff), inset 0 1px rgba(255, 255, 255, .22), 0 0 10px color-mix(in srgb, var(--gc) 75%, transparent); } }
@keyframes inv-release { 0% { transform: scale(.92); } 60% { transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes inv-sheen { 0%, 62% { left: -60%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { #ui .item-cell::after, #ui .icard .ic-top::after { animation: none !important; } }

/* ---------------- 치장 칸(10-23 사용자 "치장 아이템도 필요하니까 EFZ 처럼 그 옆에 · 치장 아이템 슬롯은 살짝 다르게 좀 더 반짝인다거나"):
   금빛 테 + 위쪽 금빛 번짐 · 테 빛이 2.4 s 로 숨쉬고 · 빛줄기가 칸마다 엇박(0.35 s)으로 지나간다 · 빈 칸 그림 = 금빛(Codex 그림의 반짝 별 포함).
   금빛 = 전투력 띠 빛선 · 남은 점수 금빛(stats.js #ffd76a)과 같은 계열 — 장비 칸(무채색)과 한눈에 갈리게 */
#ui .cos-slots .equip-cell { overflow: hidden; border-color: rgba(232, 207, 138, .5); background: radial-gradient(90% 70% at 50% 0%, rgba(232, 207, 138, .2), transparent 70%), rgba(0, 0, 0, .34);
  animation: cos-breathe 2.4s ease-in-out infinite; animation-delay: calc(var(--k, 0) * -.6s); }
#ui .cos-slots .equip-cell:nth-child(2) { --k: 1; } #ui .cos-slots .equip-cell:nth-child(3) { --k: 2; } #ui .cos-slots .equip-cell:nth-child(4) { --k: 3; }
#ui .cos-slots .equip-cell::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 240, 200, .42), transparent); transform: skewX(-18deg); animation: inv-sheen 3.6s ease-in-out infinite; animation-delay: calc(var(--k, 0) * .35s); }
#ui .cos-slots .empty-slot-icon { opacity: .55; }
#ui .cos-slots .empty-slot-icon::before { background: #e8cf8a; }
@keyframes cos-breathe { 0%, 100% { box-shadow: inset 0 0 6px rgba(232, 207, 138, .14), 0 0 4px rgba(232, 207, 138, .12); } 50% { box-shadow: inset 0 0 10px rgba(232, 207, 138, .3), 0 0 9px rgba(232, 207, 138, .32); } }

/* ---------------- 전투력(정보 판 #inv-cp · 능력치 판 #eq-cp): 바뀌면 숫자가 굴러 가며(inv_fx.js rollCp 0.6 s) 띠가 초록 / 적갈로 번쩍 · ▲N 떠오름 */
#ui .inv-cp.fx-up b { animation: inv-num .5s cubic-bezier(.2, .9, .3, 1.4); color: #c8f5b4; }
#ui .inv-cp.fx-down b { animation: inv-num .5s cubic-bezier(.2, .9, .3, 1.4); color: #f2b3a3; }
#ui .cp-float { position: absolute; right: 18%; top: 4px; font-size: 11px; font-style: normal; font-weight: 900; color: #7ad26a; pointer-events: none; text-shadow: 0 0 6px rgba(122, 210, 106, .6), 1px 1px #0008;
  animation: inv-float 1.05s cubic-bezier(.2, .8, .3, 1) both; }
#ui .cp-float.down { color: #e0705a; text-shadow: 0 0 6px rgba(224, 112, 90, .5), 1px 1px #0008; }

/* 영혼(등급 강화 파괴 — 10-24 사용자 "파괴되면 바로 터지는 게 아니라 영혼 상태로 있고, 동일한 아이템을 재료로 부활"): 메이플 장비 파괴 흔적 결 — 그림은 빛이 빠진 회청 유령빛 + 천천히 숨 쉬는 푸른 빛.
   가방 칸(inv_fx soulCells) · 아이템 정보 큰 칸 · 강화 창 툴팁 칸이 같은 규칙. 색 #b8c8ff = 영혼 띠(scrolls.json 이 아니라 여기 하나 — 영혼은 등급색이 아니다) */
#ui .item-cell.soul .icon { filter: grayscale(1) brightness(1.25) sepia(.2) hue-rotate(180deg) opacity(.55); }
#ui .item-cell.soul::after { content: ''; position: absolute; inset: 2px; border-radius: inherit; pointer-events: none;
  background: radial-gradient(closest-side, rgba(184, 200, 255, .32), transparent 75%); animation: soul-breath 2.2s ease-in-out infinite; }
@keyframes soul-breath { 0%, 100% { opacity: .35; transform: translateY(1px); } 50% { opacity: .9; transform: translateY(-1px); } }
#ui .icard .ic-soul { display: table; margin: 3px auto 0; padding: 1px 7px; border-radius: 8px; font-size: 8px; font-weight: 700; letter-spacing: .02em;
  color: #dfe6ff; background: rgba(120, 140, 220, .22); box-shadow: inset 0 0 0 1px rgba(184, 200, 255, .45); }
@media (prefers-reduced-motion: reduce) { #ui .item-cell.soul::after { animation: none; opacity: .6; } }
/* 판매 [자동 선택](auto_sell.js): 전부 골라진 동안 = 판매 단추 일괄 모드와 같은 금 테 */
#ui .inv-foot .inv-pickall.on { filter: brightness(1.12); box-shadow: 0 0 0 2px #ffd36b, 0 0 8px 1px rgba(255, 211, 107, .5); }
/* 자동판매(autosell_win.js): 아래 줄 단추(켜짐 = 청록 점) + 작은 팝업(18-popup-dark 판 · 설정 창 값: 폭 330 · 제목 15 · 줄 34 · 알약 24 · 단추 28 · 글자 11~12) */
/* 자동판매 설정 = [판매] 바로 오른쪽 톱니 단추(HUD 설정과 같은 흰 아이콘 · 아이콘 18 · 단추 30 원) · 켜짐 = 청록 점 */
#ui .inv-foot:has(#inv-asell) { justify-content: flex-start; }
#ui .inv-foot:has(#inv-asell) #inv-sell { margin-left: auto; }
#ui .inv-foot .inv-asell { position: relative; flex: none; width: 30px; height: 30px; margin-left: -2px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); transition: transform 60ms, background .15s; }
#ui .inv-foot .inv-asell img { width: 18px; height: 18px; pointer-events: none; opacity: .92; }
#ui .inv-foot .inv-asell:active { transform: scale(.92); background: rgba(255, 255, 255, .16); }
#ui .inv-foot .inv-asell .as-dot { position: absolute; right: 1px; top: 1px; width: 7px; height: 7px; border-radius: 50%; background: transparent; }
#ui .inv-foot .inv-asell.on .as-dot { background: #83c3bf; box-shadow: 0 0 6px #83c3bf; }
#ui .popup.asell { width: 330px; padding: 16px 18px 16px; }
#ui .popup.asell .asell-h { margin: 0 0 8px; font-size: 15px; text-align: center; color: var(--ink); }
#ui .popup.asell .as-row { display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 4px 0; border-bottom: 1px solid rgba(255, 255, 255, .07); }
#ui .popup.asell .as-k { flex: none; width: 66px; font-size: 11.5px; color: var(--ink-soft); }
#ui .popup.asell .as-pills { display: flex; flex-wrap: wrap; gap: 4px; }
#ui .popup.asell .as-pill { flex: none; height: 24px; padding: 0 9px; border: 0; border-radius: 12px; font-size: 11px; color: var(--ink); background: rgba(255, 255, 255, .08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
#ui .popup.asell .as-pill.on { background: #e9dcc0; color: #2a2620; box-shadow: none; }
#ui .popup.asell .as-g { color: var(--gc); }
#ui .popup.asell .as-g.on { background: var(--gc); color: #15171a; }
/* 켜기 = 작은 스위치(켜짐 청록 · 꺼짐 반투명) */
#ui .popup.asell .as-sw { position: relative; flex: none; width: 40px; height: 22px; margin-left: auto; border: 0; border-radius: 11px; background: rgba(255, 255, 255, .14); transition: background .18s; }
#ui .popup.asell .as-sw i { position: absolute; left: 3px; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: #f2f0e7; transition: transform .18s cubic-bezier(.3, 1.4, .6, 1); }
#ui .popup.asell .as-sw.on { background: #548f8c; }
#ui .popup.asell .as-sw.on i { transform: translateX(18px); }
/* 착용 레벨 범위 슬라이더(손잡이 둘): 회색 줄 + 고른 구간 청록(결정색) · 눈금 = 착용 레벨 표, 50 단위 · 양 끝만 숫자 · 위 오른쪽 범위 글자 */
#ui .popup.asell .as-lvh { border-bottom: 0; }
#ui .popup.asell .as-range { margin-left: auto; font-size: 13px; font-weight: 800; color: #9fd6d2; letter-spacing: .2px; }
#ui .popup.asell .as-slider { position: relative; height: 40px; margin: 0 9px 4px; touch-action: none; cursor: pointer; border-bottom: 0; }
#ui .popup.asell .as-track, #ui .popup.asell .as-fill { position: absolute; top: 9px; height: 4px; border-radius: 2px; pointer-events: none; }
#ui .popup.asell .as-track { left: 0; right: 0; background: rgba(255, 255, 255, .14); }
#ui .popup.asell .as-fill { left: var(--lo); width: calc(var(--hi) - var(--lo)); background: #548f8c; box-shadow: 0 0 6px rgba(131, 195, 191, .45); }
#ui .popup.asell .as-tick { position: absolute; top: 17px; width: 1px; height: 4px; margin-left: -.5px; background: rgba(255, 255, 255, .22); }
#ui .popup.asell .as-tick.big { height: 6px; }
#ui .popup.asell .as-tick.in { background: rgba(159, 214, 210, .7); }
#ui .popup.asell .as-tick b { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); font-size: 9.5px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
#ui .popup.asell .as-tick.in b { color: #cfe9e6; }
#ui .popup.asell .as-tick::after { content: ''; position: absolute; left: -7px; right: -7px; top: -14px; bottom: -16px; }   /* 눈금 누르기 칸 */
#ui .popup.asell .as-knob { position: absolute; top: 2px; width: 18px; height: 18px; margin-left: -9px; border-radius: 50%; background: #f2f0e7; pointer-events: auto;
  box-shadow: 0 0 0 2px #548f8c, 0 2px 5px rgba(0, 0, 0, .45); transition: transform .12s cubic-bezier(.3, 1.4, .6, 1); }
#ui .popup.asell .as-knob[data-as-knob="0"] { left: var(--lo); }
#ui .popup.asell .as-knob[data-as-knob="1"] { left: var(--hi); }
#ui .popup.asell .as-knob::after { content: ''; position: absolute; inset: -10px; }   /* 손가락 칸 38 */
#ui .popup.asell .as-slider.drag[data-k="0"] .as-knob[data-as-knob="0"], #ui .popup.asell .as-slider.drag[data-k="1"] .as-knob[data-as-knob="1"] { transform: scale(1.18); box-shadow: 0 0 0 2px #83c3bf, 0 0 10px rgba(131, 195, 191, .7); }
#ui .popup.asell .as-btns { display: flex; justify-content: flex-end; gap: 6px; margin-top: 12px; }
#ui .popup.asell .as-btns .btn { flex: none; min-height: 0; height: 28px; padding: 0 14px; font-size: 12px; }
#ui .popup.asell .as-pill { transition: transform 60ms, background .15s; }
#ui .popup.asell .as-pill:active, #ui .popup.asell .as-sw:active { transform: scale(.92); }
/* 판매 확인 창(sell_confirm.js): 작은 팝업 어두운 판(18-popup-dark) · 폭 300 · 제목 15 · 팔 장비 칸 36(물품 창 칸 39 결 — 등급색 안쪽 테 · 아래 빛) ·
   얻는 것 = 퀘스트 · 보스 보상 칸(qr-cell big 52, 누르면 아이템 정보) · 단추 = 글자 폭 알약 28(취소 보조 · 판매 위험 적갈) · 칸은 70 ms 간격으로 팝 */
#ui .popup.sellc { width: 300px; padding: 16px 18px 16px; text-align: center; }
#ui .popup.sellc .sc-h { margin: 0 0 10px; font-size: 15px; color: var(--ink); }
#ui .popup.sellc .sc-k { font-size: 11.5px; color: var(--ink-soft); margin-bottom: 6px; }
#ui .popup.sellc .sc-items { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; max-width: 246px; margin: 0 auto; }
#ui .popup.sellc .sc-cell { position: relative; flex: none; width: 36px; height: 36px; border-radius: 6px; display: grid; place-items: center; cursor: pointer;
  background: rgba(0, 0, 0, .42); box-shadow: inset 0 0 0 1px var(--gc), inset 0 -9px 11px -8px var(--gc); animation: qr-pop .42s cubic-bezier(.3, 1.4, .6, 1) both; animation-delay: calc(var(--i) * 70ms); }
#ui .popup.sellc .sc-cell img { width: 24px; height: 24px; object-fit: contain; image-rendering: pixelated; pointer-events: none; }
#ui .popup.sellc .sc-cell em { position: absolute; right: 2px; top: 0; font-style: normal; font-size: 8.5px; font-weight: 900; color: #ffd36b; text-shadow: 0 1px 2px #000; }
#ui .popup.sellc .sc-more { --gc: rgba(255, 255, 255, .25); font-size: 11px; font-weight: 800; color: var(--ink-soft); cursor: default; }
/* 위 칸 → 얻는 것 사이: 가는 빛선 + 가운데 아래 화살표(흐름 = 판다 → 얻는다) */
#ui .popup.sellc .sc-get { position: relative; margin: 14px 0 8px; padding-top: 14px; }
#ui .popup.sellc .sc-get::before { content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .22), transparent); }
#ui .popup.sellc .sc-get::after { content: ''; position: absolute; left: 50%; top: -5px; width: 8px; height: 8px; margin-left: -4px; transform: rotate(45deg);
  background: #1f2325; box-shadow: 1px 1px 0 rgba(255, 255, 255, .28); }
#ui .popup.sellc .sc-gets { display: flex; justify-content: center; gap: 10px; }
#ui .popup.sellc .sc-gets .qr-cell { cursor: pointer; }
#ui .popup.sellc .sc-btns { display: flex; justify-content: center; gap: 8px; margin-top: 16px; }
#ui .popup.sellc .sc-btns .btn { flex: none; min-width: 76px; min-height: 0; height: 28px; padding: 0 16px; font-size: 12px; }
#ui .popup.sellc .sc-gets .qr-cell { animation-delay: calc(260ms + var(--i, 0) * 90ms); }   /* 팔 칸이 다 뜬 뒤 얻는 칸 */