/* ============================================================
   GOLFSTAR INAPP TOAST  —  golfstar-toast.css
   ────────────────────────────────────────────────────────────
   PC/모바일 웹브라우저용 인앱 푸시 토스트.
   안드로이드 앱 웹뷰는 서버 + JS 양쪽에서 차단.

   디자인:
   - 환영 배너 톤 모방 (상단 중앙 카드형)
   - 골프스타 디자인 토큰 그대로 사용
   - 다크모드: html[data-theme="dark"] 분기

   동작:
   - 큐 시스템 (한 번에 1개씩 순차 표시)
   - 8초 자동 닫힘, 호버 시 일시정지
   - 클릭 → URL 이동 + DB 읽음처리
   - 닫기(X) → 닫힘 + DB 읽음처리

   로드 위치: _header.main.php 또는 footer (한 번만)
   ============================================================ */

/* ──────────────────────────────────────
   Container — 화면 상단 중앙 고정
────────────────────────────────────── */
.gs-toast-stack {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 99998;             /* 헤더(보통 100) 위, 모달(99999) 아래 */
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;       /* 컨테이너는 통과, 토스트만 클릭 받음 */
  width: min(440px, calc(100vw - 24px));
}

/* ──────────────────────────────────────
   Toast — 단건 카드
────────────────────────────────────── */
.gs-toast {
  pointer-events: auto;       /* 카드는 클릭 받음 */
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 13px 40px 13px 14px;   /* 우측은 X버튼 영역 */

  background: var(--gs-surface, #ffffff);
  border: 1.5px solid var(--gs-border, #dde8f2);
  border-radius: var(--gs-radius-lg, 14px);
  box-shadow:
    0 12px 32px rgba(12, 29, 44, .14),
    0 4px 12px rgba(12, 29, 44, .08);

  cursor: pointer;
  overflow: hidden;
  transform: translateY(-12px);
  opacity: 0;
  transition:
    transform .32s cubic-bezier(.22, 1, .36, 1),
    opacity   .28s ease,
    box-shadow .2s ease;
}

/* 상단 그라디언트 액센트 라인 (3px) */
.gs-toast::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--gs-grad, linear-gradient(110deg, #00c17c 0%, #00b4cc 50%, #1b72f4 100%));
  pointer-events: none;
}

/* 진입 애니메이션 */
.gs-toast.is-shown {
  transform: translateY(0);
  opacity: 1;
}

/* 호버 — 살짝 들어올림 */
.gs-toast:hover {
  box-shadow:
    0 16px 40px rgba(12, 29, 44, .18),
    0 6px 16px rgba(12, 29, 44, .10);
}

/* 종료 애니메이션 */
.gs-toast.is-leaving {
  transform: translateY(-12px);
  opacity: 0;
  pointer-events: none;
}

/* ──────────────────────────────────────
   Icon — 좌측 그라디언트 원형 아이콘
────────────────────────────────────── */
.gs-toast-icon {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--gs-grad, linear-gradient(110deg, #00c17c, #00b4cc, #1b72f4));
  color: #fff;
  font-size: 18px;
  line-height: 1;
  box-shadow: 0 4px 12px var(--gs-green-glow, rgba(0, 193, 124, .35));
}

.gs-toast-icon svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ──────────────────────────────────────
   Body — 제목 + 메시지
────────────────────────────────────── */
.gs-toast-body {
  flex: 1;
  min-width: 0;
}

.gs-toast-title {
  font-family: var(--gs-font-ui, 'GmarketSans', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  line-height: 1.35;
  letter-spacing: -.02em;
  color: var(--gs-text, #0c1d2c);
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.gs-toast-message {
  margin-top: 3px;
  font-family: var(--gs-font-base, 'NanumSquareNeo', sans-serif);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  color: var(--gs-text-2, #3b5468);
  word-break: keep-all;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ──────────────────────────────────────
   Close (X) — 우상단
────────────────────────────────────── */
.gs-toast-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--gs-text-3, #7a9aae);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0;
  transition: background .15s ease, color .15s ease;
}

.gs-toast-close:hover {
  background: var(--gs-bg, #f2f7fc);
  color: var(--gs-text, #0c1d2c);
}

.gs-toast-close svg {
  width: 14px;
  height: 14px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2.4;
  stroke-linecap: round;
}

/* ──────────────────────────────────────
   Progress bar — 자동 닫힘 진행도
   (CSS 애니메이션, JS가 호버 시 paused 토글)
────────────────────────────────────── */
.gs-toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  width: 100%;
  background: var(--gs-grad, linear-gradient(110deg, #00c17c, #00b4cc, #1b72f4));
  transform-origin: left center;
  transform: scaleX(1);
  animation: gs-toast-shrink 8s linear forwards;
}

.gs-toast.is-paused .gs-toast-progress {
  animation-play-state: paused;
}

@keyframes gs-toast-shrink {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ──────────────────────────────────────
   Variants — type별 색상 미세 조정 (선택)
   기본은 그라디언트 아이콘, 일부는 단색 강조
────────────────────────────────────── */

/* 쿠폰 활동 — 그린 단색 (브랜드 톤) */
.gs-toast[data-type="coupon_issued"] .gs-toast-icon,
.gs-toast[data-type="stamp_collected"] .gs-toast-icon,
.gs-toast[data-type="coupon_completed"] .gs-toast-icon,
.gs-toast[data-type="coupon_approved"] .gs-toast-icon {
  background: linear-gradient(135deg, var(--gs-green, #00c17c), var(--gs-green-d, #009960));
}

/* 거절/회수 — 톤 다운된 회색 */
.gs-toast[data-type="coupon_rejected"] .gs-toast-icon,
.gs-toast[data-type="coupon_revoked"] .gs-toast-icon {
  background: linear-gradient(135deg, #94a3b8, #64748b);
  box-shadow: 0 4px 12px rgba(100, 116, 139, .25);
}

/* 관리자/사업자 알림 — 블루 강조 */
.gs-toast[data-type^="admin_"] .gs-toast-icon,
.gs-toast[data-type="biz_plan_expire_7d"] .gs-toast-icon,
.gs-toast[data-type="biz_plan_expired"] .gs-toast-icon,
.gs-toast[data-type="ad_approved"] .gs-toast-icon,
.gs-toast[data-type="ad_pending"] .gs-toast-icon,
.gs-toast[data-type="ad_rejected"] .gs-toast-icon {
  background: linear-gradient(135deg, var(--gs-blue, #1b72f4), var(--gs-blue-d, #1254d0));
  box-shadow: 0 4px 12px var(--gs-blue-glow, rgba(27, 114, 244, .30));
}

/* ──────────────────────────────────────
   DARK MODE
   토큰 변수가 자동 전환되므로 기본 동작은 OK
   토큰 외 직접값(그림자, 호버)만 분기
────────────────────────────────────── */
html[data-theme="dark"] .gs-toast {
  background: var(--gs-surface, #162233);
  box-shadow:
    0 12px 32px rgba(0, 0, 0, .42),
    0 4px 12px rgba(0, 0, 0, .28);
}

html[data-theme="dark"] .gs-toast:hover {
  box-shadow:
    0 16px 40px rgba(0, 0, 0, .52),
    0 6px 16px rgba(0, 0, 0, .34);
}

html[data-theme="dark"] .gs-toast-close:hover {
  background: rgba(255, 255, 255, .06);
  color: var(--gs-text, #d4e8f4);
}

/* ──────────────────────────────────────
   접근성 — 모션 줄이기 선호 사용자
────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .gs-toast {
    transition: opacity .2s ease;
    transform: none;
  }
  .gs-toast.is-shown,
  .gs-toast.is-leaving {
    transform: none;
  }
  .gs-toast-progress {
    animation: none;
  }
}

/* ──────────────────────────────────────
   반응형 — 모바일
────────────────────────────────────── */
@media (max-width: 640px) {
  .gs-toast-stack {
    top: 8px;
    width: calc(100vw - 16px);
  }
  .gs-toast {
    padding: 11px 36px 11px 12px;
    gap: 10px;
    border-radius: var(--gs-radius, 10px);
  }
  .gs-toast-icon {
    width: 34px;
    height: 34px;
    font-size: 16px;
  }
  .gs-toast-icon svg {
    width: 16px;
    height: 16px;
  }
  .gs-toast-title {
    font-size: 13px;
  }
  .gs-toast-message {
    font-size: 11.5px;
  }
}

/* 작은 화면에서 진입은 위에서 슬라이드 */
@media (max-width: 640px) {
  .gs-toast {
    transform: translateY(-8px);
  }
  .gs-toast.is-shown { transform: translateY(0); }
  .gs-toast.is-leaving { transform: translateY(-8px); }
}