/*
 * 한살이 카드 — 채집통 위에 뜬다.
 *
 * 판이 아니라 **카드**다. 뒤의 채집통이 비쳐 보여야 "내 곤충을 눌렀더니
 * 이게 떴다"가 이어진다. 판으로 덮어 버리면 어디서 왔는지 알 수 없다.
 */
.life{position:fixed;inset:0;z-index:20;display:grid;place-items:center;
  padding:12px;background:rgba(30,22,12,.55);overscroll-behavior:contain}

.life-card{position:relative;width:min(100%,860px);max-height:88vh;
  display:grid;grid-template-rows:auto minmax(0,1fr);gap:8px;
  padding:14px 12px 12px;
  background:var(--panel);border:4px solid var(--wood);border-radius:22px;
  box-shadow:0 10px 0 #6d4c2a,0 18px 30px rgba(0,0,0,.35)}

.life-name{font-size:.66em;text-align:center;padding-right:34px}

.life-close{position:absolute;top:6px;right:8px;
  width:var(--touch);height:var(--touch);min-width:44px;min-height:44px;
  display:grid;place-items:center;padding:0;line-height:1;
  font-size:.8em;color:#8a3a2a;
  background:transparent;border:none;cursor:pointer}
.life-close:active{transform:translateY(2px)}

/* 단계 띠 — 종마다 칸 수가 다르다(나비 4 · 딱정벌레 4 · 메뚜기 2).
   좁은 화면에서는 가로로 넘긴다. `min-height:0` 이 없으면 안 줄어든다. */
.life-strip{display:flex;align-items:center;gap:4px;
  min-height:0;overflow-x:auto;overflow-y:hidden;padding:4px 2px;
  scrollbar-width:none;touch-action:pan-x}
.life-strip::-webkit-scrollbar{display:none}

.life-stage{flex:none;width:min(38vw,190px);display:grid;justify-items:center;gap:3px;
  align-content:start}
.life-pic{width:100%;aspect-ratio:1;display:grid;place-items:center}
.life-pic img{height:auto;object-fit:contain;
  filter:drop-shadow(0 3px 4px rgba(0,0,0,.25))}
.life-stage b{font-size:.62em}
.life-mm{font-size:.5em;color:var(--wood);font-variant-numeric:tabular-nums}
.life-tip{font-size:.42em;font-weight:500;line-height:1.25;text-align:center;opacity:.85}
.life-arrow{flex:none;font-size:.8em;color:var(--wood);opacity:.7}

/* 가로 모드는 세로가 짧다 — 그림을 줄이고 설명 줄을 좁힌다 */
@media (max-height:520px){
  .life-card{padding:10px 10px 8px}
  .life-name{font-size:.54em}
  .life-stage{width:min(30vw,150px)}
  .life-tip{font-size:.36em}
}