/* ============================================================
   본초상점 — 스타일 (귀엽고 캐주얼한 RPG 상점 톤, PC 기준 카드형)
   ============================================================ */
#shop.screen { padding: 0; }
.shop-wrap {
  max-width: 1280px;
  margin: 0 auto;
  padding: 26px 24px 40px;
  font-family: 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
}

/* 헤더 */
.shop-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, #FFF6E2 0%, #FDEAC4 100%);
  border: 3px solid #E7C887;
  border-radius: 22px;
  padding: 18px 22px;
  box-shadow: 0 6px 18px rgba(160, 120, 40, 0.12);
}
.shop-back {
  background: #fff;
  border: 2px solid #E7C887;
  color: #8A6A2A;
  font-weight: 800;
  font-size: 14px;
  border-radius: 12px;
  padding: 9px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: all .15s;
}
.shop-back:hover { background: #FBEFD2; transform: translateY(-1px); }
.shop-title-wrap { min-width: 0; text-align: center; }
.shop-title {
  margin: 0;
  font-size: 38px;
  font-weight: 900;
  color: #5B4218;
  display: flex; align-items: center; justify-content: center; gap: 8px;
}
.shop-title-ico { height: 46px; width: auto; vertical-align: -7px; object-fit: contain; }
.shop-desc { margin: 6px 0 0; font-size: 19px; color: #9A7C3E; font-weight: 600; }
.shop-points {
  display: flex; flex-direction: column; align-items: flex-end; gap: 2px;
  background: #fff; border: 2px solid #E7C887; border-radius: 14px;
  padding: 8px 16px; white-space: nowrap;
}
.shop-points .lb { font-size: 15px; color: #B59A5E; font-weight: 800; }
.shop-points .v { font-size: 28px; font-weight: 900; color: #D9892B; }

/* 카테고리 그리드 */
.shop-grid {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
}
.shop-cat {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  aspect-ratio: 1 / 1;
  gap: 22px;
  background: #FFFDF7;
  border: 3px solid #EADFC4;
  border-radius: 26px;
  padding: 32px 32px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 12px rgba(120, 90, 30, 0.07);
  transition: transform .15s, box-shadow .15s, border-color .15s;
  overflow: hidden;
}
.shop-cat:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(120, 90, 30, 0.14); border-color: #DCC79A; }
.shop-cat-icon {
  flex: 0 0 auto;
  width: 252px; height: 252px;
  display: grid; place-items: center;
  font-size: 69px;
  background: none;
  border: none;
}
.shop-cat-icon img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px rgba(60,40,10,.18)); }
.shop-cat[data-shop-cat="study"] .shop-cat-icon img { transform: translateY(20px) scale(1.5); }
.shop-cat[data-shop-cat="market"] .shop-cat-icon img { transform: translateY(35px) scale(1.5); }
.shop-cat[data-shop-cat="deco"] .shop-cat-icon img { transform: translate(-25px, 30px) scale(1.3); }
.shop-cat[data-shop-cat="alchemy"] .shop-cat-icon img { transform: translateY(-10px) scale(0.9); }
.shop-cat-body { flex: 1 1 auto; min-width: 0; }
.shop-cat-name { font-size: 27px; font-weight: 900; color: #3E5B2C; }
.shop-cat-desc { margin-top: 8px; font-size: 19px; line-height: 1.5; color: #7E8A6E; }
.shop-cat-status {
  position: absolute;
  top: 18px; right: 18px;
  background: #B8B1A4;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
}

/* 준비중(비활성) 카드 톤 다운 */
.shop-cat[disabled] { opacity: .82; }
.shop-cat[disabled] .shop-cat-icon { filter: grayscale(.15); }

.shop-note {
  margin-top: 20px;
  text-align: center;
  font-size: 13px;
  color: #9A7C3E;
  font-weight: 600;
}

/* ============ 학습지원관 상점 ============ */
#studyShop.screen{padding:0}
.ss-wrap{width:91%;max-width:1092px;margin:20px auto 40px}
.ss-stage{position:relative;width:100%;aspect-ratio:1536/1024;background-size:cover;background-position:center;
  border-radius:20px;overflow:hidden;box-shadow:0 14px 40px rgba(60,40,10,.3)}
.ss-back{position:absolute;top:16px;left:16px;z-index:2;background:rgba(255,253,244,.92);border:2px solid #E7C887;
  color:#8A6A2A;font-weight:800;font-size:21px;border-radius:14px;padding:12px 21px;cursor:pointer;font-family:inherit}
.ss-back:hover{background:#fff}
/* 마스코트 접객 대사 — 상단 간판 영역 */
.ss-clerk{position:absolute;top:7%;left:50%;transform:translate(-50%,30px);z-index:2;
  width:42%;min-height:1.4em;text-align:center;color:#FFE9A8;font-size:clamp(17px,1.9vw,26px);font-weight:800;
  line-height:1.4;text-shadow:0 1px 4px rgba(0,0,0,.6);letter-spacing:-.3px;
  display:flex;align-items:center;justify-content:center;pointer-events:none}
.ss-pts{position:absolute;top:16px;right:16px;z-index:2;background:rgba(50,27,18,.8);color:#FFD96A;
  font-size:30px;font-weight:900;border-radius:16px;padding:12px 22px;display:flex;align-items:center;gap:8px}
.ss-pts .lb{font-size:22px;color:#E0C89A}
.ss-coin{height:1.05em;width:auto;vertical-align:-2px}
/* 배경 아래 진열대 — 배경과 동일 너비 5칸 */
.ss-shelf-row{margin-top:14px;display:flex;align-items:center;gap:8px}
.ss-shelf{flex:1;display:grid;grid-template-columns:repeat(8,1fr);gap:8px}
.ss-arrow{flex:0 0 auto;width:38px;height:54px;border:2px solid #C9A24B;background:#FFFDF7;color:#8A6A2A;
  font-size:18px;font-weight:900;border-radius:12px;cursor:pointer;font-family:inherit;box-shadow:0 3px 8px rgba(60,40,10,.12)}
.ss-arrow:hover:not(:disabled){background:#FBEFD2;transform:translateY(-1px)}
.ss-arrow:disabled{opacity:.3;cursor:default}
.ss-slot.empty{background:transparent;border:2px dashed #DcCBA0;box-shadow:none;cursor:default}
.ss-slot.empty:hover{transform:none;box-shadow:none}
.ss-pageind{text-align:center;margin-top:8px;font-size:13px;font-weight:800;color:#9A7C3E}
.ss-slot{position:relative;aspect-ratio:1/1;background:#FFFDF7;border:2.5px solid #C9A24B;border-radius:12px;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;cursor:pointer;font-family:inherit;
  box-shadow:0 3px 8px rgba(60,40,10,.12);transition:transform .12s,box-shadow .12s;padding:5px 3px}
.ss-slot:hover{transform:translateY(-3px);box-shadow:0 9px 20px rgba(60,40,10,.22)}
.ss-slot.soon{background:#EDE7DA;border-color:#D6CDB8;cursor:default}
.ss-slot.soon:hover{transform:none;box-shadow:0 4px 12px rgba(60,40,10,.12)}
.ss-lock{font-size:22px;opacity:.5}
.ss-soon-tx{font-size:10px;font-weight:900;color:#A89B82}
.ss-ico{height:72%;display:grid;place-items:center}
.ss-ico img{max-height:100%;max-width:82%;object-fit:contain}
.ss-name{font-size:15px;font-weight:900;color:#4A3415}
.ss-price{display:flex;align-items:center;gap:3px;font-size:15px;font-weight:900;color:#D9892B}
.ss-owned{font-size:11px;font-weight:800;color:#9A7C3E}
.ss-slot.on{border-color:#E89B3C;box-shadow:0 0 0 3px rgba(232,155,60,.4),0 4px 12px rgba(60,40,10,.15)}
/* 선택 아이템 정보 박스 */
.ss-info{margin-top:12px;background:#FFFDF7;border:3px solid #E7C887;border-radius:16px;padding:10px 20px;min-height:0;box-shadow:0 4px 12px rgba(60,40,10,.1)}
.ss-info-hint{font-size:18px;font-weight:700;color:#A98952;text-align:center}
.ss-info-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:4px}
.ss-info-name{font-size:24px;font-weight:900;color:#5B4218}
.ss-info-price{display:flex;align-items:center;gap:5px;font-size:24px;font-weight:900;color:#D9892B}
.ss-info-desc{font-size:17.5px;line-height:1.45;color:#7A6638;margin-bottom:8px}
.ss-info-foot{display:flex;justify-content:space-between;align-items:center}
.ss-info-owned{font-size:16px;font-weight:800;color:#9A7C3E}
.ss-info-buy{background:linear-gradient(180deg,#E89B3C,#C9892B);color:#fff;font-family:inherit;font-size:19px;font-weight:900;border:none;border-radius:12px;padding:9px 28px;cursor:pointer;box-shadow:0 4px 0 #9A6E0E}
.ss-info-buy:hover{transform:translateY(-1px)}
/* 구매 팝업 */
.ss-pop{position:fixed;inset:0;z-index:9300;background:rgba(50,30,10,.5);display:flex;align-items:center;justify-content:center;animation:bobFade .3s ease-out}
.ss-pop-card{background:#FFFDF4;border:3px solid #E7C887;border-radius:22px;max-width:380px;width:86%;padding:26px 28px 20px;text-align:center;box-shadow:0 18px 50px rgba(120,70,20,.3);animation:bobPop .35s ease-out}
.ss-pop-ico{height:90px;display:grid;place-items:center;margin-bottom:8px}
.ss-pop-ico img{max-height:90px;max-width:90px;object-fit:contain}
.ss-pop-title{font-size:20px;font-weight:900;color:#5B4218;margin-bottom:8px}
.ss-pop-desc{font-size:14px;line-height:1.6;color:#7A6638;margin-bottom:12px}
.ss-pop-price{font-size:14px;font-weight:800;color:#8A6A2A;margin-bottom:16px}
.ss-pop-price b{color:#D9892B;display:inline-flex;align-items:center;gap:3px}
.ss-pop-btns{display:flex;gap:8px}
.ss-pop-btn{flex:1;font-family:inherit;font-size:15px;font-weight:900;border-radius:12px;padding:11px 0;cursor:pointer;border:2px solid #E7C887;background:#fff;color:#8A6A2A}
.ss-pop-btn.primary{background:linear-gradient(180deg,#E89B3C,#C9892B);color:#fff;border:none;box-shadow:0 4px 0 #9A6E0E}

/* 상점 내부는 손가락 커서 */
#shop, #studyShop { cursor: pointer; }

/* 포인트 차감 카운트다운 강조 */
.ss-pts b{transition:color .15s}
.ss-pts b.spending{color:#FF6B57;text-shadow:0 0 8px rgba(255,90,60,.7);animation:ssSpend .2s ease}
@keyframes ssSpend{0%{transform:scale(1)}50%{transform:scale(1.18)}100%{transform:scale(1)}}