/* ============================================================
   아바타 상점 (#/shop) · 보관함 · 구매 팝업
   사이트 공통 카드/버튼 스타일을 그대로 쓰고, 상점 전용 배치만 여기서 잡는다.
   ============================================================ */
.sp-page { max-width: 940px; margin-left: auto; margin-right: auto; }
.sp-head { margin-bottom: 14px; }

.sp-mine { display: flex; align-items: center; gap: 10px; font-size: 12.5px; font-weight: 800; color: var(--tx-sub); }
.sp-mine b { display: inline-flex; align-items: center; gap: 6px; font-size: 15px; font-weight: 900; color: var(--tx); }
.sp-mine .gg-coin { width: 20px; height: 20px; }
.sp-mine i { font-style: normal; }

.sp-tabs { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.sp-tab {
  height: 36px; padding: 0 16px; border-radius: 11px; cursor: pointer;
  border: 1px solid var(--card-border); background: #fff; color: var(--tx-sub);
  font-family: inherit; font-size: 12.5px; font-weight: 800;
  transition: filter .18s ease;
}
.sp-tab:hover { filter: brightness(.98); }
.sp-tab.is-on {
  background: linear-gradient(180deg, #3b86fa, #1d6bfa);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(29, 107, 250, .3);
}
.sp-reset {
  margin-left: auto; height: 32px; padding: 0 12px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--card-border); background: #fff; color: var(--tx-sub);
  font-family: inherit; font-size: 12px; font-weight: 800;
}
.sp-reset:hover { color: var(--tx); background: #f2f8ff; }

/* ---------- 상품 목록 ---------- */
.sp-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(214px, 1fr));
}
.sp-card {
  position: relative;
  display: flex; flex-direction: column; gap: 8px;
  padding: 16px 14px 14px;
  border: 1px solid var(--card-border); border-radius: 16px; background: #fff;
  transition: transform .18s ease, box-shadow .18s ease;
}
.sp-card:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(96, 143, 214, .14); }
.sp-card.is-equipped { border-color: #9cc4ff; box-shadow: 0 0 0 2px rgba(59, 134, 250, .18); }
.sp-flag {
  position: absolute; top: 10px; right: 10px;
  font-size: 10.5px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #3b86fa, #1d6bfa);
  border-radius: 999px; padding: 3px 9px;
}

.sp-thumb {
  width: 100%; aspect-ratio: 1 / 1;
  border: none; background: #f6f9ff; border-radius: 14px; cursor: zoom-in;
  display: flex; align-items: center; justify-content: center; padding: 8px;
}
.sp-thumb img {
  width: 100%; height: 100%;
  object-fit: contain;             /* 원본 비율 유지 — 찌그러짐 없음 */
  image-rendering: pixelated;
  background: transparent;
}
.sp-name { font-size: 15px; font-weight: 900; color: var(--tx); }
.sp-desc {
  font-size: 12px; font-weight: 700; color: var(--tx-sub); line-height: 1.5;
  min-height: 36px; margin: 0; word-break: keep-all;
}

.sp-rows { display: flex; flex-direction: column; gap: 4px; margin: 2px 0 4px; }
.sp-row {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; font-weight: 700; color: var(--tx-sub);
}
.sp-row b { font-weight: 900; color: var(--tx); }
.sp-row.is-dim { opacity: .5; }
.sp-row b.is-minus { color: #e03131; }

.sp-empty { color: var(--tx-sub); font-size: 13px; font-weight: 700; text-align: center; padding: 26px 0; margin: 0; }
.sp-empty-wrap { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 18px 0; }
.sp-empty-wrap img { width: 92px; height: 92px; object-fit: contain; image-rendering: pixelated; opacity: .75; }

/* ---------- 팝업 ---------- */
.sp-back {
  position: fixed; inset: 0; z-index: 120;
  background: rgba(16, 32, 60, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 18px;                                  /* 모바일에서 화면 밖으로 안 나가게 */
  overflow-y: auto;
}
.sp-modal {
  position: relative;
  width: 100%; max-width: 380px;
  max-height: calc(100vh - 36px); overflow-y: auto;
  background: #fff; border-radius: 20px; padding: 22px 20px 20px;
  box-shadow: 0 18px 50px rgba(16, 32, 60, .3);
}
.sp-x {
  position: absolute; top: 10px; right: 12px;
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: var(--tx-sub);
}
.sp-x:hover { color: var(--tx); }

.sp-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-preview img {
  width: 100%; max-width: 260px; aspect-ratio: 1 / 1;
  object-fit: contain; image-rendering: pixelated; background: #f6f9ff; border-radius: 16px; padding: 10px;
}
.sp-preview-name { font-size: 17px; font-weight: 900; color: var(--tx); }
.sp-preview-desc { font-size: 12.5px; font-weight: 700; color: var(--tx-sub); text-align: center; margin: 0; word-break: keep-all; }

.sp-buy, .sp-done { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.sp-buy-img {
  width: 116px; height: 116px; object-fit: contain; image-rendering: pixelated;
  background: #f6f9ff; border-radius: 16px; padding: 6px;
}
.sp-buy-name { font-size: 16px; font-weight: 900; color: var(--tx); text-align: center; }
.sp-buy .sp-rows, .sp-done .sp-rows { width: 100%; margin-top: 6px; }
.sp-done-desc { font-size: 12.5px; font-weight: 700; color: var(--tx-sub); margin: 0; text-align: center; }
.sp-warn {
  width: 100%; margin: 4px 0 0;
  font-size: 11.5px; font-weight: 700; line-height: 1.6; color: #cf8a11;
  background: rgba(245, 166, 35, .1); border: 1px solid rgba(245, 166, 35, .3);
  border-radius: 12px; padding: 10px 12px; word-break: keep-all;
}
.sp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 12px; }
.sp-btns .gg-btn { width: 100%; }

/* ---------- 모바일 ---------- */
@media (max-width: 767px) {
  .sp-page { padding-inline: 12px; }
  .sp-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .sp-card { padding: 12px 10px 10px; border-radius: 14px; }
  .sp-name { font-size: 13.5px; }
  .sp-desc { font-size: 11px; min-height: 32px; }
  .sp-row { font-size: 11px; }
  .sp-mine { font-size: 11.5px; }
  .sp-mine b { font-size: 13.5px; }
  .sp-tab { height: 32px; padding: 0 12px; font-size: 11.5px; }
  .sp-reset { height: 30px; font-size: 11px; }
  .sp-back { padding: 12px; }
  .sp-modal { padding: 18px 14px 16px; border-radius: 16px; }
  .sp-btns { grid-template-columns: 1fr; }
}

/* ============================================================
   관리자 → 상점 관리
   ============================================================ */
.sa-wrap { display: flex; flex-direction: column; gap: 16px; }
.sa-note {
  font-size: 12px; font-weight: 700; line-height: 1.7; color: var(--tx-sub);
  background: #f4f8ff; border: 1px solid #dfeaf9; border-radius: 12px; padding: 11px 13px;
}
.sa-note code { background: #fff; border: 1px solid #dfeaf9; border-radius: 6px; padding: 1px 5px; font-size: 11px; }
.sa-h { font-size: 13.5px; font-weight: 900; color: var(--tx); margin-bottom: 9px; display: flex; align-items: center; flex-wrap: wrap; }
.sa-h small { font-weight: 700; color: var(--tx-sub); margin-left: 6px; }
.sa-empty { color: var(--tx-sub); font-size: 12.5px; font-weight: 700; padding: 14px 2px; margin: 0; }

.sa-items { display: flex; flex-direction: column; gap: 10px; }
.sa-item {
  display: flex; gap: 12px; align-items: flex-start;
  border: 1px solid var(--card-border); border-radius: 14px; background: #fff; padding: 12px;
}
.sa-img {
  width: 84px; height: 84px; flex: none;
  object-fit: contain; image-rendering: pixelated;
  background: #f6f9ff; border-radius: 12px; padding: 5px;
}
.sa-fields { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.sa-line { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
/* 가격은 10억 DC(열 자리)까지 들어가므로 기본 칸(84px)으로는 숫자가 잘린다 */
.sa-item [data-f="price"], #sa-n-price { width: 148px; }
.sa-item [data-f="name"], #sa-n-name { width: 148px; }
#sa-n-slug { width: 148px; }
.sa-line label, .sa-form label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; font-weight: 800; color: var(--tx-sub);
}
.sa-grow, .sa-wide { flex: 1; min-width: 160px; }
.sa-grow input, .sa-wide input, .sa-wide select { width: 100%; }
.sa-chk { flex-direction: row !important; align-items: center; gap: 5px; font-size: 12px; color: var(--tx); }
.sa-foot { align-items: center; }
.sa-stat { margin-left: auto; font-size: 11.5px; font-weight: 700; color: var(--tx-sub); }
.sa-stat b { color: var(--tx); font-weight: 900; }

.sa-new, .sa-grant, .sa-pur {
  border: 1px solid var(--card-border); border-radius: 14px; background: #fff; padding: 13px;
}
.sa-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
/* 회원 검색 칸 — 목록이 길어서 직접 입력해 걸러 쓴다 */
#sa-g-user { width: 100%; height: 32px; }
#sa-g-count { font-weight: 700; color: var(--tx-sub); margin-left: 4px; }

@media (max-width: 767px) {
  .sa-item { flex-direction: column; }
  .sa-img { width: 72px; height: 72px; }
  .sa-stat { margin-left: 0; width: 100%; }
  .sa-form label, .sa-line label { width: 100%; }
  .sa-grow, .sa-wide { min-width: 0; }
}