/* gear.css — 장비 칸, 장비 카드, 고르기 창, 대장간 탭, 결과 전리품 */
.gi { position: relative; flex: none; width: 40px; height: 40px; display: grid; place-items: center; border: 2px solid var(--rc, #6a7a90); background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc, #6a7a90) 35%, #141226), #0c0a18 75%); box-shadow: inset 0 0 0 1px rgba(0,0,0,.6); image-rendering: pixelated; font-style: normal; }
.gi::before { content: attr(data-s); position: absolute; font-size: 14px; font-weight: 900; color: var(--rc, #8a9ab0); opacity: .55; }
.gi img { position: relative; width: 88%; height: 88%; object-fit: contain; filter: drop-shadow(0 1px 0 #000); }
.gi:has(img)::before { display: none; }
.gi u { position: absolute; right: -3px; bottom: -4px; text-decoration: none; font-size: 10px; font-weight: 900; color: #fff; background: #1a1430; border: 1px solid var(--rc); padding: 0 3px; line-height: 13px; }
.r-R { --rc: #6ab0ff; } .r-SR { --rc: #c07aff; } .r-SSR { --rc: #ffc84a; }
.gi.r-SSR { box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), 0 0 10px rgba(255,200,74,.55); }
.gi.none { --rc: #3a3a52; border-style: dashed; }

/* 히로인 상세의 장비 칸 */
.eqs { border-top: 1px solid rgba(255,255,255,.15); padding: 6px 0; }
.eqs h5 { margin: 0 0 5px; font-size: 13px; display: flex; align-items: center; gap: 6px; color: #ffe8a0; }
.eqs h5 small { font-size: 10px; color: #cfc8e8; font-weight: 400; }
.eq-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.eq-slot { display: flex; gap: 7px; align-items: flex-start; text-align: left; padding: 6px; color: #fff; background: linear-gradient(160deg, color-mix(in srgb, var(--rc, #555) 22%, #1c1830), #120f20); border: 1px solid color-mix(in srgb, var(--rc, #555) 70%, transparent) !important; border-radius: 8px; cursor: pointer; min-width: 0; font-family: inherit; }
.eq-slot.empty { --rc: #4a4a66; opacity: .85; }
.eq-slot div { display: flex; flex-direction: column; min-width: 0; }
.eq-slot small { font-size: 9px; color: var(--rc); font-weight: 900; }
.eq-slot b { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.eq-slot span { font-size: 9.5px; opacity: .75; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.eq-slot:hover { filter: brightness(1.15); }

/* 장비 카드 */
.gcard { display: flex; gap: 8px; align-items: flex-start; min-width: 0; flex: 1; }
.gcard .gi { width: 44px; height: 44px; }
.gc-t { min-width: 0; flex: 1; }
.gc-t b { display: block; font-size: 13px; }
.gc-t b em { font-style: italic; font-weight: 900; font-size: 10px; color: var(--rc); margin-right: 5px; }
.gc-t b small { color: #ffe07a; font-size: 12px; }
.gc-st { display: flex; flex-wrap: wrap; gap: 2px 8px; font-size: 10px; color: #9affc0; }
.gc-st .neg { color: #ff8a7a; }
.gc-t p { margin: 2px 0 0; font-size: 10.5px; line-height: 1.35; color: #e8e0ff; }
.gp-own { display: inline-flex; align-items: center; gap: 3px; font-size: 10px; color: #ffd76a; margin-top: 2px; }
.gp-own img { width: 16px; height: 16px; image-rendering: pixelated; }

/* 고르기 창 */
.gpick { position: absolute; inset: 0; z-index: 30; background: rgba(4,3,10,.72); display: grid; place-items: center; animation: gpIn .18s steps(4); }
@keyframes gpIn { from { opacity: 0; } }
.gp-win { width: min(560px, 94vw); max-height: 86vh; display: flex; flex-direction: column; border: 22px solid transparent; border-image: url(assets/ui/panel.png) 90 / 22px stretch; background: linear-gradient(180deg, rgba(22,20,48,.97), rgba(10,9,24,.97)); background-clip: padding-box; }
.gp-h { display: flex; align-items: baseline; gap: 8px; padding: 0 2px 6px; border-bottom: 1px solid rgba(255,255,255,.12); }
.gp-h b { font-size: 16px; color: #ffe8a0; } .gp-h small { font-size: 10px; opacity: .7; flex: 1; }
.gp-x { background: none; border: 0; color: #fff; font-size: 16px; cursor: pointer; }
.gp-list { overflow-y: auto; display: flex; flex-direction: column; gap: 5px; padding: 6px 2px 2px; }
.gp-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.08); }
.gp-row.cur { border-color: #ffd76a; background: rgba(255,215,106,.08); }
.gp-row.no { opacity: .45; }
.gp-row > button { flex: none; min-width: 64px; }

/* 대장간 */
.sm-tabs { display: flex; gap: 4px; }
.sm-tabs button { flex: 1; padding: 5px 0; font-family: inherit; font-size: 12px; font-weight: 900; color: #cfc8e8; background: #1c1830; border: 1px solid #4a4466; border-radius: 6px; cursor: pointer; }
.sm-tabs button.on { color: #201a10; background: linear-gradient(#ffe07a, #e0a030); border-color: #fff4c8; }
.tq.gq { align-items: center; }
.tq.gq > button { flex: none; min-width: 70px; line-height: 1.2; }
.tq.gq > button small { display: block; font-size: 9px; opacity: .85; white-space: nowrap; }
.ore { display: inline-flex; align-items: center; gap: 3px; }
.ore img { width: 16px; height: 16px; image-rendering: pixelated; }

/* 결과 화면 전리품 */
.res-gear { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 4px 0; }
.rg { display: flex; align-items: center; gap: 8px; padding: 5px 12px 5px 6px; background: linear-gradient(90deg, color-mix(in srgb, var(--rc) 35%, #120f20), rgba(12,10,24,.85)); border: 1px solid var(--rc); border-radius: 10px; opacity: 0; animation: rgIn .5s steps(8) forwards; }
.rg div { display: flex; flex-direction: column; text-align: left; }
.rg small { font-size: 10px; color: var(--rc); font-weight: 900; } .rg b { font-size: 14px; }
.rg.r-SSR { box-shadow: 0 0 18px rgba(255,200,74,.6); }
.rg.r-SSR .gi { animation: rgGlow 1.2s ease-in-out infinite alternate; }
@keyframes rgIn { 0% { opacity: 0; transform: translateY(10px) scale(.8); } 60% { opacity: 1; transform: scale(1.08); } 100% { opacity: 1; transform: none; } }
@keyframes rgGlow { to { box-shadow: 0 0 18px 4px rgba(255,220,120,.9); } }

@media (max-width: 720px) { .eq-row { grid-template-columns: 1fr; } .eq-slot span { -webkit-line-clamp: 2; } }

/* 결과 화면: '필드로'가 주 버튼(금테), 보상 줄은 넘치면 줄바꿈 */
.menu .res-box .row .main { border-image-source: var(--px-gold); color: #ffe8a0; }
.menu .res-box .rw { flex-wrap: wrap; justify-content: center; }
.menu .res-box .rw span { white-space: nowrap; }

/* 캐릭터 카드: 정면 일러스트의 상반신(얼굴~가슴)만 보이게 */
.hc img.hc-front { top: 3%; height: 330%; width: auto; max-width: none; object-fit: contain; object-position: top; image-rendering: auto; }