/* ============================================================
   아바타 상점 (#/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 + .sp-reset { margin-left: 6px; }
.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-cats {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--card-border);
}
.sp-cats[hidden] { display: none; }
.sp-cat {
  height: 34px; padding: 0 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--card-border); background: #f7faff; color: var(--tx-sub);
  font-family: inherit; font-size: 12.5px; font-weight: 800; white-space: nowrap;
  transition: background .18s ease, color .18s ease;
}
.sp-cat:hover { background: #eef5ff; color: var(--tx); }
.sp-cat.is-on {
  background: linear-gradient(180deg, #3b86fa, #1d6bfa);
  color: #fff; border-color: transparent;
  box-shadow: 0 4px 12px rgba(29, 107, 250, .28);
}

/* ---------- 보관함 구역 (아바타 / 룰렛 아이템) ---------- */
.sp-sec + .sp-sec { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--card-border); }
.sp-sec-h { font-size: 14px; font-weight: 900; color: var(--tx); margin: 0 0 10px; }

/* ---------- 상품 목록 ---------- */
.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 { height: 100%; }
.sp-card.is-equipped { border-color: #9cc4ff; box-shadow: 0 0 0 2px rgba(59, 134, 250, .18); }
/* 카드 아래 버튼 — 공통 .gg-btn 에는 높이가 없어서 글자 높이(18px)만큼만 나왔다.
   누르기 편한 크기로 못 박는다 (손가락 기준 최소 44px 는 팝업 버튼에서 맞춘다). */
.sp-card > .gg-btn {
  margin-top: auto;
  height: 56px; padding: 0 14px;          /* 예전 18px → 세 배 이상 (누르기 편하게) */
  font-size: 15px; border-radius: 14px;
}
.sp-flag {
  position: absolute; top: 10px; right: 10px;
  z-index: 3;                        /* 상품 그림·품절 덮개보다 위 — 배지가 가려지지 않게 */
  font-size: 10.5px; font-weight: 900; color: #fff;
  background: linear-gradient(180deg, #3b86fa, #1d6bfa);
  border-radius: 999px; padding: 3px 9px;
}
/* 소모품 보유 수량 배지 — 장착 배지와 겹치지 않게 색만 다르다 */
.sp-flag-qty { background: linear-gradient(180deg, #66c07a, #3aa354); }
/* 신규 상품 배지 — 등록 7일 동안 서버가 isNew 를 내려준다.
   장착·수량 배지(오른쪽 위)와 겹치지 않게 왼쪽 위에 둔다. */
.sp-flag-new {
  right: auto; left: 10px;
  background: linear-gradient(180deg, #ff8a5c, #ff5c7a);
}
/* "내 보관함" 탭의 빨간 점 — 아직 안 입어 본 아바타가 있을 때 */
.sp-tab-dot {
  display: inline-block; width: 7px; height: 7px; margin-left: 5px;
  border-radius: 999px; background: #ff5c7a; vertical-align: 2px;
}

.sp-thumb {
  position: relative;                 /* 품절 덮개의 기준 */
  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;
}
/* 의상 상품 카드 그림 — 망토 «단독» 그림을 영역 중앙에 80% 크기로 (2026-08-24)
   잘림 없이(contain) 픽셀 그대로(pixelated) — 오리와의 합성은 장착 화면에서만 한다 */
.sp-thumb img.is-cloth, .sp-preview img.is-cloth {
  width: 80%; height: 80%; margin: auto;
  object-fit: contain; object-position: center;
  image-rendering: pixelated; background: transparent;
}

/* 주간 1명 한정 상품 — 이번 주에 팔리면 상품 그림 위에 품절 표시 */
.sp-soldout {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  background: rgba(22, 34, 56, .55); border-radius: 14px; pointer-events: none;
}
.sp-soldout b {
  color: #fff; font-size: 26px; font-weight: 900; letter-spacing: .35em; text-indent: .35em;
  border: 3px solid rgba(255, 255, 255, .85); border-radius: 10px; padding: 6px 14px;
  transform: rotate(-8deg); background: rgba(224, 82, 82, .85);
}
.sp-soldout small { color: #eaf2ff; font-size: 11.5px; font-weight: 800; }
.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); }
/* 움직이는 아바타 표시
   상품 이름이 길면 태그가 "움직/임" 처럼 중간에서 두 줄로 쪼개졌다.
   → 태그를 한 덩어리로 만들어(inline-block + nowrap) 자리가 모자라면
     통째로 다음 줄로 내려가게 한다. 짧은 이름은 예전처럼 이름 옆에 붙는다. */
.sp-anim-tag {
  display: inline-block; white-space: nowrap;
  margin-left: 5px; font-size: 10px; font-weight: 900; color: #7a3ad6;
  background: #f1e8ff; border-radius: 999px; padding: 2px 7px; vertical-align: middle;
}
/* ------------------------------------------------------------
   공통 상품 그림 (components/item-image.js 가 만드는 자리)
     · 움직이는 그림도 정지 그림과 똑같이 비율을 지키고 배경을 넣지 않는다
     · background-image 로 바꾸거나 캔버스로 그리지 않는다 (첫 장에서 멈춘다)
     · 「동작 줄이기」는 화면을 그릴 때 정지 그림을 넣는 것으로 처리한다
   ------------------------------------------------------------ */
.gg-item-img {
  object-fit: contain;              /* 잘리지 않는다 */
  background: transparent;          /* 검정·흰색 배경을 합성하지 않는다 */
  -webkit-user-drag: none;
}
.sp-thumb .gg-item-img, .sp-preview .gg-item-img, .gg-item-img.sp-buy-img {
  object-fit: contain; background: transparent;
}

/* 여러 장 그림(프레임 배열) — 겹쳐 두고 보이는 장만 바꾼다 */
.gg-item-frames { position: relative; display: block; }
.gg-item-frames .gg-item-frame {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; background: transparent;
  opacity: 0;
}
.gg-item-frames .gg-item-frame.is-on { opacity: 1; }

.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-qty { width: 100%; margin-top: 8px; display: flex; flex-direction: column; gap: 6px; }
.sp-qty-lab { font-size: 12px; font-weight: 800; color: var(--tx-sub); }
.sp-qty-lab small { font-weight: 700; }
.sp-qty-ctl { display: flex; align-items: center; gap: 8px; }
.sp-qty-btn {
  width: 40px; height: 40px; flex: none; border-radius: 12px; cursor: pointer;
  border: 1px solid var(--card-border); background: #fff; color: var(--tx);
  font-family: inherit; font-size: 18px; font-weight: 900; line-height: 1;
}
.sp-qty-btn:hover:not(:disabled) { background: #f2f8ff; }
.sp-qty-btn:disabled { opacity: .4; cursor: default; }
.sp-qty-num {
  flex: 1; min-width: 0; height: 40px; text-align: center;
  border: 1px solid var(--card-border); border-radius: 12px; background: #fff;
  font-family: inherit; font-size: 16px; font-weight: 900; color: var(--tx);
}

.sp-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin-top: 12px; }
.sp-buy .gg-btn, .sp-done .gg-btn { min-height: 56px; }
.sp-btns.sp-btns-1 { grid-template-columns: 1fr; }
.sp-btns .gg-btn { width: 100%; height: 56px; font-size: 15px; border-radius: 14px; }

/* ---------- 모바일 ---------- */
@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; gap: 6px; }
  .sp-row > span { white-space: nowrap; }
  .sp-row > b { text-align: right; min-width: 0; }
  .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; }
  /* 카테고리 탭 3개가 좁은 화면에서도 한 줄에 다 들어가게 나눠 쓴다 */
  .sp-cats { gap: 5px; margin-top: 8px; padding-top: 8px; }
  .sp-cat { flex: 1 1 0; min-width: 0; height: 32px; padding: 0 6px; font-size: 11.5px; }
  .sp-sec-h { font-size: 13px; }
  .sp-back { padding: 12px; }
  .sp-modal { padding: 18px 14px 16px; border-radius: 16px; }
  .sp-btns { grid-template-columns: 1fr; }
  /* 손가락으로 누르는 화면 — 조금 더 크게 */
  .sp-card > .gg-btn { height: 60px; font-size: 15.5px; }
  .sp-btns .gg-btn { height: 60px; font-size: 15.5px; }
  .sp-buy .gg-btn, .sp-done .gg-btn { min-height: 60px; }
}

/* ============================================================
   관리자 → 상점 관리
   ============================================================ */
.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; }

/* ---------- 여러 상품 한꺼번에 고르기 (2026-08-26) ---------- */
.sa-pick {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; margin-bottom: 10px;
  border: 1px solid var(--card-border); border-radius: 12px; background: #f6f9ff;
}
.sa-pick-l, .sa-pick-r { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sa-pick-n { font-size: 12px; font-weight: 900; color: var(--tx); margin-left: 4px; }

/* 카드 «오른쪽» 위 체크칸 — 왼쪽 위는 NEW 뱃지 자리라 피한다 */
.sa-card { position: relative; }
.sa-card-pick {
  position: absolute; top: 6px; right: 6px; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--card-border);
  cursor: pointer;
}
.sa-card-pick input { width: 15px; height: 15px; cursor: pointer; accent-color: #1d6bfa; margin: 0; }
.sa-card.is-picked {
  border-color: #1d6bfa;
  box-shadow: 0 0 0 2px rgba(29, 107, 250, .18), 0 4px 14px rgba(29, 107, 250, .12);
}

/* ---------- 상품 목록 바둑판 (2026-08-25 리뉴얼 — 예전 1줄 목록 대체) ----------
   최신 등록 상품이 첫 칸(왼쪽 맨 위). 카드를 누르면 수정·삭제 창이 열린다. */
.sa-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.sa-card {
  display: flex; flex-direction: column; gap: 4px;
  border: 1px solid var(--card-border); border-radius: 14px; background: #fff;
  padding: 10px 10px 11px; cursor: pointer; text-align: left;
  transition: box-shadow .12s, transform .12s, border-color .12s;
}
.sa-card:hover, .sa-card:focus-visible {
  border-color: #bcd6f7; box-shadow: 0 4px 14px rgba(29, 107, 250, .10);
  transform: translateY(-1px); outline: none;
}
.sa-card-imgwrap {
  position: relative; height: 96px; display: flex; align-items: center; justify-content: center;
  background: #f6f9ff; border-radius: 12px; margin-bottom: 4px;
}
.sa-card-img { max-width: 82%; max-height: 84px; object-fit: contain; image-rendering: pixelated; }
.sa-card-new {
  position: absolute; top: 6px; left: 6px;
  font-size: 9.5px; font-weight: 900; color: #fff; background: #ff5d5d;
  border-radius: 7px; padding: 2px 6px; letter-spacing: .3px;
}
.sa-card-name {
  font-size: 12.5px; font-weight: 900; color: var(--tx);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sa-card-price { font-size: 12px; font-weight: 900; color: #1d6bfa; }
.sa-card-meta { font-size: 10.5px; font-weight: 700; color: var(--tx-sub); }
.sa-card-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 2px; }
.sa-badge {
  font-size: 9.5px; font-weight: 900; border-radius: 7px; padding: 2px 6px;
}
.sa-badge.is-on { color: #14804a; background: #e7f7ee; }
.sa-badge.is-off { color: #a94442; background: #fdecec; }
.sa-card-stat { font-size: 10.5px; font-weight: 700; color: var(--tx-sub); margin-top: 2px; }
.sa-card-stat b { color: var(--tx); font-weight: 900; }

/* 바둑판 페이지 이동 (2026-08-25 — 22개 초과 시) */
.sa-pager {
  display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-top: 12px;
}
.sa-page-btn {
  height: 32px; padding: 0 12px; font-size: 12px; font-weight: 800; font-family: inherit;
  color: var(--tx); background: #fff; border: 1px solid var(--card-border); border-radius: 9px;
  cursor: pointer;
}
.sa-page-btn:hover:not(:disabled) { border-color: #bcd6f7; background: #f4f8ff; }
.sa-page-btn:disabled { opacity: .4; cursor: default; }
.sa-page-num { min-width: 32px; padding: 0; }
.sa-page-num.is-on { color: #fff; background: #1d6bfa; border-color: #1d6bfa; }
.sa-page-info { margin-left: 6px; font-size: 11.5px; font-weight: 700; color: var(--tx-sub); }

/* ---------- 일괄 지급 · 회수 · 환불 패널 (2026-08-25 — 제일 위 고정) ---------- */
.sa-bulk {
  display: flex; flex-direction: column; gap: 10px;
  border: 1px solid var(--card-border); border-radius: 14px; background: #fff; padding: 13px;
}
.sa-bulk-sub { font-size: 11.5px; font-weight: 700; color: var(--tx-sub); line-height: 1.7; margin-top: -4px; }
.sa-bulk-item { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.sa-bulk-item .gg-select { min-width: 220px; max-width: 100%; }
.sa-bulk-thumb {
  width: 44px; height: 44px; object-fit: contain; image-rendering: pixelated;
  background: #f6f9ff; border-radius: 10px; padding: 4px;
}
.sa-bulk-list {
  max-height: 180px; overflow-y: auto;
  border: 1px solid #e6ecf5; border-radius: 10px; padding: 8px 10px;
  display: flex; flex-direction: column; gap: 4px;
}
.sa-pick-chip {
  font-size: 11.5px; font-weight: 800; color: #1d6bfa; background: #eef5ff;
  border: 1px solid #cfe3ff; border-radius: 999px; padding: 3px 10px;
  cursor: pointer; font-family: inherit;
}
.sa-pick-chip:hover { background: #e2eeff; }

/* 새 상품 등록 · 구매 내역 칸 */
#sa-n-price, #sa-n-name, #sa-n-slug { width: 148px; }
.sa-form label {
  display: flex; flex-direction: column; gap: 3px;
  font-size: 11px; font-weight: 800; color: var(--tx-sub);
}
.sa-wide { flex: 1; min-width: 160px; }
.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-new, .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; }

@media (max-width: 767px) {
  .sa-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sa-form label { width: 100%; }
  .sa-wide { min-width: 0; }
  .sa-bulk-item .gg-select { min-width: 0; flex: 1; }
}


/* ---------- 아바타 효과 상품 (2026-08-12) ---------- */
/* 카드에서는 효과를 "단독"으로 보여준다 (기본 오리 없이) — 합성 모습은 장착 후 실제 화면에서 */
/* 슬롯 태그 (머리 효과 / 배경 효과) — 기존 「움직임」 태그와 같은 모양에 색만 다르게 */
.sp-slot-tag { background: #eef4ff; color: #2b62c9; border-color: #bcd6ff; }
/* 구매 버튼만 기존 표시 크기의 70% — 장착·해제·변경 버튼은 그대로 둔다 */
.sp-card .gg-btn.sp-btn-buy {
  width: 70%;
  margin-left: auto; margin-right: auto;
  min-height: 0;
  padding-top: 8px; padding-bottom: 8px;
  font-size: 0.7em;
}

/* ============================================================
   내 아바타 (#/avatar) — 꾸미기 독립 화면 (2026-08-24)
   기존 카드·버튼 디자인 시스템(gg-card/gg-btn/sp-card)을 그대로 쓴다.
   ============================================================ */
.mya-head { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 14px 18px; margin-bottom: 12px; flex-wrap: wrap; }
.mya-grid { display: grid; grid-template-columns: 320px minmax(0, 1fr); gap: 12px; align-items: start; }
.mya-right { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.mya-h { margin: 0 0 6px; font-size: 14px; }
.mya-hint { margin: 0 0 10px; font-size: 12px; color: var(--tx-sub); font-weight: 700; }
.mya-preview-card { padding: 18px; position: sticky; top: 76px; }
.mya-preview { display: flex; justify-content: center; padding: 8px 0 14px; }
.mya-preview .gg-avatar-box {
  /* 300px 날개 PNG의 실제 불투명 폭(292px)이 미리보기 박스 안에 딱 들어오도록
     PC·모바일 모두 같은 배율을 사용한다. 높이/세로 기준점은 공용 규칙을 유지한다. */
  --fx-bg-scale: .98;
  /* 무기(낫)는 착용 의도대로 프레임 밖까지 보일 수 있다. */
  overflow: visible;
  background: linear-gradient(180deg, #f4f9ff 0%, #e8f2ff 100%);
  border: 1px solid #e3effb;
  border-radius: 18px;
}
.mya-wearing { display: flex; flex-direction: column; gap: 4px; }
.mya-wear-row { display: flex; justify-content: space-between; font-size: 12px; padding: 4px 2px;
  border-bottom: 1px dashed #eef3fb; }
.mya-wear-row span { color: var(--tx-sub); font-weight: 700; }
.mya-wear-row b { font-weight: 800; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 프리셋 1·2·3 */
.mya-presets { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mya-preset { border: 1px solid #e3effb; border-radius: 14px; padding: 10px; text-align: center;
  display: flex; flex-direction: column; gap: 8px; background: #fbfdff; }
.mya-preset.is-active { border-color: var(--blue); box-shadow: 0 0 0 2px rgba(43,108,212,.12); }
.mya-preset-title { font-size: 12.5px; font-weight: 900; display: flex; justify-content: center; gap: 6px; align-items: center; }
.mya-on { font-size: 10px; font-weight: 900; color: #fff; background: var(--blue); border-radius: 999px; padding: 2px 7px; }
.mya-preset-thumb { display: flex; justify-content: center; align-items: center; min-height: 92px; }
.mya-preset-empty { font-size: 11.5px; color: #aab4c6; font-weight: 800; line-height: 1.5; }
.mya-preset-btns { display: flex; gap: 6px; justify-content: center; }

/* 장착 슬롯 목록 */
.mya-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.mya-slot { display: flex; align-items: center; gap: 8px; border: 1px solid #eef3fb; border-radius: 11px;
  padding: 8px 10px; font-size: 12px; }
.mya-slot-name { color: var(--tx-sub); font-weight: 800; flex: 0 0 92px; }
.mya-slot-item { flex: 1; font-weight: 800; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mya-slot-item i { color: #b9c4d6; font-style: normal; font-weight: 700; }

.mya-item-slot { font-size: 11px; color: var(--tx-sub); font-weight: 800; margin: -4px 0 8px; }

/* 모바일: 미리보기 → 슬롯 → 보유 목록 → 프리셋 순서 (지시 13) */
@media (max-width: 900px) {
  .mya-grid { grid-template-columns: minmax(0, 1fr); }
  .mya-preview-card { position: static; }
  .mya-right { display: flex; }
  .mya-right > .gg-card:nth-child(1) { order: 3; }   /* 프리셋 맨 아래 */
  .mya-right > .gg-card:nth-child(2) { order: 1; }   /* 슬롯 */
  .mya-right > .gg-card:nth-child(3) { order: 2; }   /* 보유 목록 */
  .mya-presets { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .mya-slot { flex-wrap: wrap; }
}