/* ?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧??   留덈찇?占쎈옒?占쏀듃 (?占쏀넗諛곤옙??? ??marmotcraft.css
   PixiJS ?占쎌옣 + HTML UI ?占쎈쾭?占쎌씠
   ?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧?占썩븧??*/

/* ?占?占?占?Overlay Container ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.marmot-overlay {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 50;
  overflow: hidden;
  contain: layout paint style;
  background: #0d1117;
  /* ?占쏙툘 而щ윭 ?占쎈え吏€ ?占쏀듃("Apple Color Emoji"/"Segoe UI Emoji"/"Noto Color Emoji")占??占쏀깮??     紐낆떆?占쎈㈃, ?占쎌뒪???占쎄린媛€ 諛뷂옙??占쎈쭏??=`--ab-unit` 蹂€占? ???占쎌쓽 紐⑤뱺 ?占쎌뒪???占쎌뿉??     占??占쏀듃?占쎌쓣 ?占쎌떆 ?占쎌꽍?占쎌빞 ?占쎌꽌 媛뺤젣 ?占쎌씠?占쎌썐??10.6ms源뚳옙? ?占쎈떎. ?占쏀깮?占쎌꽌 鍮쇰㈃ 0.3ms??     (?占쎌륫). ?占쎈え吏€??釉뚮씪?占쏙옙? ?占쎈룞 ?占쎈갚?占쎈줈 洹몌옙?占?蹂댁씤?????占쎌긽 理쒖냼?占승룻뵆?占쎌씠由ъ뒪??     ?占쎄린 ??寃뚯엫???占쎄컙 硫덉텛???占쎌씤?占쎌뿀?占쏙옙?占??占쎈룎由э옙? 占?占? */
  font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
}
.marmot-overlay.active { display: block; }
.marmot-overlay.marmot-fullscreen {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  z-index: 99999 !important;
}
.marmot-ui-shell {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #0d1117;
  /* 湲곕낯占? ?占쎌젣 媛믭옙? ?占쎈씪?占쎌뼵?占쏙옙? ?占쎌긽 ?占쎌뿭 ?占쎄린?占쎌꽌 怨꾩궛????占쏙옙?占쎈떎. */
  --ab-unit: clamp(6px, 1.2vw, 15px);
}

/* ?占?占?占?Top HUD Bar ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-hud {
  position: relative;
  display: flex;
  align-items: center;
  /* ⚠️ HUD는 전장과 **같은 가로 범위**를 써야 한다. 아군 체력바는 전장 왼쪽(아군 진영),
     적 체력바는 오른쪽 위에 오고, 가운데 라운드/타이머는 전장 중앙(중립 2열)에 있는
     카운트다운 위젯과 세로로 맞아야 하기 때문이다. 전장이 보관함만큼 왼쪽을 비켜주면
     HUD도 같이 비켜야 한다 — 안 그러면 가운데 묶음이 전장 중앙보다 왼쪽에 찍힌다
     (실제 제보: "상단 R3/준비/웨이브 이름이 중앙에 안 맞는다"). */
  padding: 4px 12px 4px calc(12px + var(--ab-board-inset, 0px));
  background: #161b22;
  border-bottom: 1px solid #30363d;
  min-height: 28px;
  flex: 0 0 auto;
  /* HUD ?占쎌뒪?占쎈뒗 ???占쎌껜 諛€??--ab-unit) ?占쎄퀎?占쎌뿉??遺꾨━?占쎈떎. ?占쎈젅?占쎈━?占쏀듃 ?占쏀솚 占?     ?占쎈え吏€ ?占쏀븿 ?占쎌뒪?占쏙옙? 諛섎났 ?占쏀삎?占쏀븯??占??占쎌씠?占쎌썐??留됰릺 紐⑤컮???占쎌뒪?占쏀넲 ?占쎄린???占쏙옙??占쎈떎. */
  font-size: clamp(6px, 0.75vw, 12px);
}
.ab-hud-left, .ab-hud-right {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.ab-hud-center {
  position: absolute;
  /* `left`는 padding-left가 아니라 HUD의 패딩 박스를 기준으로 풀리므로, 전장이 비켜준
     폭의 절반만큼 직접 밀어야 전장 중앙과 맞는다(위 .ab-hud 주석 참고). */
  left: calc(50% + var(--ab-board-inset, 0px) / 2);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 1em;
  color: #c9d1d9;
}
.ab-round-badge {
  background: #30363d;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 600;
  color: #58a6ff;
}
.ab-timer {
  font-variant-numeric: tabular-nums;
  color: #f0883e;
  font-weight: 600;
}
.ab-team-hp {
  display: flex; align-items: center; gap: 6px;
}
.ab-team-hp .hp-bar {
  width: clamp(48px, 9vw, 120px); height: 8px;
  background: #21262d; border-radius: 5px; overflow: hidden;
}
.ab-team-hp .hp-bar-fill {
  height: 100%; transition: width 0.3s; border-radius: 5px;
}
.ab-team-hp.quokka .hp-bar-fill { background: #3fb950; }
.ab-team-hp.marmot .hp-bar-fill { background: #f85149; }
/* ?占쎄뎔?占???占쏙옙 ?占쎌깋, ?占쎄뎔?占???占쏙옙 鍮④컙???占쎌옣 吏꾩쁺 ?占쎄낵 ?占쎌튂). ???占??占쎈낫???占쎌뿉 ?占쎌뼱 ?占쎌꽑?占쎈떎. */
.ab-team-hp.ally .hp-bar-fill { background: #3fb950; }
.ab-team-hp.enemy .hp-bar-fill { background: #f85149; }
.ab-team-hp .hp-text { font-size: 0.9em; color: #c9d1d9; min-width: 2.6em; }

/* ?占?占?占?Main Area (PixiJS Canvas + Side panels) ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-main {
  flex: 1 1 auto;
  min-height: 28px;
  display: flex;
  overflow: hidden;
  position: relative;
}
/* ⚠️ 왼쪽 여백은 장비 보관함(`.ab-item-tray`) 자리다. **지우지 말 것.**
   예전에는 보관함을 "캔버스 좌우의 레터박스에 겹쳐 띄운다"는 전제로 절대배치만 해뒀는데,
   그 전제가 실제로는 성립하지 않았다 — fitBoard()가 셀 높이(CELL_H)를 컨테이너 비율에
   맞춰 조정해 **레터박스를 의도적으로 없애기** 때문에 전장은 항상 캔버스를 꽉 채운다.
   그래서 보관함이 늘 아군 배치 구역 위에 얹혀 있었다(1440x900 실측: 아군 구역 275px 중
   157px = 57%를 가림 — "인벤토리가 필드를 침범한다"는 실제 제보).
   지금은 이 margin으로 캔버스 자체를 좁혀 전장이 보관함 아래로 절대 들어가지 않는다.
   보관함을 flex 아이템으로 바꾸는 방법도 있지만, 그러면 전투 중 보관함이 display:none이
   되는 순간 캔버스가 넓어져 **라운드마다 전장 크기가 튄다**. margin은 단계와 무관하게
   항상 같은 폭을 예약하므로 그 흔들림이 없다. */
.ab-canvas-wrap {
  flex: 1 1 auto;
  min-height: 28px;
  margin-left: var(--ab-board-inset, 0px);
  position: relative;
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  background: #0b1017;
}
.ab-canvas-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block;
  image-rendering: auto;
}

/* ?占?占?占?Bottom Panel (Shop + Bench + Controls) ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-bottom {
  display: flex;
  flex-direction: column;
  background: #161b22;
  border-top: 1px solid #30363d;
  flex: 0 0 auto;
  font-size: var(--ab-unit);
}
.ab-economy-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 3px 12px;
  font-size: 1em;
  color: #c9d1d9;
}
.ab-gold { color: #f5c542; font-weight: 700; }
.ab-level { color: #58a6ff; }
.ab-exp { color: #8b949e; }

/* ?占?占?占?Shop ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-shop {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
}
.ab-shop-slot {
  width: calc(var(--ab-unit) * 4.6); height: calc(var(--ab-unit) * 4.6);
  background: #21262d;
  border: 2px solid #30363d;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
  font-size: 0.8em;
  color: #c9d1d9;
  position: relative;
}
.ab-shop-slot.cost-1 { border-color: #4b5563; }
.ab-shop-slot.cost-2 { border-color: #3fb950; }
.ab-shop-slot.cost-3 { border-color: #58a6ff; }
.ab-shop-slot.cost-4 { border-color: #a678d6; }
.ab-shop-slot.cost-5 { border-color: #f5c542; }
.ab-shop-slot.cost-6 { border-color: #f5c542; box-shadow: inset 0 0 10px #f5c54240, 0 0 6px #f5c54233; --rarity-glow: #f5c542; }
.ab-shop-slot:hover {
  border-color: #58a6ff;
  transform: translateY(-2px);
}
.ab-shop-slot.empty { opacity: 0.4; cursor: default; }
.ab-shop-slot {
  overflow: hidden;
  --rarity-glow: #6b7280;
  background: linear-gradient(180deg, #161b22 30%, color-mix(in srgb, var(--rarity-glow) 30%, #161b22));
}
.ab-shop-slot.cost-2 { --rarity-glow: #3fb950; }
.ab-shop-slot.cost-3 { --rarity-glow: #58a6ff; }
.ab-shop-slot.cost-4 { --rarity-glow: #a678d6; }
.ab-shop-slot.cost-5 { --rarity-glow: #f5c542; }
.ab-shop-slot .unit-portrait-stage {
  position: absolute; inset: 2px 2px 1.2em;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 50% 60%, color-mix(in srgb, var(--rarity-glow) 38%, transparent) 0%, #171d24 68%);
  overflow: hidden; border-radius: 4px;
}
.ab-shop-slot.race-humans .unit-portrait-stage { background-color: #25323a; }
.ab-shop-slot.race-mystic .unit-portrait-stage { background-color: #332d4b; }
.ab-shop-slot.race-vampire .unit-portrait-stage { background-color: #3b252d; }
.ab-shop-slot .portrait-shadow {
  position: absolute; left: 17%; right: 17%; bottom: 4%; height: 12%;
  border-radius: 50%; background: #000; opacity: .6; filter: blur(2px);
}
.ab-shop-slot .unit-icon {
  position: relative; z-index: 1; width: 100%; height: 100%; object-fit: cover; object-position: center;
  filter: drop-shadow(0 2px 2px #000) drop-shadow(0 0 3px color-mix(in srgb, var(--rarity-glow) 65%, transparent));
  image-rendering: auto
}
.ab-shop-slot .unit-cost {
  position: absolute; z-index: 4; top: 4px; right: 6px;
  color: color-mix(in srgb, var(--rarity-glow) 80%, #ffffff);
  font-weight: 900; font-size: 1.1em;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 5px rgba(0,0,0,0.8);
}
.ab-shop-slot .unit-name {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  box-sizing: border-box; padding: 2px 3px;
  background: linear-gradient(90deg, #0a0e13f2, #18202af2, #0a0e13f2);
  border-top: 1px solid color-mix(in srgb, var(--rarity-glow) 55%, #30363d);
  color: #f0f6fc; font-size: 0.85em; font-weight: 700; text-align: center;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ab-shop-controls {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-left: 10px;
}
.ab-shop-controls .ab-btn { white-space: nowrap; }
/* 서버 응답을 기다리는 동안의 "누르는 중" 표시. 실제 배포에서는 왕복이 수십~수백 ms라
   이게 없으면 누른 순간 아무 반응이 없어 씹힌 것처럼 느껴진다(§emitAction).
   ⚠️ transition을 길게 주지 말 것 — 왕복이 짧을 때 오히려 잔상이 남는다. */
.ab-btn.ab-pending {
  transform: translateY(1px) scale(0.985);
  filter: brightness(1.25);
  transition: transform 60ms ease-out, filter 60ms ease-out;
}
/* ?占쎌텞???占쎌떆(D=由щ· / F=寃쏀뿕占?/ B=怨좎젙). 踰꾪듉 ??占쏙옙 ?占쎈━吏€ ?占쎈룄占??占쎄쾶 遺숈씤?? */
.ab-key {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  border: 1px solid #3d444d;
  border-radius: 3px;
  background: #0d1117;
  color: #8b949e;
  font-family: inherit;
  font-size: 0.78em;
  font-weight: 700;
  line-height: 1.35;
  vertical-align: middle;
}
.ab-btn {
  padding: 4px 10px;
  border: 1px solid #30363d;
  border-radius: 6px;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
  font-size: 0.9em;
  font-weight: 500;
  transition: background 0.15s;
}
.ab-btn:hover { background: #30363d; }
.ab-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.ab-btn.primary { background: #238636; border-color: #2ea043; color: #fff; }
.ab-btn.primary:hover { background: #2ea043; }
.ab-btn.danger { background: #da3633; border-color: #f85149; color: #fff; }

/* ?占?占?占?Bench ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-bench {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 3px 12px 5px;
}
.ab-bench-slot {
  width: calc(var(--ab-unit) * 3.2); height: calc(var(--ab-unit) * 3.2);
  background: #21262d;
  border: 2px solid #30363d;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  overflow: hidden;
}
.ab-bench-slot.occupied {
  border-color: #484f58;
  --rarity-glow: #6b7280;
  background: linear-gradient(180deg, #161b22 10%, color-mix(in srgb, var(--rarity-glow) 40%, #161b22));
}
.ab-bench-slot.occupied.cost-1 { border-color: #6b7280; box-shadow: inset 0 0 7px #6b728040; --rarity-glow: #6b7280; }
.ab-bench-slot.occupied.cost-2 { border-color: #3fb950; box-shadow: inset 0 0 7px #3fb95040; --rarity-glow: #3fb950; }
.ab-bench-slot.occupied.cost-3 { border-color: #58a6ff; box-shadow: inset 0 0 7px #58a6ff40; --rarity-glow: #58a6ff; }
.ab-bench-slot.occupied.cost-4 { border-color: #a678d6; box-shadow: inset 0 0 8px #a678d650; --rarity-glow: #a678d6; }
.ab-bench-slot.occupied.cost-5 { border-color: #f5c542; box-shadow: inset 0 0 9px #f5c54250, 0 0 4px #f5c54255; --rarity-glow: #f5c542; }
.ab-bench-slot.occupied.cost-6 { border-color: #f5c542; box-shadow: inset 0 0 10px #f5c54255, 0 0 5px #f5c54266; --rarity-glow: #f5c542; }
.ab-bench-slot.star-2 .star-badge { color: #d0d7de; }
.ab-bench-slot.star-3 .star-badge { color: #f5c542; text-shadow: 0 0 4px #f5c542; }
.ab-bench-slot .unit-icon { 
  width: 100%; height: 100%; object-fit: cover; object-position: center; 
}
.ab-bench-slot .star-badge {
  position: absolute; bottom: 2px; left: 50%; transform: translateX(-50%); z-index: 5;
  font-size: 0.85em; color: #f5c542; font-weight: bold;
  text-shadow: 0 1px 2px #000, 0 0 3px #000;
  line-height: 1;
}

/* ?占?占?占?Lobby UI ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-lobby {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(8px, 2vh, 32px);
  gap: clamp(8px, 1.6vh, 22px);
  flex: 1 1 auto;
  min-height: 28px;
  overflow: auto;
  font-size: var(--ab-unit);
}
.ab-lobby h2 { color: #f0f6fc; font-size: 1.7em; margin: 0; }
.ab-lobby-teams {
  display: flex;
  gap: clamp(12px, 3vw, 40px);
}
.ab-lobby-team {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: clamp(130px, 18vw, 220px);
}
.ab-lobby-team h3 { text-align: center; margin: 0; font-size: 1.15em; }
.ab-lobby-team.quokka h3 { color: #3fb950; }
.ab-lobby-team.marmot h3 { color: #f85149; }
.ab-lobby-slot {
  padding: 8px 10px;
  background: #21262d;
  border: 2px solid #30363d;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 2.6em;
  cursor: pointer;
  font-size: 0.95em;
}
.ab-lobby-slot.filled { border-color: #484f58; cursor: default; }
.ab-lobby-slot .slot-name { color: #c9d1d9; font-weight: 500; }
.ab-lobby-slot .slot-race { color: #8b949e; font-size: 0.9em; }
.ab-lobby-slot .slot-ready { color: #3fb950; font-size: 0.9em; }

.ab-lobby-controls {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.ab-race-select {
  display: flex; gap: 6px; flex-wrap: wrap; justify-content: center;
}
.ab-race-btn {
  padding: 6px 12px;
  border: 2px solid #30363d;
  border-radius: 6px;
  background: #21262d;
  color: #c9d1d9;
  cursor: pointer;
  font-size: 0.95em;
}
.ab-race-btn.selected { border-color: #58a6ff; background: #1c2b40; }

/* ?占?占?占?Augment Selection Modal ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-augment-modal {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #161b22;
  border: 2px solid #30363d;
  border-radius: 12px;
  padding: 24px;
  z-index: 9500;
  max-width: 500px;
}
.ab-augment-modal.active { display: block; }
.ab-augment-modal h3 { color: #f0f6fc; margin: 0 0 16px; text-align: center; }
.ab-augment-choices {
  display: flex; gap: 12px;
}
.ab-augment-card {
  flex: 1;
  padding: 16px;
  background: #21262d;
  border: 2px solid #30363d;
  border-radius: 8px;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, transform 0.1s;
}
.ab-augment-card:hover {
  border-color: #f5c542;
  transform: translateY(-2px);
}
.ab-augment-card .aug-name { color: #f0f6fc; font-weight: 600; margin-bottom: 8px; }
.ab-augment-card .aug-desc { color: #8b949e; font-size: 12px; }

/* ?占?占?占?Result Modal ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-result {
  display: none;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #161b22;
  border: 2px solid #30363d;
  border-radius: 12px;
  padding: 32px 48px;
  z-index: 9500;
  text-align: center;
}
.ab-result.active { display: block; }
.ab-result h2 { font-size: 28px; margin: 0 0 12px; }
.ab-result.win h2 { color: #3fb950; }
.ab-result.lose h2 { color: #f85149; }
.ab-result.draw h2 { color: #8b949e; }
.ab-result .result-sub { color: #8b949e; font-size: 14px; }
/* 입문 PvE 유닛 보상(확률 지급) — 보상 줄에 초상화를 함께 보여준다. */
.ab-result .result-sub .reward-unit {
  width: 20px; height: 20px; border-radius: 50%; vertical-align: -5px; margin-right: 3px;
  border: 1px solid #f5c542;
}

/* ?占?占?占?HUD ?占쎌륫 踰꾪듉(?占쎌껜?占쎈㈃ / ??占쏙옙) ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?
   ?占쏙툘 ?占쎌껜?占쎈㈃ 踰꾪듉??`position:absolute; top:8px; right:8px`占??占쎈룎由э옙? 占?占?
   `.ab-hud`?占쎈뒗 position???占쎌뼱??占?醫뚰몴媛€ `.marmot-ui-shell` 湲곤옙??占쎈줈 ?占쏀엳占?
   寃곌뎅 HUD ?占쎈Ⅸ占??占쎌쓽 ??占쏙옙(?? 踰꾪듉占??占쏀솗??媛숋옙? ?占쎈━??寃뱀퀜 ?占쎌뿀??
   ??踰꾪듉?占????占쏀띁 ?占쎌뿉???占쎈컲 flex ?占쎌씠?占쎌쑝占??占쏙옙????占쎈뒗?? */
.ab-hud-actions {
  position: absolute;
  right: 12px; top: 50%; transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
}
.ab-hud-actions .ab-fullscreen-btn,
.ab-hud-actions .ab-exit-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  padding: 0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
}
.ab-fullscreen-btn {
  background: rgba(0,0,0,0.6);
  border: none;
  color: #fff;
}
.ab-fullscreen-btn:hover { background: rgba(0,0,0,0.8); }
.ab-hud-actions .ab-exit-btn { margin-left: 2px; }

/* ?占?占?占?Incoming challenge modal ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-challenge-modal {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  z-index: 60;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: rgba(3, 7, 18, 0.78);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.ab-challenge-modal.active {
  opacity: 1;
  pointer-events: auto;
}
.ab-challenge-card {
  width: min(360px, 86%);
  padding: 26px 24px 22px;
  border: 1px solid #3d4c60;
  border-radius: 16px;
  background: linear-gradient(160deg, #1b2430, #111821);
  color: #f0f6fc;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.65);
  transform: translateY(8px) scale(0.98);
  transition: transform 0.18s ease;
}
.ab-challenge-modal.active .ab-challenge-card {
  transform: translateY(0) scale(1);
}
.ab-challenge-icon { font-size: 42px; line-height: 1; margin-bottom: 10px; }
.ab-challenge-card h3 { margin: 0 0 10px; font-size: 20px; }
.ab-challenge-card p { margin: 0; color: #b8c2cf; font-size: 15px; }
.ab-challenge-name { color: #58a6ff; }
.ab-challenge-countdown {
  margin: 16px 0;
  color: #f5c542;
  font-size: 28px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ab-challenge-actions { display: flex; gap: 10px; }
.ab-challenge-actions .ab-btn { flex: 1; min-height: 44px; font-size: 15px; }

/* ?占?占?占??占쎈낫 ?占쎈꼸 (?占쎈꼫吏€ / ?占쏙옙? ?占쎌같) ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
/* ?占쎌옣 ??占쏙옙 鍮쇱븮吏€ ?占쎈룄占??占쎌옣 ?占쎌뿉 寃뱀퀜 ?占쎌슫??
   ?占쏙툘 ?????占쎈㈃ ?占쎈Ⅸ履쎌뿉 ?占쎈떎 ???占쎄뎔 吏꾩쁺?占???占쏙옙 ?占쎌そ?占쎄퀬, ?占쎌そ???占쎈꼸???占쎈㈃
   ??諛곗튂 援ъ뿭??媛€?占쎈쾭由곕떎(?占쎌젣 諛쒖깮??臾몄젣). 以€占??占쎄퀎?占쎌꽌 ?占쎈Ⅸ履쏙옙? ?占쏙옙? 吏꾩쁺?占쎄퀬
   ?占쏙옙? 諛곗튂???占쎌감???占쎄꺼???占쎌뼱 媛€?占쎈룄 ?占쎈뒗 ?占쎈낫媛€ ?占쎈떎.
   ?占쏀닾媛€ ?占쎌옉?占쎈㈃ JS媛€ ????媛먯떠 ?占쎌옣???占쎌쟾??蹂댁뿬以€?? */
.ab-synergy-panel, .ab-enemy-panel, .ab-augment-panel {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: var(--ab-panel-w, clamp(84px, 11vw, 160px));
  padding: 4px 5px;
  overflow-y: auto;
  background: rgba(12, 18, 25, 0.82);
  font-size: calc(var(--ab-unit) * 0.9);
  pointer-events: auto;
}
.marmot-ui-shell {
  /* ⚠️ 이 값을 다시 키우지 말 것. 오른쪽 정보 패널은 최대 3개가 동시에 뜨는데(정찰·시너지·
     증강) 예전 값(11vw = 1440px에서 158px)이면 셋이서 474px, 즉 1440x900에 사이드바를 편
     상태의 영상 영역(644px)의 **74%**를 차지했다. 그래서 왼쪽 장비 보관함이 자리를 조금만
     차지해도 곧바로 전장이 패널 밑으로 밀려 들어갔다(브라우저 E2E의 "정보 패널이 내 배치
     구역을 가리지 않는다" 단언이 5px 차이로 겨우 통과하고 있었다). */
  --ab-panel-w: clamp(76px, 8.6vw, 132px);
  /* 장비 보관함은 오른쪽 정보 패널과 폭을 공유하지 않는다. 이 값만큼 캔버스를 왼쪽으로
     밀어 두므로(.ab-canvas-wrap margin-left), 넓힐수록 전장이 그만큼 작아진다.
     한 줄 3칸 기준으로 잡은 값이다 — 열 수를 바꾸면 이 값도 함께 맞출 것. */
  --ab-tray-w: clamp(66px, 8.4vw, 124px);
  /* 전장(과 HUD)이 왼쪽으로 비켜주는 폭. **장비 보관함이 실제로 떠 있을 때만** 값이 생긴다
     (`.marmot-overlay.ab-tray-open`). 전투 중에는 보관함이 `display:none`이라 0이 되어
     전장이 그 자리까지 쓰고 화면 중앙에 놓인다 — 예전에는 이 여백이 전투 중에도 남아
     "맵이 오른쪽으로 쏠려 보인다"는 제보가 나왔다. */
  --ab-board-inset: 0px;
}
.marmot-overlay.ab-tray-open .marmot-ui-shell { --ab-board-inset: var(--ab-tray-w); }
/* ?占쎈Ⅸ履쏙옙??? ?占쎌같 ???占쎈꼫吏€ ??利앷컯. ???占쎈꼸??媛숋옙? ??占쎄컳?占??占쎈떒?占쎌쓣 怨듭쑀?占쎌빞
   以꾩씠 留욌뒗??利앷컯占??占쎈줈 ???占쎈뜕 臾몄젣???占쎌젙). */
.ab-enemy-panel { right: 0; border-left: 1px solid #22303d; }
.ab-synergy-panel { right: var(--ab-panel-w); border-left: 1px solid #22303d; }
.ab-augment-panel { right: calc(var(--ab-panel-w) * 2); border-left: 1px solid #22303d; }
/* 利앷컯 ??占쏙옙?占??占쎌씠肄섏씠 ?占쎌뼱 ?占쎈꼫吏€ ?占쎈낫???占쎌そ ?占쎈갚??鍮꾩뼱 蹂댁씤?? */
.ab-augment-row { border-color: #a678d655; cursor: help; }
.ab-augment-row .syn-body { padding-left: 2px; }
.ab-augment-row .syn-name { color: #a678d6; font-weight: 700; }
.ab-panel-title {
  color: #8b949e; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; font-size: 0.85em; margin-bottom: 2px;
}
.ab-panel-empty { color: #5b6672; line-height: 1.4; font-size: 0.88em; }

.ab-synergy {
  display: flex; align-items: center; gap: 5px;
  padding: 3px 5px; border-radius: 6px;
  background: #1a222c; border: 1px solid #253140;
  opacity: 0.55;
}
.ab-synergy img { width: 1.5em; height: 1.5em; flex: 0 0 auto; }
.ab-synergy.active { opacity: 1; border-color: #3d5670; background: #1d2a38; }
.ab-synergy.active.tier-0 { border-color: #8d6b3f; }
.ab-synergy.active.tier-1 { border-color: #4f7fb5; box-shadow: 0 0 8px rgba(79,127,181,.25); }
.ab-synergy.active.tier-2 { border-color: #f5c542; box-shadow: 0 0 10px rgba(245,197,66,.3); }
.syn-body { min-width: 0; }
.syn-name { color: #e6edf3; font-weight: 600; white-space: nowrap; }
.syn-name b { color: #f5c542; }
.syn-desc {
  color: #8b949e; font-size: 0.82em; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis;
}

.ab-enemy {
  padding: 4px 5px; border-radius: 6px;
  background: #1a222c; border: 1px solid #2b3947;
}
.enemy-name { color: #e6edf3; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.enemy-name span { color: #58a6ff; font-weight: 500; }
.enemy-board { color: #8b949e; font-size: 0.85em; }
.enemy-traits { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 2px; }
.enemy-trait { display: inline-flex; align-items: center; gap: 2px; color: #c9d1d9; font-size: 0.8em; }
.enemy-trait img { width: 1.2em; height: 1.2em; }
.enemy-trait.none { color: #5b6672; }

/* ?占?占?占??占쎄쾶??梨꾪똿 ?占쎈젰占??占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?
   ?占쏀꽣占??占쎄퀬 ?占쏀꽣/Esc占??占쎈뒗?? ?占쎌넚?占??占쎌씠??怨듭슜 梨꾪똿 寃쎈줈占?洹몌옙?占??占쎈떎. */
.ab-chat-input {
  display: none;
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 130;
  width: 420px;
  max-width: 80%;
  padding: 9px 14px;
  border: 1px solid #3d4c60;
  border-radius: 18px;
  background: rgba(8, 13, 20, 0.94);
  color: #e6edf3;
  font-family: inherit;
  font-size: 14px;
  outline: none;
  box-shadow: 0 6px 22px rgba(0,0,0,.6);
}
.ab-chat-input.active { display: block; }
.ab-chat-input::placeholder { color: #6e7c8a; }

/* ?占?占?占??占쏀똻 ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-tooltip {
  position: absolute;
  z-index: 120;
  max-width: 320px;
  padding: 10px 13px;
  border-radius: 8px;
  background: rgba(8, 13, 20, 0.97);
  border: 1px solid #3d4c60;
  box-shadow: 0 8px 28px rgba(0,0,0,.6);
  color: #e6edf3;
  font-size: 13.5px;
  line-height: 1.5;
  pointer-events: none;
}
.marmot-tooltip {
  position: absolute;
  z-index: 1000;
  pointer-events: none;
  background: rgba(18, 23, 29, 0.95);
  border: 1px solid #4b6b87;
  border-radius: 6px;
  padding: 6px 8px;
  color: #c9d1d9;
  font-size: clamp(12px, 1.3vw, 15px);
  line-height: 1.45;
}
.ab-sub-tooltip {
  position: absolute; z-index: 130; max-width: 320px; padding: 8px 12px; border-radius: 6px;
  background: rgba(14, 20, 28, 0.98); border: 1px solid #4a5c73; box-shadow: 0 4px 16px rgba(0,0,0,.7);
  color: #e6edf3; font-size: 13px; line-height: 1.5; pointer-events: none;
  animation: tooltipFadeIn 0.1s ease-out;
}
@keyframes tooltipFadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.tip-head { font-weight: 700; margin-bottom: 3px; }
.tip-head em { color: #f5c542; font-style: normal; font-weight: 600; float: right; }
.tip-head b { color: #f5c542; }
.tip-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.tip-tag { background: #1d2a38; border: 1px solid #2f4256; border-radius: 4px; padding: 1px 6px; font-size: 12px; color: #9fb4c9; }
.tip-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 10px; color: #b6c2ce; font-size: 12.5px; }
/* ⚠️ 스킬 설명의 기본 문장색은 **중립 회색**이어야 한다. 예전에는 `#8fd3ff`(연한 파랑)이라
   주문력(AP) 수치 색과 같은 계열이 되어 숫자가 문장에 묻혀 안 보였다(실제 제보).
   수치 색은 marmotcraft_data.js의 DMG_COLORS가 계수 축별로 정한다. */
.tip-skill { margin-top: 5px; color: #b6c2ce; font-size: 12.5px; }
.tip-skill b { color: #8fd3ff; margin-right: 3px; }
/* 스킬 수치(계수 축 색)는 어두운 툴팁 배경에서 확실히 떠 보이도록 얇은 대비 그림자를 준다.
   색 자체는 인라인 style로 오므로 여기서는 건드리지 않는다. */
.tip-skill .dyn-dmg, .tip-skill .dyn-buff,
.insp-skill .dyn-dmg, .insp-skill .dyn-buff,
.combat-insp-skill .dyn-dmg, .combat-insp-skill .dyn-buff {
  text-shadow: 0 0 3px rgba(0, 0, 0, .85);
  letter-spacing: .2px;
}
.tip-items { display: flex; flex-direction: column; gap: 3px; margin-top: 5px; }
.tip-items img { width: 20px; height: 20px; vertical-align: middle; margin-right: 4px; }
.tip-items small { display: block; color: #8fb3a0; font-size: 11.5px; margin-left: 24px; }
.tip-hint { margin-top: 6px; color: #6e7c8a; font-size: 11.5px; }
.tip-stats.one-col { grid-template-columns: 1fr; color: #a5e6b8; }
.tip-parts { margin-top: 5px; color: #b6c2ce; font-size: 12.5px; }
.tip-parts img { width: 20px; height: 20px; vertical-align: middle; }
.tip-recipes { margin-top: 5px; border-top: 1px solid #24313f; padding-top: 4px; }
.tip-recipes-title { display: block; color: #6e7c8a; font-size: 11.5px; margin-bottom: 2px; }
.tip-recipe { display: flex; align-items: center; gap: 4px; font-size: 12.5px; color: #c9d1d9; }
.tip-recipe img { width: 20px; height: 20px; }
.tip-recipe b { color: #f5c542; font-weight: 600; }

/* ?占?占?占??占쎈떒 ??諛곗튂 ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-mid-row, .ab-bench-row { display: flex; align-items: center; gap: 8px; }
/* 移대뱶 ?占쎈뵫쨌?占쎌뒪?占쏀꽣 2占??占쎈챸???占쎌젣占??占쎌슜?占쎈뒗 ?占쎈굹??怨좎젙 洹쒓꺽. */
.ab-mid-row {
  min-width: 0;
  height: calc(var(--ab-unit) * 7.2);
  overflow: hidden;
}
.ab-mid-row .ab-shop { flex: 0 0 auto; min-width: 0; }
.ab-mid-row .ab-shop-controls {
  display: grid;
  grid-template-columns: auto;
  gap: 3px;
  margin-left: 8px;
}
/* 고정 행 안에서는 조작 항목을 모두 같은 규격으로 압축한다.
   ⚠️ `.ab-sell-zone`을 빼먹지 말 것 — 판매 존이 나중에 4번째 행으로 추가됐는데 이 압축에서
   누락돼 혼자 22.5px(다른 버튼 17.5px)이었고, 그만큼 조작 영역이 `.ab-mid-row`(= --ab-unit*7.2)를
   넘겨 위아래가 잘렸다(실제 제보). 모바일 미디어쿼리에는 같은 압축이 이미 있었다. */
.ab-mid-row .ab-shop-controls .ab-btn,
.ab-mid-row .ab-shop-controls .ab-sell-zone { padding: 2px 7px; line-height: 1.15; }
.ab-mid-row .ab-shop-controls #ab-lock-btn { grid-column: auto; }
.ab-hint { color: #6e7c8a; font-size: 0.85em; margin-left: auto; }
.ab-exp-wrap { display: inline-flex; align-items: center; gap: 5px; }
.ab-exp-bar {
  display: inline-block; width: clamp(40px, 6vw, 90px); height: 5px;
  background: #21262d; border-radius: 3px; overflow: hidden;
}
.ab-exp-bar i { display: block; height: 100%; background: #58a6ff; }
.ab-board-count { color: #c9d1d9; }
.ab-board-count.full { color: #f0883e; font-weight: 700; }
.ab-bench-label { color: #6e7c8a; font-size: 0.85em; margin-right: 2px; }

/* ?占?占?占??占쏀닾 ?占쎈떅 ?占쎌꽭 ?占쎈낫占??占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-combat-inspector {
  position: absolute; z-index: 21; left: 50%; bottom: 8px; transform: translateX(-50%);
  width: min(820px, calc(100% - 24px)); min-height: 72px; box-sizing: border-box;
  grid-template-columns: 64px minmax(180px, 1fr) minmax(180px, 1.25fr) minmax(140px, .9fr);
  align-items: center; gap: 8px; padding: 7px 34px 7px 9px;
  border: 2px solid #4b6b87; border-radius: 10px;
  background: linear-gradient(135deg, #0d141ded, #172433f2);
  box-shadow: 0 5px 22px #000b, inset 0 0 18px #58a6ff12;
  color: #dbe7f3; font-size: clamp(11px, 1.2vw, 14px); pointer-events: auto;
}
.combat-insp-icon { width: 62px; height: 62px; object-fit: contain; filter: drop-shadow(0 2px 3px #000); }
.combat-insp-core { min-width: 0; }
.combat-insp-name { color: #fff; font-size: 1.12em; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.combat-insp-name b { color: #f5c542; }
.combat-insp-name em { margin-left: 6px; padding: 1px 5px; border-radius: 7px; font-size: .76em; font-style: normal; }
.combat-insp-name .team-quokka { color: #70dc8c; background: #173b24; }
.combat-insp-name .team-marmot { color: #ff8f8b; background: #48201f; }
.combat-insp-stats { display: flex; flex-wrap: wrap; gap: 2px 9px; margin-top: 4px; color: #bfcddb; font-variant-numeric: tabular-nums; }
/* 吏€???占쏀깭(踰꾪봽/?占쎈쾭?? 紐⑸줉. ?占쎌옣 移⑼옙? ?占쎌쑝濡쒕쭔 援щ텇?占쏙옙?占??占쎄린???占쎈쫫???占쎈뒗?? */
.combat-insp-status { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 4px; }
/* 상태 칩 줄은 이제 항상 존재한다(10Hz 갱신 때 innerHTML만 바꾸기 위해). 비어 있으면
   margin-top 만큼 빈 공간이 생기므로 숨긴다. */
.combat-insp-status:empty { display: none; }
.combat-insp-buff {
  padding: 0 5px;
  border: 1px solid var(--st-color, #8b949e);
  border-radius: 3px;
  background: color-mix(in srgb, var(--st-color, #8b949e) 18%, transparent);
  color: var(--st-color, #c9d1d9);
  font-weight: 700;
  white-space: nowrap;
}
.combat-insp-skill { min-width: 0; padding-left: 9px; border-left: 1px solid #34495c; }
/* ⚠️ 자식 선택자(`>`)를 반드시 유지할 것. 예전에는 `.combat-insp-skill span`이라
   후손 전체를 잡아서, 스킬 설명 안의 수치 span(`.dyn-dmg`/`.dyn-buff`)까지 전부
   블록이 되어 숫자마다 줄이 끊겼다("반경 2.4칸 모든 적에게 / 46 / 마법 피해를 주고"
   처럼 문단이 중구난방으로 쪼개짐 — 실제 제보). 수치는 문장 안에 인라인으로 흘러야 한다. */
.combat-insp-skill > b, .combat-insp-skill > span { display: block; }
.combat-insp-skill .dyn-dmg, .combat-insp-skill .dyn-buff { display: inline; }
.combat-insp-skill b { color: #8fd3ff; margin-bottom: 2px; }
.combat-insp-skill span { color: #b6c2ce; line-height: 1.25; }
.combat-insp-items { display: flex; flex-wrap: wrap; gap: 3px; align-content: center; }
.combat-insp-item { display: inline-flex; align-items: center; gap: 3px; max-width: 100%; padding: 2px 4px; border-radius: 5px; background: #202b37; }
.combat-insp-item img { width: 26px; height: 26px; flex: 0 0 auto; }
.combat-insp-item b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .83em; }
.combat-insp-none { color: #657483; font-size: .85em; }
.combat-insp-close { position: absolute; top: 3px; right: 5px; padding: 0 4px; border: 0; background: transparent; color: #91a4b7; font-size: 20px; cursor: pointer; }
.combat-insp-close:hover { color: #fff; }

/* ?占?占?占??占쎈떅 ?占쎈낫占?(?占쎌젏 ???占쎈퉬 ?占쎈깽?占쎈━ ?占쎌씠 占?怨듦컙) ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-inspector {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 640px;
  margin: 0 0 0 auto;
  height: calc(var(--ab-unit) * 7.2);
  contain: layout paint;
  box-sizing: border-box;
  padding: calc(var(--ab-unit) * 0.35) calc(var(--ab-unit) * 0.5);
  border: 1px solid #30363d;
  border-radius: 12px;
  background: linear-gradient(145deg, #161b22, #0d1117);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  overflow: hidden;
  display: grid;
  /* ?占쎈Ⅸ履쎌씠 ?占쏀꺈 寃⑹옄(4?????占쎌そ 癒몃━留먮낫???占쎌떎???占쎌뼱???占?????占쎈┛??
     醫곴쾶 ?占쎌쑝占?`??100`쨌`??.85` 媛숋옙? 占?媛믪씠 留먯쨪?占쎌쑝占??占쎈┛???占쎌륫). */
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr);
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: calc(var(--ab-unit) * 0.7) calc(var(--ab-unit) * 0.35);
  font-size: 0.9em;
  line-height: 1.25;
}
.ab-inspector-empty { grid-column: 1 / -1; grid-row: 1 / -1; color: #6e7681; font-size: 0.95em; margin: auto; text-align: center; }
.insp-head { grid-column: 1; grid-row: 1; display: flex; align-items: center; gap: calc(var(--ab-unit) * 0.35); min-width: 0; }
.insp-icon { width: calc(var(--ab-unit) * 1.7); height: calc(var(--ab-unit) * 1.7); flex: 0 0 auto; }
.insp-title { min-width: 0; flex: 1 1 auto; }
.insp-name { color: #e6edf3; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.insp-name b { color: #f5c542; }
.insp-name em { color: #f5c542; font-style: normal; font-weight: 600; margin-left: 3px; }
.insp-tags { display: flex; gap: 3px; overflow: hidden; }
.insp-tag {
  display: inline-flex; align-items: center; gap: 2px; white-space: nowrap;
  color: #9fb4c9; font-size: 0.9em;
}
.insp-tag img { width: 1.05em; height: 1.05em; }
.insp-items { display: flex; gap: 4px; flex: 1 1 auto; min-width: 0; overflow: hidden; }
.insp-item { width: calc(var(--ab-unit) * 1.1); height: calc(var(--ab-unit) * 1.1); flex: 0 0 auto; cursor: pointer; }
.insp-items-row {
  grid-column: 1 / -1; grid-row: 3;
  display: flex; align-items: center; gap: 6px; min-width: 0;
  padding-top: 4px; border-top: 1px solid rgba(255,255,255,0.08);
}
.insp-items-label { color: #6e7681; font-size: 0.85em; flex: 0 0 auto; white-space: nowrap; }
.insp-items-none { color: #5b6672; font-size: 0.85em; }
/* ?占쏀꺈?占?媛쒖닔媛€ ?占쎈떅留덈떎 ?占쎈Ⅴ??蹂댄샇留됀룸쭏?占쏙옙? ?占쎌쑝占?6??占?.
   ?占쏙툘 ?占쎌쟾?占쎈뒗 `flex-wrap` + `max-height: 2.5em; overflow: hidden`?占쎈씪
   蹂댄샇留됱씠 ?占쎈뒗 ?占쎈떅?占쎌꽌占?以꾩씠 ?占쎈굹 ???占쎄꺼 **留덌옙?占?以꾩씠 諛섓옙? ?占쎈젮?占쎄컮占?*,
   占?諛붾엺???占쎈낫李쎌씠 ?占쎈떅???占쎈씪 ?占쎈Ⅸ 紐⑥뼇?占쎈줈 蹂댐옙????占쎌젣 ?占쎈낫).

   吏€湲덌옙? **4??횞 2??怨좎젙 寃⑹옄**?? 8占?蹂댄샇占?留덈굹)源뚳옙? ??占쏙옙 2?占쎌뿉 ?占쎌뼱媛€誘€占?   ?占쎈떅??臾댁뾿?占쎈뱺 ??釉붾줉???占쎌씠媛€ ?占쎄컳占? ?占쎈뒗 ?占쎈줈 怨듦컙?占??占쏙옙? ?占쏀궗 ?占쎈챸??媛€?占쎄컙??
   ?占쏙툘 3?占쎈줈 以꾩씠占?3?占쎌씠 ?占쎌뼱 ?占쏀궗 ?占쎌뿭??40px占?醫곸븘吏€占? ?占쎌꽕怨꾨줈 湲몄뼱占?   ?占쎈챸(理쒖옣 87????1???占쎈떅遺€???占쏀겕濡ㅻ맂???占쎌륫). ???占쏙옙? 以꾩씠吏€ 占?占? */
.insp-stats {
  grid-column: 2; grid-row: 1;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-auto-rows: 1.3em;
  align-content: start;
  justify-items: start;
  gap: 0 calc(var(--ab-unit) * 0.25);
  min-height: 2.6em;            /* 2以?= 理쒕? 10媛쒓퉴吏€ 媛숈? ?믪씠 (諛⑹뼱??留덈갑 遺꾨━濡???ぉ 1媛??섏뼱?? */
  color: #b6c2ce; font-size: 0.92em;
  white-space: nowrap;
}
.insp-stats > span { overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.insp-skill {
  grid-column: 1 / -1; grid-row: 2; min-width: 0; min-height: 28px;
  color: #8b949e; font-size: 1.05em; line-height: 1.3;
  white-space: normal; overflow-x: hidden; overflow-y: auto;
  scrollbar-width: thin; scrollbar-color: #34495c transparent;
}
.insp-skill b { color: #8fd3ff; margin-right: 4px; }
.insp-skill span { white-space: normal; overflow-wrap: anywhere; }

/* 전장 왼쪽에 세로로 붙는 장비 보관함.
   시너지/정찰/증강 패널과 같은 top:0~bottom:0 절대배치이지만, **그 셋과 달리 캔버스가
   자기 폭을 비워 준다**(`.ab-canvas-wrap`의 margin-left) — 오른쪽 세 패널이 가리는 것은
   상대 진영이라 상관없지만, 왼쪽은 내가 유닛을 놓는 아군 배치 구역이기 때문이다.
   그래서 폭도 `--ab-panel-w`(오른쪽 패널용)가 아니라 전용 `--ab-tray-w`를 쓴다.
   ⚠️ 한 줄 3칸 규격이다. 4칸으로 되돌리면 슬롯이 작아지거나 폭을 넓혀야 하는데,
   폭을 넓히면 그만큼 전장이 좁아진다(가리지는 않지만 작아진다). */
.ab-item-tray {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  z-index: 20;
  width: var(--ab-tray-w, clamp(66px, 8.4vw, 124px));
  box-sizing: border-box;
  display: flex; flex-direction: column; gap: 4px;
  background: rgba(18, 23, 31, 0.85);
  border-right: 1px solid #2a3746;
  padding: 4px 6px;
  overflow-y: auto;
  pointer-events: auto;
}
.ab-tray-title { 
  flex: 0 0 auto; color: #a5b4c3; font-size: 0.82em; 
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  padding-bottom: 3px; margin-bottom: 2px;
}
.ab-tray-title small { color: #6e7c8a; font-size: 0.9em; }
/* 좌측 보관함은 폭이 좁아(--ab-tray-w) 제목과 부제를 한 줄에 놓으면 글자가 중간에서
   꺾인다("장비보관 / 함 (5/12)"). 세로로 쌓고 각 줄은 꺾지 않는다. */
.ab-item-tray .ab-tray-title {
  flex-direction: column; align-items: flex-start; gap: 1px;
  font-size: 0.76em; line-height: 1.25;
}
.ab-item-tray .ab-tray-title > span,
.ab-item-tray .ab-tray-title small { white-space: nowrap; }
.ab-tray-slots {
  min-width: 0; display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: minmax(0, 1fr);
  gap: 3px;
}
/* ???⑤꼸(醫뚯륫 ?ㅻ쾭?덉씠)?먯꽌留???以꾩뿉 4媛쒖뵫, ?щ’?????ш쾶 ?쒖떆?쒕떎. */
.ab-item-tray .ab-tray-slots {
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.ab-tray-empty { grid-column: 1 / -1; align-self: center; text-align: center; color: #5b6672; font-size: 0.9em; }
.ab-item-slot {
  width: 100%; height: 100%; max-height: calc(var(--ab-unit) * 2.0);
  border-radius: 4px; border: 1px solid #35455a; background: #1a222c;
  cursor: grab; display: flex; align-items: center; justify-content: center;
  touch-action: none; position: relative;
}
/* 釉뚮씪?곗????ㅼ씠?곕툕 ?대?吏€ ?쒕옒洹??뚯뼱??????뿉 ?닿린 ??媛€ ?쒖옉?섎㈃
   而ㅼ뒪?€ pointerdown 湲곕컲 ?쒕옒洹??μ갑쨌議고빀)媛€ 以묎컙???딄꺼 踰꾨┛??
   img??draggable="false"瑜?遺숈?吏€留??댁쨷 ?덉쟾?μ튂濡?CSS?먯꽌??留됰뒗?? */
.ab-item-slot, .ab-item-slot img,
.ab-bench-slot, .ab-bench-slot img,
.ab-shop-slot, .ab-shop-slot img {
  -webkit-user-drag: none;
  user-select: none;
  -webkit-touch-callout: none;
}
/* 醫뚯륫 ?ㅻ쾭?덉씠 ?⑤꼸???щ’?€ ??以?4移?洹쒓꺽??留욎떠 ?뺤궗媛곹삎?쇰줈 ???ш쾶. */
.ab-item-tray .ab-item-slot {
  aspect-ratio: 1 / 1;
  max-height: none;
}
.ab-item-slot:hover { border-color: #f5c542; }
.ab-item-slot.completed { border-color: #8d6b3f; background: #241f16; }
/* 장비 선택 상태(.selected / .ab-equipping)는 없앴다 — 장비는 드래그로만 장착한다.
   클릭 장착을 되살리지 않는 한 이 클래스들은 어디서도 붙지 않는다. */
.ab-item-slot img { width: 96%; height: 96%; }

/* ── 아군 아이템 전달 슬롯 (2대2) ──
   보관함 그리드 아래의 직사각형 드롭 구역. 아이템을 습득해도 아이템 칸들만 줄이
   늘어나고, 이 영역은 항상 같은 높이를 차지한다. 올린 부품의 아이콘은 본래
   정사각형 규격을 유지한다(드롭 구역이 직사각형이어도 늘리지 않는다). */
.ab-exchange {
  flex: 0 0 auto;
  /* 보관함 패널 하단에 고정한다. 아이템 칸이 많아 패널을 채우면 자동으로 0이 되어
     슬롯 바로 아래에 붙는다(스크롤도 정상). */
  margin-top: auto;
  padding-top: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}
.ab-exchange .ab-tray-title small { color: #7fd0a0; font-size: 0.8em; }
.ab-exchange-slot {
  width: 100%;
  height: 46px;
  border-radius: 4px;
  border: 1px dashed #4a6a55;
  background: rgba(30, 46, 38, 0.5);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; touch-action: none;
}
.ab-exchange-slot img {
  width: 32px; height: 32px;
  object-fit: contain;
  pointer-events: none;
}
.ab-exchange-slot.filled {
  border-style: solid;
  border-color: #7fd0a0;
  background: rgba(30, 60, 46, 0.7);
}
.ab-exchange-slot.mate-ready { border-color: #5b9b6e; box-shadow: 0 0 0 1px rgba(127, 208, 160, 0.35); }
.ab-exchange-empty { color: #5b8068; font-size: 1.15em; line-height: 1; }
.ab-exchange-slot:hover { border-color: #a8e6c0; }

/* ?€?€?€ ?먮ℓ 踰꾪듉 (?곸젏 而⑦듃濡? "怨좎젙" 踰꾪듉 諛붾줈 ?꾨옒) ?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€?€
   ?덉쟾???섎떒 蹂닿???以???margin-left:auto)???먯꽑 ?쒕∼議댁쑝濡??좎꽌 ?붾㈃???볤쾶
   李⑥??덈떎. ?댁젣 ?ㅻⅨ ?곸젏 踰꾪듉?ㅺ낵 媛숈? ?먮━쨌洹쒓꺽???곕릺, ?먮ℓ?쇰뒗 ?뱀꽦??
   ?쒕윭?섎룄濡??됰쭔 寃쎄퀬 ?ㅼ쑝濡??④릿?? ?쒕옒洹명빐???좊떅???뚯뼱???볥뒗 寃껊룄
   ?ъ쟾???섍퀬(?몃뱾?щ뒗 handleDrop 李멸퀬), ?좊떅???대┃ ?좏깮?????뚮윭???쒕떎. */
.ab-sell-zone {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 4px 10px; border-radius: 6px;
  border: 1px dashed #6b3b3b; background: #241a1c;
  color: #e0a0a0; font-size: 0.85em; font-weight: 600; cursor: pointer;
  white-space: nowrap;
}
.ab-sell-zone.ready { border-style: solid; border-color: #f85149; background: #3a1f22; color: #ffb4b4; }
.ab-sell-zone.hot { border-color: #f85149; background: #3a1f22; color: #ffb4b4; }

/* ?占?占?占??占쎈옒占?怨좎뒪???占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-drag-ghost {
  position: fixed; z-index: 1000002;
  width: 46px; height: 46px; margin: -23px 0 0 -23px;
  pointer-events: none; opacity: .9;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,.6));
}
.ab-drag-ghost img { width: 100%; height: 100%; }
body.ab-dragging { cursor: grabbing; }

/* 장비 조합 미리보기 (드래그 중 "무엇이 되는지"). 일반 툴팁은 드래그 중 숨기므로 별도 요소. */
.ab-combine-preview {
  position: absolute; z-index: 1000003; width: 232px;
  padding: 9px 11px; border-radius: 8px;
  background: rgba(8, 13, 20, 0.98); border: 1px solid #f5c542;
  box-shadow: 0 8px 28px rgba(0,0,0,.7);
  color: #e6edf3; font-size: 12.5px; line-height: 1.45;
  pointer-events: none;
}
.ab-combine-preview .cp-head { font-weight: 700; font-size: 12px; color: #f5c542; margin-bottom: 5px; }
.ab-combine-preview .cp-head em { float: right; font-style: normal; font-weight: 600; color: #9fb4c9; }
.ab-combine-preview .cp-head.cp-none { color: #ff8a8a; }
.ab-combine-preview .cp-pair {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  padding: 5px 0; border-bottom: 1px solid #263241;
}
.ab-combine-preview .cp-pair img { width: 26px; height: 26px; }
.ab-combine-preview .cp-pair .cp-result-icon { width: 36px; height: 36px; filter: drop-shadow(0 0 6px rgba(245,197,66,.65)); }
.ab-combine-preview .cp-op { color: #7d8b9a; font-weight: 700; }
.ab-combine-preview .cp-x { color: #ff8a8a; font-weight: 700; font-size: 18px; }
.ab-combine-preview .cp-name { margin-top: 6px; font-weight: 700; color: #ffe9a8; text-align: center; }
.ab-combine-preview .cp-stats { display: flex; flex-direction: column; gap: 1px; margin-top: 5px; color: #a5e6b8; font-size: 12px; }
.ab-combine-preview .cp-desc { margin-top: 5px; color: #b6c2ce; font-size: 11.5px; }
.ab-combine-preview .cp-hint { margin-top: 6px; color: #6e7c8a; font-size: 11px; }
/* 놓기 전에 성공 여부를 알 수 있도록 대상 슬롯을 강조한다. */
.ab-item-slot.combine-hover { border-color: #f5c542 !important; box-shadow: 0 0 0 2px rgba(245,197,66,.45); }
.ab-item-slot.combine-blocked { border-color: #f85149 !important; opacity: .6; }
.marmot-overlay.ab-placing .ab-canvas-wrap { box-shadow: inset 0 0 0 2px rgba(88,166,255,.5); }
/* ?占쎈떅???占쎌뼱?占쎈┛ ?占쎌븞?占쎈뒗 ?占쎈낫李쎌쓣 媛먯텣?? ?占쎈낫李쎌씠 ?占쎌옣 ?占쎈옒履쎌쓣 ??占쏙옙 ?占쎌뼱??   洹몌옙?占??占쎈㈃ ?占쎈떅???占쎈뵒???占쎌쓣吏€媛€ ??蹂댁씤???占쎌젣 ?占쎈낫).
   ?占쎈━???占쏙옙??占쎌빞(visibility) ?占쎈젅?占승룹긽???占쎌씠?占쎌썐???占쎈뱾由э옙? ?占쎈뒗?? */
.marmot-overlay.ab-placing .ab-inspector { visibility: hidden; }

/* ?占?占?占??占쏀닾 ?占쎌빟 ???占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.result-table { margin-top: 10px; font-size: 12px; text-align: left; }
.result-row {
  display: grid; grid-template-columns: 1.4fr 0.8fr 1.1fr 0.7fr;
  gap: 6px; padding: 2px 0; align-items: center; word-break: keep-all; white-space: nowrap;
}
.result-row.head { color: #6e7c8a; border-bottom: 1px solid #2b3947; padding-bottom: 3px; }
.result-row.dead { opacity: .5; }
.cell-unit { display: flex; align-items: center; gap: 4px; color: #e6edf3; white-space: nowrap; overflow: hidden; }
.cell-unit img { width: 16px; height: 16px; }
.cell-unit b { color: #f5c542; }
.cell-dmg { color: #ffb870; font-weight: 700; }

/* ?占?占?占??占쎌젏 ?占쎈’ 異뷂옙? ?占쎄린 ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-shop-slot .slot-traits { position: absolute; z-index: 4; top: 4px; left: 4px; display: flex; gap: 3px; }
.ab-shop-slot .slot-trait { width: 1.25em; height: 1.25em; opacity: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.ab-bench-slot .slot-traits { position: absolute; z-index: 4; top: 2px; left: 2px; display: flex; gap: 2px; pointer-events: none; }
.ab-bench-slot .slot-trait { width: 1.1em; height: 1.1em; opacity: 1; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.8)); }
.ab-shop-slot.poor { opacity: .6; }
.ab-shop-slot.owned { box-shadow: inset 0 0 0 2px rgba(63,185,80,.8), 0 0 8px rgba(63,185,80,.3); }
.ab-shop-slot.owned::after { content: '보유'; position: absolute; top: 4px; right: 4px; background: #238636; color: #fff; font-size: 0.7em; padding: 1px 4px; border-radius: 4px; font-weight: bold; z-index: 5; text-shadow: none; }
.ab-shop-slot.owned .unit-cost { top: 20px; right: 4px; }
.ab-shop-slot .sold-out { color: #3d4552; font-size: 0.85em; }
.ab-bench-slot .slot-items { position: absolute; bottom: 1px; display: flex; gap: 1px; }
.ab-bench-slot .slot-item {
    width: 1.5em; height: 1.5em; cursor: pointer;
  border-radius: 3px; background: rgba(8,13,20,.6);
}
.ab-bench-slot .slot-item:hover { outline: 1px solid #f5c542; }
.ab-bench-slot { touch-action: none; }
.ab-lobby-sub { color: #8b949e; margin: 0; font-size: 0.95em; }
.ab-pve-badge {
  display: inline-flex; align-items: center; padding: 2px 8px;
  border-radius: 4px; background: #3a2a12; border: 1px solid #8d6b3f;
  color: #f0b45c; font-weight: 700;
}
.ab-augment-card.kind-economy { border-color: #8d7a3f; }
.ab-augment-card.kind-roster { border-color: #3f6b8d; }
.ab-augment-card.kind-synergy { border-color: #7a3f8d; }
.ab-augment-card.kind-grant { border-color: #3f8d5c; }

/* ?占?占?占??占쎈━ ?占쎌텧 移대뱶 (matchEnd ?占쎈꽕留덊떛) ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
.ab-victory-card {
  position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%) scale(0.6);
  z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 9px;
  opacity: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(22,26,34,.92), rgba(12,15,20,.94));
  border: 1px solid rgba(245,197,66,.55); border-radius: 18px;
  padding: 22px 36px;
  box-shadow: 0 0 46px rgba(245,197,66,.28), inset 0 0 18px rgba(245,197,66,.08);
  transition: opacity .45s ease, transform .45s ease;
}
.ab-victory-card.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.ab-victory-avatar {
  width: 74px; height: 74px; border-radius: 50%; overflow: hidden;
  border: 2px solid #f5c542; background: #2a3140;
  display: flex; align-items: center; justify-content: center; font-size: 34px;
  box-shadow: 0 0 16px rgba(245,197,66,.35);
}
.ab-victory-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ab-victory-name { color: #fff; font-size: 18px; font-weight: 800; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ab-victory-title { color: #f5c542; font-size: 26px; font-weight: 900; letter-spacing: 3px; text-shadow: 0 0 14px rgba(245,197,66,.6); }

/* ?占?占?占?Mobile Responsive ?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?占?*/
@media (max-width: 768px) {
  /* 諛€??--ab-unit)???占쎈씪?占쎌뼵?占쏙옙? 怨꾩궛?占쏙옙?占??占쎄린?占쎈뒗 諛곗튂占?議곗젙?占쎈떎. */
  .ab-lobby-teams { flex-direction: row; gap: 12px; }
  .ab-augment-choices { flex-direction: row; }
  /* 醫곻옙? ?占쎈㈃?占쎌꽌???占쎈낫 ?占쎈꼸???占쎌뼱 ?占쎌옣??理쒙옙????占쎄쾶 ?占쎈떎.
     ?占쎌같 ?占쎈꼸???占쎈씪吏€誘€占??占쎈꼫吏€媛€ 占??占쎈Ⅸ占? 利앷컯??占??占쎌そ?占쎈줈 ??移몄뵫 ?占쎄꺼吏꾨떎.
     ?占쏙툘 利앷컯 ?占쎈꼸???占쏀봽?占쎌쓣 ?占쎌뒪?占쏀넲 占?*2)?占쎈줈 ?占쎈㈃ ?占쎄린???占쎈㈃ 諛뽰쑝占?諛€?占쎈궃?? */
  .ab-synergy-panel,
  .ab-augment-panel { width: clamp(64px, 22vw, 110px); padding: 3px 4px; }
  .ab-synergy-panel { right: 0; }
  .ab-augment-panel { right: clamp(64px, 22vw, 110px); }
  .ab-enemy-panel { display: none !important; }
  .ab-hint { display: none; }
  /* ?占쎌튂 ?占???占쎈낫: 醫곻옙? ?占쎈㈃?占쎌꽌??HUD 踰꾪듉??議곌툑 ?占쎌슫??寃뱀튂吏€ ?占쎄쾶 gap???占쎄퍡). */
  .ab-hud-actions { gap: 8px; }
  .ab-hud-actions .ab-fullscreen-btn,
  .ab-hud-actions .ab-exit-btn { width: 32px; height: 32px; font-size: 16px; }
  /* ⚠️ `.ab-item-tray`의 width를 직접 덮지 말 것 — 캔버스가 비워 두는 폭
     (`.ab-canvas-wrap`의 margin-left)이 같은 변수를 보므로 둘이 어긋난다.
     변수만 바꾸면 보관함과 전장 여백이 항상 함께 움직인다. */
  .marmot-ui-shell { --ab-tray-w: clamp(54px, 17vw, 92px); }
  .ab-tray-title { display: none; }
  /* 醫곻옙? ?占쎈㈃?占쎌꽌???占쎈낫李쎌쓣 ?占쎈뒗???占쏀똻??媛숋옙? ?占쎈낫媛€ ?占쎈떎). */
  .ab-inspector { display: none; }
  .ab-combat-inspector {
    bottom: 4px; width: calc(100% - 10px); min-height: 58px;
    grid-template-columns: 46px minmax(105px, .8fr) minmax(150px, 1.2fr);
    gap: 5px; padding: 4px 25px 4px 5px; font-size: 9px;
  }
  .combat-insp-icon { width: 44px; height: 44px; }
  .combat-insp-items { display: none; }
  .combat-insp-skill { padding-left: 5px; }
  .combat-insp-stats { gap: 1px 5px; }
  /* 데스크톱 압축 규칙(.ab-mid-row .ab-shop-controls .ab-sell-zone)이 특정도가 더 높아
     여기서 같은 범위로 다시 지정하지 않으면 모바일 값이 덮인다. */
  .ab-sell-zone,
  .ab-mid-row .ab-shop-controls .ab-sell-zone { padding: 3px 7px; }
  .syn-desc { display: none; }
  /* 醫곻옙? ?占쎈㈃?占쎌꽌???占쎈떒 ?占쎌씠占?理쒙옙???以꾩뿬 ?占쎌옣???占쎄쾶 ?占쎄릿?? */
  .ab-mid-row { height: calc(var(--ab-unit) * 4.6); }
  .ab-shop-controls { display: flex; flex-direction: row; gap: 4px; margin-left: 6px; }
  .ab-shop-controls #ab-lock-btn { grid-column: auto; }
  .ab-economy-bar { padding: 2px 8px; }
  .ab-shop { padding: 2px 8px; }
  .ab-bench { padding: 2px 8px 3px; }
  .ab-bench-label { display: none; }

  .ab-challenge-modal { padding: 0; }
  .ab-challenge-card { padding: 12px 14px; border-radius: 12px; }
  .ab-challenge-icon { font-size: 28px; margin-bottom: 5px; }
  .ab-challenge-card h3 { font-size: 15px; margin-bottom: 5px; }
  .ab-challenge-card p { font-size: 12px; }
  .ab-challenge-countdown { margin: 7px 0; font-size: 19px; }
  .ab-challenge-actions .ab-btn { min-height: 32px; padding: 4px 8px; font-size: 12px; }
}

/* ?꾪닾 以??꾩씠??蹂닿???(?쇱そ ?섎떒) */
.ab-combat-item-tray {
  position: absolute;
  bottom: 24px;
  left: 24px;
  background: rgba(11, 16, 23, 0.85);
  border: 1px solid rgba(88, 166, 255, 0.3);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 20;
  pointer-events: auto;
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.ab-combat-item-tray .ab-tray-title {
  color: #a3d3ff;
  font-size: 14px;
  font-weight: bold;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ab-combat-item-tray .ab-tray-title small {
  color: #888;
  font-weight: normal;
  font-size: 11px;
}
.ab-combat-item-tray .ab-tray-slots {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  width: calc(var(--ab-unit) * 16); /* ?먮꼸???ш린 */
}
.ab-combat-item-tray .ab-item-slot {
  width: calc(var(--ab-unit) * 2.8);
  height: calc(var(--ab-unit) * 2.8);
  background: rgba(0,0,0,0.6);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s, border-color 0.1s;
}
.ab-combat-item-tray .ab-item-slot:hover {
  transform: scale(1.05);
  border-color: rgba(255,255,255,0.4);
}
.ab-combat-item-tray .ab-item-slot img {
  width: 90%; height: 90%;
}
.ab-combat-item-tray .ab-item-slot.completed {
  border-color: rgba(255, 215, 0, 0.6);
  box-shadow: 0 0 6px rgba(255,215,0,0.2);
}
/* (`.selected`는 장비 클릭 선택과 함께 사라졌다 — 위 .ab-item-slot 쪽 주석 참고) */

/* ?몄뒪?숉꽣 ?꾩씠???대┃ 諛섏쓳??*/
.insp-item, .combat-insp-item {
  transition: transform 0.1s, box-shadow 0.1s;
}
.insp-item:hover, .combat-insp-item:hover {
  transform: scale(1.1);
  box-shadow: 0 0 5px rgba(255,255,255,0.5);
  border-radius: 4px;
}

/* 장착 아이템 패널 (보관소 우측 빈공간) */
.ab-equip-inspector {
  flex: 1 1 0;
  width: 100%;
  min-width: 0;
  max-width: 640px;
  margin: 0 0 0 auto;
  height: 100%;
  min-height: calc(var(--ab-unit) * 3.2);
  box-sizing: border-box;
  padding: 6px calc(var(--ab-unit) * 0.5);
  border: 1px solid #30363d;
  border-radius: 12px;
  background: linear-gradient(145deg, #161b22, #0d1117);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
  align-items: center;
  gap: 12px;
}
.ab-equip-inspector .insp-items-label {
  color: #6e7681;
  font-size: 0.9em;
  white-space: nowrap;
}
.ab-equip-inspector .insp-items-none {
  color: #5b6672;
  font-size: 0.85em;
}
.ab-equip-inspector .insp-items {
  display: flex; gap: 8px; flex: 1 1 auto; min-width: 0; overflow: hidden;
}
.ab-equip-inspector .insp-item {
  width: calc(var(--ab-unit) * 2.6);
  height: calc(var(--ab-unit) * 2.6);
  flex: 0 0 auto;
  cursor: pointer;
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,0.1);
}
/* 장비 드래그 중 장착 아이템 패널 하이라이트 */
.ab-equip-inspector.drop-target {
  border-color: #58a6ff;
  background: linear-gradient(145deg, rgba(56,139,253,0.15), rgba(13,17,23,0.95));
  box-shadow: 0 0 12px rgba(56,139,253,0.35), 0 4px 12px rgba(0,0,0,0.4);
  transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}