.inventory-layout { grid-template-columns: minmax(0, 1fr); }
.inventory-primary { min-width: 0; }
.equipment-panel { overflow: hidden; border-color: #746449; background: radial-gradient(circle at 15% -15%, #8d744c35, transparent 36%), linear-gradient(145deg, #252e35, #151f28 70%); }
.equipment-panel > .panel-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.equipment-power-badge { border: 1px solid #907b55; border-radius: 6px; background: #3b3429; color: #eed397; padding: 7px 10px; font-size: 12px; font-weight: 700; white-space: nowrap; }
.equipment-overview { display: grid; grid-template-columns: minmax(220px, .8fr) minmax(0, 1.2fr); gap: 12px; padding: 15px; border-bottom: 1px solid #414a4d; }
.equipment-total-attack { display: flex; flex-direction: column; justify-content: center; border: 1px solid #9b8155; border-radius: 9px; background: radial-gradient(circle at 90% 10%, #d3a85a2a, transparent 50%), #292c2b; padding: 15px 17px; }
.equipment-total-attack small { color: #d7bc82; font-size: 11px; font-weight: 700; letter-spacing: .07em; }
.equipment-total-attack strong { color: #ffdf94; font-size: clamp(31px, 4vw, 44px); line-height: 1.18; font-variant-numeric: tabular-nums; text-shadow: 0 0 20px #dfa74f55; }
.equipment-total-attack > span { color: #bdb7a6; font-size: 11px; line-height: 1.5; }
.equipment-total-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
.equipment-total-stats > div { display: flex; justify-content: space-between; align-items: center; gap: 8px; min-width: 0; border: 1px solid #3f4d55; border-radius: 6px; background: #17232c; padding: 9px 10px; }
.equipment-total-stats span { color: #99a9b3; font-size: 11px; }
.equipment-total-stats strong { color: #e7dbc3; font-size: 13px; white-space: nowrap; }
.equipment-set-summary { margin: 0 15px 2px; border-bottom: 1px solid #414a4d; padding: 12px 1px; }
.equipment-set-summary > strong { display: block; color: #e7be87; font-size: 12px; margin-bottom: 8px; }
.equipment-set-summary > div { display: flex; flex-wrap: wrap; gap: 5px; }
.equipment-set-summary span { border: 1px solid #46505a; border-radius: 4px; color: #8795a1; padding: 5px 7px; font-size: 10px; }
.equipment-set-summary span.active { border-color: #a78559; background: #403528; color: #f4d59c; }
.equipped-slots, .gear-inventory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.equipped-slots { padding: 15px; }
.gear-inventory-grid { margin-top: 10px; }
.gear-card-quickbar{display:flex;align-items:center;justify-content:space-between;gap:7px;margin-top:9px;padding-top:8px;border-top:1px solid #45525b}.gear-card-quickbar .combat-power-change{flex:1;min-width:0;margin:0;padding:5px 7px;color:#b9c5cb;font-size:11px;font-weight:700;line-height:1.3}.gear-card-quickbar .combat-power-change.up{color:#8ee0ac}.gear-card-quickbar .combat-power-change.down{color:#ef9b95}.gear-card-quickbar .combat-power-change.same{color:#aebcc2}.gear-quick-sell{flex:none;padding:6px 9px!important;border:1px solid #997569!important;border-radius:6px!important;background:#493633!important;color:#f7cfbc!important;font-size:11px!important;font-weight:700;cursor:pointer}.gear-quick-sell:hover{background:#69443d!important}.gear-quick-bound{color:#a7aeb3;font-size:10px;white-space:nowrap}
.equipped-detail-card, .gear-detail-card { --gear-accent: #aeb9c1; min-width: 0; border: 1px solid color-mix(in srgb, var(--gear-accent) 65%, #263440); border-radius: 9px; background: linear-gradient(160deg, #2b3440, #19242d 46%, #131d26); padding: 13px; box-shadow: inset 0 1px #ffffff12, 0 8px 18px #0003; }
.equipped-detail-card.rarity-레어, .gear-detail-card.rarity-레어 { --gear-accent: #6fb7ee; }
.equipped-detail-card.rarity-에픽, .gear-detail-card.rarity-에픽 { --gear-accent: #c07be8; }
.equipped-detail-card.rarity-유니크, .gear-detail-card.rarity-유니크 { --gear-accent: #e6bd54; }
.equipped-detail-card.rarity-레전드리, .gear-detail-card.rarity-레전드리 { --gear-accent: #f18e54; }
.equipped-detail-card.rarity-미스틱, .gear-detail-card.rarity-미스틱 { --gear-accent: #f078ad; }
.equipped-detail-card.drag-over { border-color: #ffe0a0; box-shadow: 0 0 0 3px #d8b96b60, 0 12px 28px #0008; }
.equipped-detail-card.empty { display: flex; min-height: 190px; align-items: center; justify-content: center; flex-direction: column; gap: 7px; border-style: dashed; border-color: #52616c; background: #17232c; color: #a2b0ba; }
.empty-gear-icon { display: grid; place-items: center; width: 46px; height: 46px; border: 1px solid #556575; border-radius: 9px; color: #d1c497; font-size: 25px; }
.equipped-detail-card.empty strong { color: #d7e0e4; font-size: 14px; }
.equipped-detail-card.empty span { font-size: 11px; }
.equipped-detail-label { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-bottom: 1px solid #47515a; padding-bottom: 8px; color: #b9c4c9; font-size: 11px; font-weight: 700; }
.equipped-detail-label .equipment-unequip { margin: 0; padding: 5px 9px; font-size: 11px; }
.gear-detail-stars { min-height: 22px; margin: 10px 0 3px; color: #f5c94e; font-size: 15px; letter-spacing: .07em; line-height: 1.35; overflow-wrap: anywhere; }
.gear-detail-stars small { color: #bca778; font-size: 10px; letter-spacing: 0; white-space: nowrap; }
.gear-detail-head { display: flex; align-items: center; gap: 11px; min-width: 0; padding: 4px 0 12px; }
.gear-detail-icon { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border: 1px solid var(--gear-accent); border-radius: 9px; background: radial-gradient(circle at 30% 20%, #f0dba933, transparent 54%), #38414b; box-shadow: 0 0 16px color-mix(in srgb, var(--gear-accent) 35%, transparent); font-size: 29px; }
.gear-detail-head > div { min-width: 0; }
.gear-detail-head small { display: block; color: #98a6af; font-size: 11px; line-height: 1.45; }
.gear-detail-head .gear-detail-rarity { color: var(--gear-accent); font-weight: 700; }
.gear-detail-head h3 { margin: 4px 0; color: #f1e5cf; font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.gear-base-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; padding-bottom: 10px; }
.gear-base-stats > div { display: flex; justify-content: space-between; gap: 7px; border: 1px solid #45535d; border-radius: 5px; background: #15232e; padding: 8px; }
.gear-base-stats span { color: #a3b1ba; font-size: 11px; }
.gear-base-stats strong { color: #f0d18e; font-size: 13px; }
.gear-option-groups { display: grid; gap: 8px; }
.gear-option-group { border-top: 1px solid #45525b; padding-top: 8px; }
.gear-option-group h4 { display: flex; justify-content: space-between; gap: 8px; margin: 0 0 5px; color: #d4b578; font-size: 11px; }
.gear-option-group h4 small { color: #84949e; font-size: 10px; font-weight: 500; }
.gear-option-group ul { display: grid; gap: 3px; list-style: none; margin: 0; padding: 0; }
.gear-option-group li { display: flex; justify-content: space-between; gap: 9px; padding: 3px 0; color: #c9d3d8; font-size: 12px; line-height: 1.35; }
.gear-option-group li span { min-width: 0; overflow-wrap: anywhere; }
.gear-option-group li strong { flex: none; color: #8dd4ab; font-variant-numeric: tabular-nums; }
.gear-option-group p { margin: 0; color: #778792; font-size: 11px; }
.gear-set-note { margin: 3px 0 0; border: 1px solid #7c6751; border-radius: 5px; background: #3b3029; padding: 7px; color: #efc99f; font-size: 11px; }
.gear-detail-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px; border-top: 1px solid #45525b; margin-top: 11px; padding-top: 10px; color: #a5b1b7; font-size: 11px; }
.gear-detail-foot .combat-power-change { display: inline-flex; align-items: center; margin: 0; padding: 5px 7px; }
.gear-detail-actions { display: flex; align-items: center; gap: 7px; margin-top: 11px; }
.gear-detail-actions button { flex: 1; min-width: 0; margin: 0; }
.gear-detail-actions .raid-bound-note { margin: 0; }
.equipment-hint { padding: 3px 15px 13px; }
.inventory-stats { position: static; }
@media (max-width: 700px) {
  .equipment-overview { grid-template-columns: 1fr; }
  .equipped-slots, .gear-inventory-grid { grid-template-columns: 1fr; }
  .equipment-panel > .panel-head { align-items: flex-start; flex-direction: column; }
}

/* A small item tile carries the identity; the full stat sheet opens on demand. */
.equipment-panel { overflow: visible; }
.equipped-slots, .gear-inventory-grid { align-items: start; }
.compact-gear,
.item-card.compact-gear {
  --gear-accent: #aeb9c1;
  position: relative;
  display: block;
  min-height: 139px;
  padding: 11px 13px;
  border-color: color-mix(in srgb, var(--gear-accent) 60%, #263440);
  border-radius: 7px;
  background: #222e3a;
  box-shadow: inset 0 1px #ffffff10;
}
.compact-gear.rarity-레어 { --gear-accent: #6fb7ee; }
.compact-gear.rarity-에픽 { --gear-accent: #c07be8; }
.compact-gear.rarity-유니크 { --gear-accent: #e6bd54; }
.compact-gear.rarity-레전드리 { --gear-accent: #f18e54; }
.compact-gear.rarity-미스틱 { --gear-accent: #f078ad; }
.compact-gear:hover,
.item-card.compact-gear:hover,
.compact-gear:focus-within,
.compact-gear.preview-hover,
.compact-gear.preview-open {
  z-index: 60;
  transform: none;
  border-color: var(--gear-accent);
  box-shadow: inset 0 1px #ffffff17, 0 0 0 1px color-mix(in srgb, var(--gear-accent) 25%, transparent);
}
.compact-gear-stars {
  display: flex;
  align-items: center;
  gap: 5px;
  width: calc(100% - 25px);
  height: 23px;
  overflow: hidden;
  white-space: nowrap;
  color: #ffd04f;
  font-size: 15px;
  letter-spacing: -.02em;
  line-height: 1;
}
.compact-gear-stars small { color: #aaabb0; font-size: 10px; letter-spacing: 0; }
.compact-gear-main { display: flex; align-items: center; gap: 11px; min-width: 0; margin-top: 4px; }
.compact-gear-icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 57px;
  height: 57px;
  border: 1px solid var(--gear-accent);
  border-radius: 10px;
  background: radial-gradient(circle at 30% 15%, #f8dca525, transparent 56%), #384655;
  font-size: 29px;
}
.compact-gear-copy { display: grid; gap: 3px; min-width: 0; flex: 1; }
.compact-gear-copy small { overflow: hidden; color: var(--gear-accent); font-size: 11px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.compact-gear-copy strong { overflow: hidden; color: #f2e9da; font-size: 16px; text-overflow: ellipsis; white-space: nowrap; }
.compact-gear-copy > span { color: #9caab4; font-size: 11px; }
.compact-gear-total-attack { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-top: 8px; padding-top: 6px; border-top: 1px solid #44515c; color: #bbc8cc; font-size: 11px; }
.compact-gear-total-attack strong { color: #f1d491; font-size: 14px; font-variant-numeric: tabular-nums; }
.compact-gear .gear-preview-toggle,
.item-card.compact-gear .gear-preview-toggle {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 22px;
  height: 22px;
  margin: 0;
  padding: 0;
  border: 1px solid #52616b;
  border-radius: 50%;
  background: #263644;
  color: #b8c5cc;
  font-size: 13px;
  line-height: 20px;
}
.gear-preview {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 100;
  width: min(324px, calc(100vw - 24px));
  max-height: min(552px, calc(100dvh - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  padding: 14px;
  border: 1px solid var(--gear-accent);
  border-radius: 8px;
  background: linear-gradient(145deg, #263542, #111c27);
  box-shadow: 0 15px 38px #000c, inset 0 1px #ffffff1a;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .12s ease, visibility .12s ease;
}
.compact-gear:hover .gear-preview,
.compact-gear:focus-within .gear-preview,
.compact-gear.preview-hover .gear-preview,
.compact-gear.preview-open .gear-preview { opacity: 1; visibility: visible; pointer-events: auto; }
.gear-preview-title { display: grid; gap: 4px; padding-bottom: 10px; border-bottom: 1px solid #46535d; }
.gear-preview-title small { color: var(--gear-accent); font-size: 12px; font-weight: 700; }
.gear-preview-title strong { color: #f0e5cf; font-size: 17px; }
.gear-preview .gear-base-stats { gap: 6px; padding: 10px 0 0; }
.gear-preview .gear-base-stats > div { padding: 8px; }
.gear-preview .gear-base-stats span { font-size: 12px; }
.gear-preview .gear-base-stats strong { font-size: 13px; }
.gear-attack-summary { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; margin: 4px 0 6px; padding: 8px 10px; border: 1px solid #927b50; border-radius: 5px; background: #393328; color: #e1c994; font-size: 12px; }
.gear-attack-summary strong { color: #ffdf95; font-size: 16px; font-variant-numeric: tabular-nums; }
.gear-attack-summary small { grid-column: 1 / -1; color: #b8aa91; font-size: 11px; }
.gear-preview .gear-option-groups { gap: 5px; }
.gear-preview .gear-option-group { padding-top: 7px; }
.gear-preview .gear-option-group h4 { margin-bottom: 3px; font-size: 12px; }
.gear-preview .gear-option-group li { gap: 6px; padding: 2px 0; font-size: 12px; line-height: 1.3; }
.gear-preview .gear-option-group p { font-size: 12px; }
.gear-preview .gear-detail-foot { margin-top: 8px; padding-top: 8px; font-size: 12px; }
.gear-preview .gear-detail-actions { margin-top: 9px; }
.gear-preview .gear-detail-actions button { padding: 8px 10px; font-size: 13px; }
.gear-preview .gear-detail-actions .raid-bound-note { font-size: 12px; }
.equipped-detail-card.empty { min-height: 139px; }
@media (hover: none) {
  .compact-gear:not(.preview-open):not(:focus-within) .gear-preview { opacity: 0; visibility: hidden; pointer-events: none; }
}
@media (max-width: 800px) {
  .gear-preview { max-height: min(552px, calc(100dvh - 92px)); }
}