/* ═══ Trade Board (거래 게시판) — v2 UX Overhaul ═══ */

/* ── Category tags: color-coded by type ── */
.trade-cat { display:inline-block; padding:1px 5px; font-size:10px; font-weight:700; letter-spacing:0.3px; border:1px solid; line-height:1.4 }
.trade-cat-weapon { border-color:#E63946; color:#ff535b }
.trade-cat-armor { border-color:#3b82f6; color:#60a5fa }
.trade-cat-accessory { border-color:#a855f7; color:#c084fc }
.trade-cat-consumable { border-color:#22c55e; color:#4ade80 }
.trade-cat-material { border-color:#d97706; color:#fbbf24 }
.trade-cat-etc { border-color:#5b403f; color:#ab8987 }

/* ── Enhancement select buttons ── */
.tr-enh-btn.active { background:rgba(233,196,0,0.12); border-color:#e9c400!important; color:#ffe16d!important }

/* ── Category filter buttons ── */
.trade-category-btn { padding:4px 10px; font-size:12px; font-weight:600; color:#ab8987; background:transparent; border:1px solid #2a2a2b; cursor:pointer; transition:all .15s }
.trade-category-btn:hover { border-color:#e9c400; color:#ffe16d }
.trade-category-btn.active { background:rgba(233,196,0,0.1); border-color:#e9c400; color:#ffe16d }

/* ── Server select: prominent gold ── */
.trade-server-select { min-width:100px }
.trade-server-select option { color:#e5e2e3 }

/* ── Icon button (refresh etc) ── */
.trade-icon-btn { padding:6px; color:#ab8987; background:transparent; border:1px solid #2a2a2b; cursor:pointer; transition:all .15s; line-height:1; display:flex; align-items:center }
.trade-icon-btn:hover { border-color:#E63946; color:#e5e2e3 }
.trade-icon-btn .spinning { animation:trade-spin .6s linear }
@keyframes trade-spin { to { transform:rotate(360deg) } }

/* ── Table ── */
.trade-table-wrap { min-height:200px }
.trade-table-wrap table tbody tr { transition:background .1s; cursor:pointer }
.trade-table-wrap table tbody tr:hover { background:rgba(255,255,255,0.03) }

/* ── Header sort indicator ── */
.trade-th { transition:color .15s }
.trade-th[data-active] { color:rgba(255,255,255,0.7) }
.trade-th .sort-arrow { font-size:10px; margin-left:2px; opacity:0.5 }
.trade-th[data-active] .sort-arrow { opacity:1; color:#ffe16d }

/* ── Badges ── */
.trade-badge-new { display:inline-block; padding:0 4px; font-size:9px; font-weight:800; background:#E63946; color:white; margin-left:6px; vertical-align:middle; letter-spacing:0.5px; line-height:16px }
.trade-badge-expiring { display:inline-block; padding:0 4px; font-size:9px; font-weight:700; border:1px solid rgba(230,57,70,0.4); color:#ff535b; margin-left:6px; vertical-align:middle; line-height:14px }
.trade-badge-img { color:rgba(171,137,135,0.4); font-size:14px; margin-left:4px; vertical-align:middle }

/* ── Pagination ── */
.trade-page-btn { padding:4px 12px; font-size:13px; color:#ab8987; background:#1c1b1c; border:1px solid #2a2a2b; cursor:pointer; transition:all .15s }
.trade-page-btn:hover { border-color:#E63946; color:#e5e2e3 }
.trade-page-btn.active { background:#E63946; color:white; border-color:#E63946 }
.trade-page-btn:disabled { opacity:0.3; cursor:default; pointer-events:none }

/* ── Detail modal ── */
.trade-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.85); backdrop-filter:blur(8px); z-index:150; display:flex; align-items:center; justify-content:center; padding:20px; opacity:0; transition:opacity .2s ease }
.trade-modal-overlay.show { opacity:1 }
.trade-detail-content { background:#1c1b1c; border:1px solid #5b403f; max-width:600px; width:100%; max-height:90vh; overflow-y:auto; position:relative; transform:scale(0.95) translateY(8px); transition:transform .2s ease }
.trade-modal-overlay.show .trade-detail-content { transform:scale(1) translateY(0) }
.trade-detail-close { position:absolute; top:12px; right:12px; background:none; border:none; color:#ab8987; font-size:28px; cursor:pointer; z-index:10; line-height:1; transition:color .15s }
.trade-detail-close:hover { color:#E63946 }
.trade-detail-image { width:100%; max-height:300px; object-fit:cover; cursor:zoom-in; transition:opacity .15s }
.trade-detail-image:hover { opacity:0.9 }
.trade-detail-info { padding:24px }

/* ── Copy & Share buttons ── */
.trade-copy-btn { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; font-size:11px; color:#ab8987; border:1px solid #2a2a2b; cursor:pointer; background:transparent; transition:all .15s }
.trade-copy-btn:hover { border-color:#ffe16d; color:#ffe16d }
.trade-share-btn { position:absolute; top:12px; right:48px; background:none; border:none; color:#ab8987; font-size:20px; cursor:pointer; z-index:10; transition:color .15s }
.trade-share-btn:hover { color:#ffe16d }

/* ── Search highlight ── */
mark.trade-hl { background:rgba(233,196,0,0.25); color:#ffe16d; padding:0; border-radius:0 }

/* ── Negotiable price ── */
.trade-price-nego { color:#ab8987; font-style:italic }

/* ── Mobile FAB ── */
.trade-fab { position:fixed; bottom:24px; right:24px; width:56px; height:56px; background:#E63946; color:white; border:none; border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 4px 16px rgba(230,57,70,0.4); z-index:100; transition:transform .15s }
.trade-fab:hover { transform:scale(1.1) }
.trade-fab:active { transform:scale(0.95) }

/* ── Skeleton loading ── */
@keyframes trade-shimmer { to { background-position:200% center } }
.trade-skel { background:linear-gradient(90deg,rgba(255,255,255,0.03) 25%,rgba(255,255,255,0.06) 50%,rgba(255,255,255,0.03) 75%); background-size:200% 100%; animation:trade-shimmer 1.5s infinite; border-radius:2px; height:14px }

/* ── Listing type tabs (팝니다/삽니다) ── */
.trade-listing-tab { padding:8px 20px; font-size:13px; font-weight:700; color:#ab8987; background:transparent; border:none; border-bottom:2px solid transparent; cursor:pointer; transition:all .15s }
.trade-listing-tab:hover { color:#e5e2e3 }
.trade-listing-tab.active { color:#ffe16d; border-bottom-color:#ffe16d }

/* ── Sell/Buy badges in list ── */
.trade-badge-sell { display:inline-block; padding:1px 4px; font-size:9px; font-weight:800; background:#E63946; color:white; vertical-align:middle; line-height:14px; margin-right:2px }
.trade-badge-buy { display:inline-block; padding:1px 4px; font-size:9px; font-weight:800; background:#3b82f6; color:white; vertical-align:middle; line-height:14px; margin-right:2px }

/* ── Enhance level toggle buttons ── */
.trade-enhance-btn { padding:2px 8px; font-size:11px; font-weight:700; font-family:monospace; color:#ab8987; background:transparent; border:1px solid #2a2a2b; cursor:pointer; transition:all .15s; min-width:32px; text-align:center }
.trade-enhance-btn:hover { border-color:#e9c400; color:#ffe16d }
.trade-enhance-btn.active { background:rgba(233,196,0,0.12); border-color:#e9c400; color:#ffe16d }

/* ── Catalog cards ── */
.trade-catalog-card { display:flex; flex-direction:column; align-items:center; padding:12px 8px; border:1px solid #2a2a2b; background:#1c1b1c; cursor:pointer; transition:all .15s; text-align:center; gap:4px }
.trade-catalog-card:hover { border-color:#5b403f; background:#222 }
.trade-catalog-card.has-listings { border-color:#5b403f }
.trade-catalog-card.has-listings:hover { border-color:#E63946 }
.trade-catalog-card.no-listings { opacity:0.4 }
.trade-catalog-card.no-listings:hover { opacity:0.7 }
.trade-catalog-card .card-name { font-size:13px; font-weight:700; color:#e5e2e3; line-height:1.2 }
.trade-catalog-card.no-listings .card-name { color:#5b403f }
.trade-catalog-card .card-count { font-size:10px; color:#ab8987 }
.trade-catalog-card .card-price { font-size:11px; font-family:monospace; color:#ffe16d; font-weight:700 }

/* ── Category checkboxes ── */
.trade-cat-check { display:inline-flex; align-items:center; gap:4px; font-size:11px; font-weight:600; color:#ab8987; cursor:pointer; user-select:none }
.trade-cat-check:has(input:checked) span { color:#e5e2e3 }

/* ── Enhance price pills ── */
.enh-pill { display:inline-block; font-size:9px; padding:1px 4px; margin-right:3px; border:1px solid #2a2a2b; color:#ab8987; font-family:monospace; line-height:14px; white-space:nowrap }
.enh-pill .enh-lv { color:#ffe16d; font-weight:700 }
.enh-pill .enh-price { color:#e5e2e3 }

/* ── Responsive ── */
@media (max-width:768px) {
  .trade-detail-content { max-width:100%; margin:10px }
  .trade-server-select { min-width:80px; font-size:12px }
}