/*
 * 펫 판 — **무기 판(`weapons.css`)을 그대로 입고, 다른 데만 덧댄다.**
 *
 * 뿌리에 `wp pets` 를 같이 달아서 배치·버튼·격자·끌기 표시가 전부 무기 판과
 * 같은 코드로 움직인다. 복제해 두면 언젠가 한쪽만 고쳐져서 어긋난다 —
 * 사장님이 짚은 문제가 그것이었다("버튼도 기본버튼이고 평평해서 게임 같지도 않고").
 *
 * 다른 것은 셋뿐이다:
 *   1. **자리가 셋** (무기는 둘)
 *   2. **뽑기가 둘** (수액·이슬) — 발이 3칸에서 4칸이 된다
 *   3. 능력치가 **두 줄** (수액·이슬) — 자리가 좁아 글씨를 줄인다
 */

/* 1. 자리 셋 */
.pets .wp-slots{grid-template-columns:1fr 1fr 1fr}

/* 셋이 나란히 서면 한 칸이 좁다 — 그림을 줄이고 글씨도 함께 줄인다 */
.pets .wp-slot{padding:4px 6px 4px 4px}
.pets .wp-slot img{width:min(11vw,44px);height:min(11vw,44px)}
.pets .wp-slot .who{font-size:.3em}
.pets .wp-slot .mul{font-size:.26em;white-space:nowrap}
.pets .wp-slot .wp-tag{font-size:.3em;padding:1px 5px}

/*
 * 자리를 **톡 누르면 쉬러 간다.** 참고 게임은 구석에 작은 X 를 다는데,
 * 셋이 나란히 선 자리에 X 를 얹으면 22px 밖에 안 나온다 — 이 게임의
 * 최소 터치는 72px 다(`audit-layout`). 자리 자체가 이미 크므로 그걸 누르게 한다.
 */
.pets .wp-slot{position:relative;
  /* 누를 수 있게 된 순간 **터치 대상**이 된다 — 최소 72px 를 지켜야 한다.
     실측에서 57px 로 걸렸다(2026-08-29). 무기 판 슬롯은 못 누르니 해당이 없다. */
  min-height:var(--touch)}
.pets .wp-slot.off-able{cursor:pointer}
.pets .wp-slot.off-able::before{content:"쉬기";position:absolute;top:2px;right:4px;
  font-size:.24em;opacity:.6;pointer-events:none}
.pets .wp-slot.off-able:active{transform:translateY(2px)}

/* 2. 발 — 뽑기 둘 + 다 합치기 */
.pets .wp-foot{grid-template-columns:1fr 1fr 1fr}
.pets .wp-pull{font-size:.4em}

/* 격자 칸의 이름표는 무기(뿔/큰턱)보다 길다 — 넘치지 않게 자른다 */
.pets .wp-cell .kindko{max-width:96%;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

/* 슬롯에 끌어다 놓을 때 뜨는 말 — 무기는 "끼워요!" 다 */
.pets .wp-slot.hot::after{content:"같이 가요!"}

@media (max-height:700px){
  .pets .wp-slot img{width:min(9vw,36px);height:min(9vw,36px)}
  .pets .wp-slot .mul{font-size:.24em}
  .pets .wp-off{width:20px;height:20px}
}

/*
 * 가로 모드에서는 왼쪽 칸이 좁다(`weapons.css` 의 32%). 자리 셋을 가로로 두면
 * 하나가 40px 밖에 안 된다 — **위아래로 쌓는다.**
 */
/*
 * 가로 모드 — 왼쪽 칸(270px)에 머리·자리·안내·발이 **세로로 쌓인다.**
 * 창 높이가 390px 밖에 안 되므로 여기서 자리 배분을 잘못하면 발이 잘린다.
 *
 * 실제로 처음엔 자리 셋을 **세로로** 쌓았다(무기 판의 규칙을 그대로 물려받아서).
 * 76px x 3 = 228px 를 자리가 먹어서 **버튼 셋이 통째로 잘렸다** — 실측에서 걸렸다.
 * 사장님이 짚었던 그 증상이다("4대3 폰 화면에서도 아래 짤리고").
 *
 * 그래서 뒤집었다: **자리는 가로로 셋**(76px 한 줄), **발은 세로로 셋**.
 *   머리 30 + 자리 76 + 안내 14 + 발 240 = 360 < 390
 */
@media (orientation:landscape) and (min-width:640px){
  .pets .wp-slots{grid-template-columns:1fr 1fr 1fr}   /* 무기 판의 세로 쌓기를 되돌린다 */
  .pets .wp-slot{padding:3px 4px 3px 3px}
  .pets .wp-slot img{width:min(6vw,34px);height:min(6vw,34px)}
  .pets .wp-slot .who{font-size:.26em}
  .pets .wp-slot .mul{font-size:.2em}
  .pets .wp-slot.off-able::before{content:none}        /* 좁아서 '쉬기' 글씨가 겹친다 */
  .pets .wp-foot{grid-template-columns:1fr}            /* 버튼 셋을 위아래로 */
}