/* ── 픽네이처 공통 CSS ─────────────────────────────────────────────── */
/* /var/www/picknature/public/common.css */

/* ── 페이지 페이드인 ───────────────────────────────────────────────── */
@keyframes pn-fadein {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.app-wrap { animation: pn-fadein .35s ease both; }

/* ── 토스트 (공통 통일) ────────────────────────────────────────────── */
.toast {
  position: fixed; bottom: 20px;
  left: 50%; transform: translateX(-50%);
  max-width: 390px; width: 90%;
  background: #0D1F14; color: #fff;
  padding: 12px 20px; border-radius: 14px;
  font-size: 14px; font-weight: 600; z-index: 9999;
  opacity: 0; transition: opacity .28s, transform .28s;
  pointer-events: none; text-align: center;
  border: 1px solid rgba(82,183,136,.4);
  box-shadow: 0 6px 24px rgba(82,183,136,.25);
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(-4px); }

/* ── 스켈레톤 ──────────────────────────────────────────────────────── */
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, #e4e8e4 25%, #f0f4f0 50%, #e4e8e4 75%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.4s infinite;
  border-radius: 8px;
}
.skeleton-card {
  background: #fff; border-radius: 16px;
  padding: 18px; margin-bottom: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,.06);
}
.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line.w80 { width: 80%; }
.skeleton-line.w60 { width: 60%; }
.skeleton-line.w40 { width: 40%; }
.skeleton-rect { height: 80px; border-radius: 10px; margin-bottom: 12px; }

/* ── 에러 / 빈 상태 ────────────────────────────────────────────────── */
.empty-state, .error-state {
  text-align: center; padding: 52px 20px;
  display: flex; flex-direction: column;
  align-items: center; gap: 12px;
}
.empty-state .es-icon, .error-state .es-icon {
  font-size: 48px; line-height: 1;
}
.empty-state .es-title, .error-state .es-title {
  font-size: 17px; font-weight: 800; color: #1A2E1A;
}
.empty-state .es-sub, .error-state .es-sub {
  font-size: 14px; color: #6B8C6B; line-height: 1.7;
}
.error-state .es-title { color: #C62828; }

/* ── 배송 뱃지 ─────────────────────────────────────────────────────── */
.badge-dawn    { background: #EDE7F6; color: #4527A0; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-block; }
.badge-normal  { background: #E3F2FD; color: #1565C0; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-block; }
.badge-pickup  { background: #E8F5E9; color: #2E7D32; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-block; }
.badge-paid    { background: #E8F5E9; color: #2E7D32; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-block; }
.badge-picked  { background: #F5F5F5; color: #9E9E9E; font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 20px; display: inline-block; }

/* ── 카운트다운 색상 ───────────────────────────────────────────────── */
.countdown           { color: #2D5A3D; }
.countdown.moderate  { color: #E65100; }
.countdown.urgent    { color: #C62828; }
@keyframes pn-blink  { 50% { opacity: .45; } }
.countdown.urgent    { animation: pn-blink .75s step-end infinite; }

/* ── OTP 스텝 ──────────────────────────────────────────────────────── */
.otp-steps {
  display: flex; align-items: center;
  gap: 0; margin-bottom: 20px;
}
.otp-step-item {
  display: flex; align-items: center;
  gap: 6px; font-size: 12px; font-weight: 600;
  color: #9E9E9E;
}
.otp-step-item.active { color: #2D5A3D; }
.otp-step-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: #E0E0E0; color: #9E9E9E;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; flex-shrink: 0;
}
.otp-step-item.active .otp-step-num { background: #2D5A3D; color: #fff; }
.otp-step-line {
  flex: 1; height: 2px; background: #E0E0E0; margin: 0 8px;
}

/* ── 공유 버튼 ─────────────────────────────────────────────────────── */
.share-btns {
  display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}
.share-btn {
  flex: 1; min-width: 80px;
  padding: 10px 8px; border: none; border-radius: 10px;
  font-size: 12px; font-weight: 700; cursor: pointer;
  font-family: inherit; display: flex; align-items: center;
  justify-content: center; gap: 5px; transition: opacity .15s;
}
.share-btn:active { opacity: .8; }
.share-btn.kakao { background: #FEE500; color: #3C1E1E; }
.share-btn.sms   { background: #E8F5E9; color: #2E7D32; }
.share-btn.copy  { background: #EEF4EE; color: #2D5A3D; }

/* ── 바 차트 (CSS only) ────────────────────────────────────────────── */
.bar-chart { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.bar-row { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.bar-row .bar-label { width: 48px; font-weight: 600; color: #6B8C6B; flex-shrink: 0; }
.bar-row .bar-track {
  flex: 1; height: 8px; background: #F0F4F0;
  border-radius: 4px; overflow: hidden;
}
.bar-row .bar-fill {
  height: 100%; border-radius: 4px;
  transition: width .8s ease;
}
.bar-fill.dawn   { background: #7E57C2; }
.bar-fill.normal { background: #1976D2; }
.bar-fill.pickup { background: #388E3C; }
.bar-row .bar-val { font-weight: 700; color: #1A2E1A; min-width: 56px; text-align: right; font-size: 12px; }

/* ── 세션 미리보기 카드 ─────────────────────────────────────────────── */
.session-preview {
  background: linear-gradient(135deg, #1B4332, #2D5A3D);
  border-radius: 14px; padding: 16px; margin-top: 12px;
  color: #fff; display: none;
}
.session-preview.show { display: block; }
.sp-product { font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.sp-prices  { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-price-item { font-size: 12px; color: rgba(255,255,255,.7); }
.sp-price-item span { font-weight: 700; color: #B7E4C7; }

/* ── 스텟 박스 개선 ────────────────────────────────────────────────── */
.stat-box-lg {
  background: #fff; border-radius: 14px; padding: 16px;
  box-shadow: 0 2px 12px rgba(45,90,61,.08);
  display: flex; align-items: center; gap: 14px;
}
.stat-box-lg .sb-icon {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, rgba(82,183,136,.15), rgba(82,183,136,.06));
  border: 1px solid rgba(82,183,136,.2);
  display: flex; align-items: center; justify-content: center;
  font-size: 20px; flex-shrink: 0;
}
.stat-box-lg .sb-info { flex: 1; min-width: 0; }
.stat-box-lg .sb-num { font-size: 22px; font-weight: 800; color: #1A2E1A; line-height: 1; }
.stat-box-lg .sb-lbl { font-size: 12px; color: #6B8C6B; margin-top: 3px; }
.stat-box-lg .sb-diff { font-size: 11px; font-weight: 700; }
.sb-diff.up   { color: #2E7D32; }
.sb-diff.down { color: #C62828; }
.sb-diff.same { color: #9E9E9E; }