/* 후추봇 토큰 가게 — "버터 모닝" 리뉴얼 (2026-06) */
/* 기존 huchubot-shop.css 드롭인 교체본. 셀렉터/JS 훅 보존. */
/* 💌 상점 시그니처 연출: "후추봇 우체국" —
   메시지가 우표 딸린 편지 봉투 카드. 보내기 버튼은 우체통 빨강 대신 올리브 도장,
   후추봇 답장은 답장 편지지(점선 봉인)로 도착, 잔액 카드 동전이 반짝. */
@import url('style.css');

.container {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.shop-section-title {
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 12px;
}

/* 후추봇 잔액 카드 ----------------------------------------------------------*/
.shop-bot-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(135deg, var(--olive-bg), var(--cream));
  border: 2px solid var(--bm-line);
  border-radius: var(--r-card);
  padding: 18px 20px;
  box-shadow: var(--sh-strong);
  animation: bmPopIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s backwards;
}

.shop-bot-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--color-surface);
  background: var(--color-surface);
  flex-shrink: 0;
  box-shadow: 0 3px 0 rgba(120, 90, 40, 0.16);
  transform: rotate(-3deg);
  transition: transform 0.25s var(--bm-spring);
}
.shop-bot-avatar:hover { transform: rotate(3deg) scale(1.06); }

.shop-bot-info { flex: 1; }
.shop-bot-label {
  font-size: 0.85rem;
  color: var(--text-sec);
  font-weight: 700;
}
/* 잔액 — 동전 반짝 */
.shop-bot-balance {
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--olive-d);
  margin-top: 2px;
}
.shop-bot-sub {
  margin: 4px 0 0;
  font-size: 0.85rem;
  color: var(--text-sec);
}

/* 작성 카드 — 편지지 (시그니처) ------------------------------------------- */
.shop-write-card {
  background: var(--color-surface);
  border: 2px solid var(--bm-line);
  border-radius: var(--r-card);
  padding: 20px;
  box-shadow: var(--sh-card);
  position: relative;
  animation: bmPopIn 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) 0.12s backwards;
}
/* 편지 우표 */
.shop-write-card::after {
  content: '💌';
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 1.3rem;
  padding: 5px 7px;
  background: var(--bm-chip-bg);
  border: 2px dashed var(--bm-dash);
  border-radius: 4px;
  transform: rotate(4deg);
  line-height: 1;
  pointer-events: none;
}

.shop-form-greeting {
  margin: 0 0 10px;
  font-size: 0.95rem;
  color: var(--color-text);
  font-weight: 600;
  padding-right: 48px;
}
/* 편지지 줄 노트 */
.shop-textarea {
  width: 100%;
  border: 2px solid var(--bm-line);
  border-radius: var(--r-small);
  padding: 12px;
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background-color: var(--color-cream);
  background-image: repeating-linear-gradient(
    transparent 0,
    transparent 27px,
    var(--bm-line) 27px,
    var(--bm-line) 28px);
  line-height: 28px;
  resize: vertical;
  min-height: 96px;
  box-sizing: border-box;
  transition: border-color var(--transition);
}
.shop-textarea:focus {
  outline: none;
  border-color: var(--olive);
  background-color: var(--color-surface);
}

.shop-form-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10px;
  gap: 12px;
  flex-wrap: wrap;
}
.shop-counter {
  font-size: 0.85rem;
  color: var(--text-sec);
  font-weight: 600;
}
.shop-counter.over { color: var(--red); }

/* 보내기 — 올리브 도장 */
.shop-submit {
  background: var(--olive);
  color: #fff;
  border: none;
  border-radius: var(--r-pill);
  padding: 11px 22px;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 3px 0 rgba(92, 99, 57, 0.35);
  transition: transform 0.2s var(--bm-spring), background var(--transition), opacity var(--transition);
}
.shop-submit:hover:not(:disabled) {
  transform: scale(1.03) rotate(-1deg);
  background: var(--olive-d);
}
.shop-submit:active:not(:disabled) { transform: scale(0.95); }
.shop-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.shop-form-error {
  margin: 10px 0 0;
  color: var(--red);
  font-size: 0.9rem;
  font-weight: 700;
}

.shop-login-needed,
.shop-not-eligible,
.shop-already-sent,
.shop-bot-empty {
  text-align: center;
  padding: 18px 10px;
  color: var(--color-text);
}
.shop-login-needed p,
.shop-not-eligible p,
.shop-already-sent p,
.shop-bot-empty p {
  margin: 4px 0;
}
.shop-login-sub,
.shop-already-sub,
.shop-empty-sub {
  font-size: 0.9rem;
  color: var(--text-sec);
}
.shop-home-btn {
  display: inline-block;
  margin-top: 10px;
  padding: 9px 18px;
  background: var(--olive);
  color: #fff;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-weight: 800;
  box-shadow: 0 3px 0 rgba(92, 99, 57, 0.35);
  transition: transform 0.2s var(--bm-spring);
}
.shop-home-btn:hover { transform: scale(1.04); }

/* 보관함 — 편지 봉투들 ---------------------------------------------------- */
.shop-archive {
  display: flex;
  flex-direction: column;
}
.shop-archive-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.shop-archive-loading,
.shop-archive-empty {
  text-align: center;
  color: var(--text-sec);
  padding: 18px 0;
  margin: 0;
}

/* 받은 편지 카드 */
.shop-msg {
  background: var(--color-surface);
  border: 2px solid var(--bm-line);
  border-radius: var(--r-card);
  padding: 14px 16px;
  box-shadow: var(--sh-card);
  animation: bmPopIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  transition: transform 0.2s var(--bm-spring);
}
.shop-msg:hover { transform: translateY(-2px); }
.shop-archive-list .shop-msg:nth-child(1) { animation-delay: 0.04s; }
.shop-archive-list .shop-msg:nth-child(2) { animation-delay: 0.1s; }
.shop-archive-list .shop-msg:nth-child(3) { animation-delay: 0.16s; }
.shop-archive-list .shop-msg:nth-child(n+4) { animation-delay: 0.22s; }

.shop-msg-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}
.shop-msg-from {
  font-weight: 800;
  color: var(--color-text);
}
.shop-msg-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.9rem;
  background: var(--color-bg);
  border: 1.5px solid var(--bm-line);
}
.shop-msg-time {
  font-size: 0.8rem;
  color: var(--muted);
  margin-left: auto;
}

.shop-msg-text {
  margin: 4px 0 0;
  color: var(--color-text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}

/* 후추봇 답장 — 점선 봉인 답장 편지지 (시그니처) */
.shop-reply {
  display: flex;
  gap: 10px;
  margin-top: 12px;
  padding: 11px 12px;
  background: var(--olive-bg);
  border: 2px dashed var(--color-olive-light);
  border-radius: 4px var(--r-mini) var(--r-mini) var(--r-mini);
  align-items: flex-start;
}
.shop-reply-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--color-surface);
}
.shop-reply-body {
  flex: 1;
}
.shop-reply-name {
  font-weight: 800;
  font-size: 0.9rem;
  color: var(--olive-d);
}
.shop-reply-text {
  margin: 2px 0 0;
  color: var(--color-text);
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.shop-reply-time {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 2px;
}

.shop-reply-waiting {
  margin-top: 10px;
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1.5px dashed var(--bm-line-strong);
  border-radius: var(--r-mini);
  color: var(--text-sec);
  font-size: 0.85rem;
  text-align: center;
}

.shop-more-btn {
  align-self: center;
  margin-top: 12px;
  background: transparent;
  border: 2px dashed var(--bm-dash);
  color: var(--olive-d);
  border-radius: var(--r-pill);
  padding: 9px 18px;
  cursor: pointer;
  font-weight: 700;
  transition: background var(--transition), transform 0.2s var(--bm-spring);
}
.shop-more-btn:hover {
  background: var(--olive-bg);
  transform: scale(1.03);
}

/* Family color accents on author badge */
.shop-msg-badge--엄마 { background: var(--fam-mom-bg); color: var(--fam-mom-acc); border-color: var(--fam-mom-acc); }
.shop-msg-badge--형 { background: var(--fam-bro-bg); color: var(--fam-bro-acc); border-color: var(--fam-bro-acc); }
.shop-msg-badge--누나 { background: var(--fam-sis-bg); color: var(--fam-sis-acc); border-color: var(--fam-sis-acc); }