/* 모바일 전체 화면 군장 가방 (M8 시각 디자인)
 *
 * 구조는 2열이다. 왼쪽 = 지금 메고 있는 1~6번, 오른쪽 = 가진 무기 전부.
 * 가운데에 큰 무기 그림과 잔탄을 따로 두던 초안은 폐기했다 — 왼쪽 칸이 이미 같은 것을
 * 말하고 있어서 화면만 먹었다.
 *
 * 설계 전제 세 가지:
 * 1) 가로 화면 폰에서 세로가 희소 자원이다(390 / 375px). 세로 스크롤을 만들지 않는다.
 *    오른쪽 무기 선반만 넘칠 때 스크롤한다.
 * 2) 두 엄지는 좌·우 하단 호에만 닿는다. 누를 것은 전부 좌우 열에 둔다.
 * 3) 무기 아트는 어두운 라인아트다. 반드시 밝은 안감 위에 올린다.
 *    (스토리 가방이 탄색 lining을 쓰는 이유와 같다)
 *
 * 팔레트는 story-r3-inventory-bag.css의 야전 군장 DNA를 그대로 잇는다.
 */

.mib-root {
  --mib-canvas: #4b5140;
  --mib-dark: #282d25;
  --mib-edge: #171b17;
  --mib-lining: #c4b994;
  --mib-lining-lit: #ddd3ae;
  --mib-ink: #f2ecd8;
  --mib-gold: #f4d77a;
  --mib-stencil: #c7b77e;
  --mib-danger: #d8695c;

  --mib-pad: clamp(8px, 1.6vh, 13px);
  --mib-gap: clamp(5px, 1.1vh, 9px);
  /* 왼쪽 열은 뷰포트가 아니라 본문 폭에 매단다. vw로 잡으면 가방을 다른 컨테이너에
     넣어 미리볼 때 값이 어긋나고, 태블릿에서 열만 과하게 넓어진다. */
  --mib-col: clamp(196px, 30%, 268px);

  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  /* 암묵 행은 auto라 셸이 콘텐츠 높이로 자라 화면을 넘긴다. 뷰포트에 가둔다. */
  grid-template-rows: minmax(0, 1fr);
  color: var(--mib-ink);
  font-family: "Pretendard", "Noto Sans KR", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

.mib-root[hidden] { display: none !important; }
.mib-root * { box-sizing: border-box; }

/* ── 배경 ─────────────────────────────────────────────── */

.mib-scrim {
  position: absolute;
  inset: 0;
  background: rgba(6, 9, 6, 0.72);
  backdrop-filter: blur(3px) saturate(0.7);
  -webkit-backdrop-filter: blur(3px) saturate(0.7);
}

/* ── 가방 껍데기 ──────────────────────────────────────── */

.mib-shell {
  position: relative;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: var(--mib-gap);
  min-height: 0;
  /* 노치는 가로 화면에서 좌우로 온다 */
  padding:
    max(var(--mib-pad), env(safe-area-inset-top))
    max(var(--mib-pad), env(safe-area-inset-right))
    max(var(--mib-pad), env(safe-area-inset-bottom))
    max(var(--mib-pad), env(safe-area-inset-left));
  background:
    repeating-linear-gradient(48deg, rgba(0, 0, 0, 0.05) 0 2px, transparent 2px 5px),
    linear-gradient(160deg, #545b48, var(--mib-canvas) 46%, #3d4335);
  animation: mib-rise 180ms cubic-bezier(0.2, 0.9, 0.3, 1) both;
}

@keyframes mib-rise {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

/* ── 머리 (플랩) ──────────────────────────────────────── */

.mib-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 5px;
  border-bottom: 2px dashed rgba(23, 27, 23, 0.55);
}

.mib-head strong {
  font-size: clamp(14px, 2.4vh, 18px);
  letter-spacing: 0.1em;
  text-shadow: 0 2px 2px rgba(20, 24, 18, 0.8);
}

.mib-stencil {
  color: var(--mib-stencil);
  font: 800 clamp(9px, 1.4vh, 11px)/1.2 ui-monospace, monospace;
  letter-spacing: 0.2em;
}

/* 닫기는 이것 하나다. 가운데 "닫고 계속" 버튼은 없앴다. 배경 탭으로도 닫힌다. */
.mib-head .mib-x {
  margin-left: auto;
  flex: none;
  width: 54px;
  /* 화면에 있는 유일한 닫기 수단이다(배경 탭 제외). 짧은 가로 화면에서도 44px 밑으로 내리지 않는다.
     44 정확히 주면 반올림 때문에 43.x로 측정되므로 여유를 둔다. */
  height: 46px;
  border: 2px solid var(--mib-edge);
  border-radius: 9px;
  background: linear-gradient(160deg, #6d7758, #3f4735);
  box-shadow: 0 3px 0 rgba(18, 21, 17, 0.9);
  color: var(--mib-ink);
  font: 300 22px/1 sans-serif;
  cursor: pointer;
}
.mib-head .mib-x:active { transform: translateY(2px); box-shadow: 0 1px 0 rgba(18, 21, 17, 0.9); }

/* ── 본문: 왼쪽 1~6 | 오른쪽 무기 선반 ─────────────────── */

.mib-body {
  display: grid;
  grid-template-columns: var(--mib-col) minmax(0, 1fr);
  gap: var(--mib-gap);
  min-height: 0;
}

/* 왼쪽: 지금 메고 있는 6칸. 한 열로 세워 1~6 번호 순서가 그대로 보이게 한다. */
.mib-col {
  display: grid;
  grid-template-rows: repeat(6, minmax(0, 1fr));
  gap: calc(var(--mib-gap) * 0.7);
  min-height: 0;
}

/* ── 왼쪽 슬롯 (가로로 눕힌 한 줄) ────────────────────── */

.mib-slot {
  position: relative;
  display: grid;
  grid-template-columns: 20px clamp(40px, 22%, 58px) minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px;
  min-height: 0;
  padding: 4px 7px 4px 5px;
  border: 2px solid var(--mib-edge);
  border-radius: 9px;
  background: linear-gradient(150deg, rgba(63, 70, 56, 0.96), rgba(32, 37, 31, 0.98));
  box-shadow: 0 2px 0 rgba(18, 21, 17, 0.9), inset 0 1px rgba(255, 255, 255, 0.07);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 90ms ease, border-color 120ms ease, background-color 120ms ease;
}

.mib-slot:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(18, 21, 17, 0.9); }

.mib-key {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(239, 226, 180, 0.5);
  border-radius: 4px;
  background: #1a1e1a;
  color: var(--mib-gold);
  font: 700 11px/1 ui-monospace, monospace;
}

.mib-slot-copy { min-width: 0; }

.mib-role {
  display: block;
  overflow: hidden;
  color: rgba(242, 236, 216, 0.56);
  font-size: clamp(8px, 1.3vh, 10px);
  font-weight: 800;
  letter-spacing: 0.1em;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mib-name {
  display: block;
  overflow: hidden;
  font-size: clamp(11px, 1.9vh, 14px);
  font-weight: 800;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.mib-ammo {
  flex: none;
  color: var(--mib-gold);
  font: 800 clamp(11px, 1.8vh, 13px)/1 ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

.mib-slot.is-dry .mib-ammo,
.mib-tile.is-dry .mib-ammo { color: var(--mib-danger); }

.mib-slot.is-equipped {
  border-color: #8d7a37;
  background: linear-gradient(150deg, rgba(120, 103, 45, 0.5), rgba(48, 44, 27, 0.98));
}

.mib-slot.is-empty {
  border-style: dashed;
  border-color: rgba(23, 27, 23, 0.7);
  background: rgba(30, 35, 28, 0.5);
  box-shadow: none;
  cursor: default;
}
.mib-slot.is-empty .mib-name { color: rgba(242, 236, 216, 0.36); font-weight: 700; }

/* ── 오른쪽 선반: 가진 무기 전부 ──────────────────────── */

.mib-rack {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 5px;
  min-height: 0;
  min-width: 0;
}

.mib-rack .mib-rack-grid { grid-column: 1 / -1; }

/* 발사 모드는 선반 머리 오른쪽에 붙는다. 모드가 하나뿐인 무기에서는 아예 만들지 않는다. */
.mib-firemode {
  align-self: center;
  min-width: 58px;
  min-height: 30px;
  padding: 4px 10px;
  border: 2px solid var(--mib-edge);
  border-radius: 7px;
  background: linear-gradient(160deg, #6d7758, #3f4735);
  color: var(--mib-gold);
  font: 800 11px/1 ui-monospace, monospace;
  letter-spacing: 0.1em;
  cursor: pointer;
}
.mib-firemode:active { transform: translateY(1px); }

.mib-rack-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(122px, 15vw, 168px), 1fr));
  grid-auto-rows: minmax(clamp(62px, 16vh, 96px), auto);
  gap: var(--mib-gap);
  /* 칸마다 후보 개수가 다르다(주무기 4개, 칼 1개). 적을 때 위에 붙어 아래가 텅 비면
     고장난 것처럼 보이므로 세로 가운데로 모은다. safe를 모르는 브라우저는 start로 남는다. */
  align-content: start;
  align-content: safe center;
  min-height: 0;
  padding-right: 2px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.mib-tile {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  gap: 3px;
  min-height: 0;
  padding: 4px;
  border: 2px solid var(--mib-edge);
  border-radius: 9px;
  background: linear-gradient(150deg, rgba(63, 70, 56, 0.96), rgba(32, 37, 31, 0.98));
  box-shadow: 0 2px 0 rgba(18, 21, 17, 0.9), inset 0 1px rgba(255, 255, 255, 0.07);
  color: inherit;
  cursor: pointer;
  transition: transform 90ms ease, border-color 120ms ease, background-color 120ms ease;
}

.mib-tile:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(18, 21, 17, 0.9); }

.mib-tile.is-equipped {
  border-color: #8d7a37;
  background: linear-gradient(150deg, rgba(120, 103, 45, 0.5), rgba(48, 44, 27, 0.98));
}

.mib-tile-foot {
  display: flex;
  align-items: baseline;
  gap: 6px;
  min-width: 0;
}

.mib-tile-foot .mib-name { flex: 1 1 auto; min-width: 0; }

/* 아트 우물 — 어두운 라인아트를 위한 밝은 안감.
   무기 PNG는 크기가 제각각이다(소총 96×48, 의료키트 512×512). 행을 명시적 1fr로 고정해야
   자식 이미지의 max-height:100%가 실제로 걸린다. auto 행이면 이미지가 우물을 뚫고 옆 칸을 덮는다. */
.mib-art {
  position: relative;
  display: grid;
  grid-template-rows: minmax(0, 1fr);
  place-items: center;
  overflow: hidden;
  min-height: 0;
  padding: 2px 5px;
  border-radius: 6px;
  background: linear-gradient(150deg, var(--mib-lining-lit), var(--mib-lining) 60%, #ab9f7c);
  box-shadow: inset 0 2px 5px rgba(60, 48, 26, 0.34);
}

.mib-art img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(70, 58, 32, 0.35));
}

/* 왼쪽 슬롯은 한 줄이라 아트가 칩 크기로 들어간다. 우물 높이는 줄 높이를 따라간다. */
.mib-slot .mib-art {
  height: 100%;
  padding: 1px 3px;
  border-radius: 5px;
}

/* ── 진입점: 전투 HUD의 현재 무기 칩 ─────────────────────
 *
 * 새 버튼을 만들지 않는다. 흰 실루엣 칩(#infantryCombatStrip)이 인게임에서 가장 자연스럽다는
 * 오너 판단(2026-08-05)에 따라 칩의 생김새·색·배치는 건드리지 않고, 누를 수 있게만 만든다.
 * .hud-bottom 계열이 pointer-events:none 이라 여기서 되살려야 탭이 닿는다.
 */

.infantry-combat-strip.mib-entry {
  pointer-events: auto;
  cursor: pointer;
  transition: transform 90ms ease;
}

.infantry-combat-strip.mib-entry:active { transform: scale(0.97); }

/* ── 매우 짧은 가로 화면 (SE급 375px 이하) ─────────────── */

@media (max-height: 380px) {
  .mib-root { --mib-pad: 6px; --mib-gap: 5px; }
  .mib-head { padding-bottom: 3px; }
  .mib-slot { border-radius: 8px; padding: 3px 6px 3px 4px; }
  .mib-tile { border-radius: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .mib-shell { animation: none; }
  .mib-slot, .mib-tile, .mib-open, .mib-head .mib-x { transition: none; }
}