/* ============================================================
   css/sprites.css - 스프라이트 이미지 표시 규칙
   - .spr-icon : 이모지 자리에 들어가는 <img>. 글자 크기(1em)를
     따라가므로 어떤 곳이든 원래 이모지와 같은 크기로 맞는다.
   - body.spr-* : assets/ui/*.png 스킨이 있을 때만 켜지는
     9-slice 스킨 규칙 (js/assets.js 가 클래스를 달아 준다).
     스킨 PNG는 96x96 이상, 모서리 28px 기준으로 그린다.
   ============================================================ */

.spr-icon {
  height: 1em;
  width: auto;
  display: inline-block;
  vertical-align: -0.125em;
  -webkit-user-drag: none;
  user-select: none;
}

/* 큰 오브젝트 자리(마법사·상자 등)는 살짝 넉넉하게 */
.ch-wizard .spr-icon,
.sh-chest .spr-icon,
.login-wizard .spr-icon,
.lb-card-lock-emoji .spr-icon {
  height: 1.1em;
  vertical-align: middle;
}

/* ===== 버튼 스킨 ===== */
body.spr-ui-btn .btn {
  border: 14px solid transparent;
  border-image: url('../assets/ui/btn.png') 28 fill / 14px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.spr-ui-btn_primary .btn-primary {
  border: 14px solid transparent;
  border-image: url('../assets/ui/btn_primary.png') 28 fill / 14px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.spr-ui-btn_good .btn-good {
  border: 14px solid transparent;
  border-image: url('../assets/ui/btn_good.png') 28 fill / 14px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.spr-ui-btn_blue .btn-blue {
  border: 14px solid transparent;
  border-image: url('../assets/ui/btn_blue.png') 28 fill / 14px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.spr-ui-btn_ghost .btn-ghost {
  border: 14px solid transparent;
  border-image: url('../assets/ui/btn_ghost.png') 28 fill / 14px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}

/* ===== 패널 / 카드 스킨 ===== */
body.spr-ui-panel .panel {
  border: 24px solid transparent;
  border-image: url('../assets/ui/panel.png') 28 fill / 24px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.spr-ui-card .lb-card {
  border: 24px solid transparent;
  border-image: url('../assets/ui/card.png') 28 fill / 24px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.spr-ui-card .lb-card.lb-locked { background: none; }

/* ===== 하단 탭 / 상단 칩 스킨 ===== */
body.spr-ui-tab .hub-tab {
  border: 14px solid transparent;
  border-image: url('../assets/ui/tab.png') 28 fill / 14px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
  text-shadow: none;
}
body.spr-ui-tab_on .hub-tab-on,
body.spr-ui-tab_on .hub-tab-on:hover {
  border: 14px solid transparent;
  border-image: url('../assets/ui/tab_on.png') 28 fill / 14px stretch;
  border-radius: 0;
  background: none;
  box-shadow: none;
}
body.spr-ui-chip .hub-chip {
  border: 12px solid transparent;
  border-image: url('../assets/ui/chip.png') 28 fill / 12px stretch;
  border-radius: 0;
  background: none;
}