/* 마을 무기 · 방어구 상점 창(하이랜드 P1-C · LANES G7, DESIGN §4.9 · 2026-10-23 사용자 "메이플스토리처럼 마을 무기 상인 · 방어구 상인"). 판 · 머리 띠 · 탭 · 알약 = 공용 .popup.full(windows-css 01-popup).
   여기는 차이만(고품질UI: GUI 450 기준 아이콘 40 · 칸 52 · 제목 17 · 알약 28 · 탭 줄 30 · 단추 = 글자 폭, 고른 것은 크기 대신 베이지 알약 · 흰 빛 테).
   배치 = 메이플 NPC 상점 줄 목록(아이콘 칸 + 이름 + 값) + 도깨비의 세계 §9 탭 줄 · §10 등급색 칸. 넓은 화면은 줄을 키우지 않고 열 수를 늘린다(열 최소 232).
   색 = 등급색(키트 칸) · 금(지갑 골드 #e8c979, 01-popup) · 붉은 값(모자람 #ffb3a8, scroll.css 와 같은 값) · 결정 청록(.btn.gold) · 귀속 표시 = 적갈(위험 #a64646 계열). */
#ui .popup.full.tshop > .popup-head > h2::before { -webkit-mask-image: url(../../assets/icons/menu-shop.png); mask-image: url(../../assets/icons/menu-shop.png); }
/* 거르기 한 줄(10-23 사용자 "필터를 한 줄에 · 공간 활용"): 계열 알약(왼쪽) ↔ 레벨 알약(오른쪽). 좁으면 계열 줄만 손가락으로 옆 끌기(줄바꿈 없음).
   판매 = 머리 띠 지갑 옆 글자 폭 알약(탭 줄 없앰) — 판매 목록일 때는 청록(.gold) [구매]. */
#ui .tshop .ts-bar { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
#ui .tshop .ts-bar .tabs { flex: none; height: 30px; }
#ui .tshop .ts-bar .ts-fams { flex: 0 1 auto; min-width: 0; overflow-x: auto; scrollbar-width: none; }
#ui .tshop .ts-bar .ts-fams::-webkit-scrollbar { display: none; }
#ui .tshop .ts-bar .ts-fams .tab { flex: none; }
#ui .popup.full.tshop > .popup-head > .ts-mode { margin-left: auto; min-height: 28px; height: 28px; padding: 0 16px; }
#ui .popup.full.tshop > .popup-head > .win-wallet { margin-left: 12px; }
#ui .tshop .ts-bands .tab, #ui .tshop .ts-fams .tab { min-width: 0; padding: 0 12px; font-size: 12px; }
#ui .tshop .ts-bands .tab.mine:not(.on) { color: var(--ink); box-shadow: inset 0 -2px 0 #d9b45a; }   /* 내 레벨이 든 칸 = 금 밑줄(경매장 탭 밑줄 결, 고품질UI §3) */
/* 줄 목록: 줄 높이 60 = 칸 52 + 위아래 4. 폰 가로 GUI 폭 ≈ 1000 → 4열, PC 16:9 ≈ 800 → 3열 */
#ui .tshop .ts-list { flex: 1; min-height: 0; overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 6px; align-content: start;
  padding: 6px; border-radius: 10px; background: rgba(0, 0, 0, .22); }
#ui .tshop .ts-row { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; height: 60px; padding: 0 12px 0 4px; border: 0; border-radius: 8px; text-align: left;
  color: var(--ink); background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); cursor: pointer; transition: transform .06s, background .15s; }
#ui .tshop .ts-row:hover { background: rgba(255, 255, 255, .08); }
#ui .tshop .ts-row:active { transform: scale(.97); }   /* 누름(ui-juice 0.92 는 칸 기준 — 넓은 줄은 .97) */
#ui .tshop .ts-row.off { opacity: .55; }
#ui .tshop .ts-row .item-cell { cursor: inherit; }
#ui .tshop .ts-row .item-cell .icon { left: 4px; top: 4px; width: 40px; height: 40px; }   /* 아이콘 40(고품질UI §1) */
#ui .tshop .ts-txt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
#ui .tshop .ts-txt b { font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .tshop .ts-txt small { font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#ui .tshop .ts-txt em { font-style: normal; color: var(--ink); }
#ui .tshop .ts-txt em.low { color: #ffb3a8; }   /* 착용 레벨이 내 레벨보다 높음 */
#ui .tshop .ts-price { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 900; color: #e8c979; }
#ui .tshop .ts-price img { width: 16px; height: 16px; }
#ui .tshop .ts-price.short { color: #ffb3a8; }
#ui .tshop .ts-empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; font-size: 13px; font-weight: 800; color: var(--ink-soft); }
/* 연출: 처음 열 때 · 거르기를 바꿀 때 줄 순차 등장(ui_fx fx-cell · 칸 70 ms 결을 줄 30 ms 로 — 줄이 많아 전체 ≤ .5 s) · 판매 = 지갑 튐 + 떠오르는 +골드 */
#ui .tshop .ts-list[data-fresh] .ts-row { animation: ts-in .28s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i, 0) * 30ms); }
#ui .tshop .ts-list[data-fresh="1"] .ts-row { animation-name: ts-in2; }   /* 같은 이름이면 다시 안 돈다 — 거르기마다 이름을 바꿔 다시 */
#ui .tshop .ts-list.ts-still .ts-row { animation: none; }
#ui .tshop .ww { position: relative; }
#ui .tshop .ww.ts-bump b { animation: fx-bump .36s ease-out; }
#ui .tshop .ts-plus { position: absolute; right: 4px; top: -2px; font-size: 13px; font-weight: 900; color: #e8c979; text-shadow: 0 1px 2px #000c; pointer-events: none; animation: ts-plus .9s ease-out both; }
@keyframes ts-in { 0% { transform: translateY(8px) scale(.96); opacity: 0; } 70% { transform: scale(1.01); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ts-in2 { 0% { transform: translateY(8px) scale(.96); opacity: 0; } 70% { transform: scale(1.01); opacity: 1; } 100% { transform: none; opacity: 1; } }
@keyframes ts-plus { 0% { transform: translateY(6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(-22px); opacity: 0; } }

/* 구매 · 판매 팝업 = 공용 아이템 정보 카드(.icard — features/bag/inv_fx.css 한 벌: 이름 10 · 작은 줄 8 · 줄 8.5 · 증가량 15 · 아이콘 칸 · 별 · 색) + 값 · 단추 줄.
   10-24 사용자 "상점 아이템 상세설명은 인벤토리 · 경매장 · 강화창 아이템설명처럼 깔끔하게 처리 안 돼 있잖아 · 정규화하자고 했잖음 · 매번 다 다르게 그리면 어카냐"
   → 옛 .tip-* 카드(이름 14 · 줄 12 · 증가량 24 · 폭 288)를 지우고 물품 창 카드를 그대로 쓴다. 폭 = 물품 창 아이템 정보 칸(915 가로 화면 약 220).
   판 = 메이플 툴팁 무채 검은 반투명 판 + 회색 1px 테(10-23), 카드 자기 판은 겹치지 않게 끈다. 값 · 단추 = 카드 글자 결(능력치 탭 알약 22 · 10, stats.js). */
#ui .popup.ts-buy { --ink: #f2f0e7; --ink-soft: #9a9d98; width: 220px; padding: 4px 4px 8px; border: 0; border-image: none; border-radius: 6px; color: var(--ink);
  background: linear-gradient(rgba(22, 23, 24, .95), rgba(12, 13, 14, .95)); box-shadow: 0 0 0 1px rgba(255, 255, 255, .42), inset 0 0 0 1px rgba(0, 0, 0, .8), 0 10px 22px rgba(0, 0, 0, .55); filter: none; }
#ui .ts-buy .ts-icard { background: none; box-shadow: none; }
#ui .ts-buy .tip-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin: 0 8px; padding-top: 7px; border-top: 1px dashed rgba(255, 255, 255, .22); }   /* 카드 구획과 같은 점선 */
#ui .ts-buy .tip-price { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 900; color: #e8c979; }
#ui .ts-buy .tip-price small { margin-right: 2px; font-size: 8.5px; font-weight: 700; color: var(--ink-soft); }
#ui .ts-buy .tip-price img { width: 12px; height: 12px; }
#ui .ts-buy .tip-price b.short { color: #ffb3a8; }
#ui .ts-buy .tip-btns { display: flex; gap: 5px; }
#ui .ts-buy .btn { flex: none; min-height: 22px; height: 22px; padding: 0 10px; border: 0; border-image: none; border-radius: 999px; background: linear-gradient(#ece4d3, #c9bda6); color: #2b261e; text-shadow: none; filter: none;
  font-size: 10px; font-weight: 800; white-space: nowrap; box-shadow: inset 0 1px rgba(255, 255, 255, .35), 0 2px 4px rgba(0, 0, 0, .35); }
#ui .ts-buy .btn.gold { background: linear-gradient(#83c3bf, #548f8c); color: #fff; }
#ui .ts-buy .btn.plain { background: rgba(255, 255, 255, .12); color: var(--ink); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .16); }
#ui .ts-buy .btn.off { filter: grayscale(1); opacity: .45; }
#ui .ts-buy .ts-why { flex-basis: 100%; text-align: center; font-size: 8.5px; font-weight: 700; color: #ffb3a8; }