/* EasyHangout Coupons 1.0.0 - coupon hub (tabs + notice card + coupon cards) */

.ehc {
  --ehc-c: #2563eb;          /* platform accent, overridden per tab/notice via inline --ehc-c */
  --ehc-sky: #38bdf8;
  --ehc-sky-soft: #f0f9ff;
  --ehc-line: #e0f2fe;
  --ehc-ink: #111827;
  --ehc-blue: #2563eb;
  --ehc-burgundy: #a61d37;
  --ehc-burgundy-dark: #87142a;
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto;
  color: var(--ehc-ink);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  line-height: 1.5;
}
.ehc *, .ehc *::before, .ehc *::after { box-sizing: border-box; }

/* ---------- Tabs ---------- */
.ehc-tabs {
  display: flex;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0 0 4px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.ehc-tabs::-webkit-scrollbar { display: none; }
.ehc-tab {
  flex: 0 0 auto;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 10px 18px;
  border: 1px solid var(--ehc-line);
  border-radius: 999px;
  background: #fff;
  color: #374151;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.ehc-tab:hover { border-color: var(--ehc-c); color: var(--ehc-c); }
.ehc-tab:focus-visible { outline: 2px solid var(--ehc-c); outline-offset: 2px; }
.ehc-tab.is-active,
.ehc-tab[aria-selected="true"] {
  background: var(--ehc-c);
  border-color: var(--ehc-c);
  color: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}

/* ---------- Panels ---------- */
.ehc-panel[hidden] { display: none; }

/* ---------- Notice card (sky-blue frame) ---------- */
.ehc-notice {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 0 0 6px;
  padding: 16px 20px;
  border: 1.5px solid var(--ehc-sky);
  border-radius: 12px;
  background: var(--ehc-sky-soft);
}
.ehc-notice__icon {
  flex: 0 0 56px;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
}
.ehc-notice__icon img { display: block; width: 100%; height: 100%; object-fit: contain; }
.ehc-notice__text { flex: 1; min-width: 0; }
.ehc-notice__title {
  margin: 0 0 4px;
  color: var(--ehc-ink);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.3;
}
.ehc-notice__sub {
  margin: 0;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
}

/* ---------- Coupon list (reference layout, kept verbatim where it matters) ---------- */
.ehc .trip-coupon-grid {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin: 25px 0;
  padding: 0;
  list-style: none;
}
.ehc .trip-coupon-card {
  background: #ffffff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  border: 1px solid #E0F2FE;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 20px;
  text-align: left;
  margin: 0;
  box-sizing: border-box;
  min-height: 142px; /* 토스페이 11% 카드 규격: 썸네일 100 + 안쪽 여백 20×2 + 테두리 */
}
.ehc .trip-coupon-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(166, 29, 55, 0.12);
}
.ehc .trip-coupon-card-icon {
  width: 100px;
  height: 100px;
  min-width: 100px;
  flex-shrink: 0;
  margin: 0;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f8f9fa;
}
.ehc .trip-coupon-card-icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.ehc .trip-coupon-card-text { flex: 1; min-width: 0; }
.ehc .trip-coupon-card h3 {
  color: #111827;
  font-size: 18px;
  margin: 0 0 8px 0;
  font-weight: 700;
  line-height: 1.3;
}
.ehc .trip-coupon-card p {
  color: #2563EB;
  font-size: 14px;
  font-weight: 600;
  margin: 0;
  line-height: 1.5;
  word-break: keep-all;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ehc .trip-coupon-card .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #A61D37;
  color: white;
  padding: 12px 20px;
  border-radius: 8px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  font-weight: bold;
  min-width: 140px;
  transition: all 0.2s;
  flex-shrink: 0;
  text-align: center;
  line-height: 1.2;
}
.ehc .trip-coupon-card .btn:hover,
.ehc .trip-coupon-card .btn:focus-visible { background: #87142A; color: #fff; }

/* small chips under the description */
.ehc-card__verified,
.ehc-card__flag {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1.5;
}
.ehc-card__verified { background: #ecfdf5; color: #047857; }
.ehc-card__flag { background: #fef3c7; color: #92400e; }

/* placeholder cards: rendered for logged-in admins only */
.ehc .trip-coupon-card.ehc-card--pending {
  background: #fffbeb;
  border: 1px dashed #f59e0b;
}
.ehc .trip-coupon-card.ehc-card--pending .btn { background: #b45309; }

.ehc-empty {
  margin: 24px 0;
  padding: 20px;
  border: 1px dashed var(--ehc-line);
  border-radius: 8px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}
.ehc-updated {
  margin: 4px 0 0;
  color: #9ca3af;
  font-size: 12px;
  text-align: right;
}
.ehc-admin-warning {
  margin: 0 0 16px;
  padding: 10px 14px;
  border-left: 4px solid #f59e0b;
  background: #fffbeb;
  color: #92400e;
  font-size: 13px;
}

/* ---------- Toast ---------- */
.ehc-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  z-index: 99999;
  max-width: calc(100vw - 32px);
  padding: 12px 20px;
  border-radius: 999px;
  background: rgba(17, 24, 39, .94);
  color: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
  opacity: 0;
  transform: translate(-50%, 12px);
  transition: opacity .2s, transform .2s;
  pointer-events: none;
}
.ehc-toast.is-visible { opacity: 1; transform: translate(-50%, 0); }
.ehc-toast strong { color: #fde68a; }

/* ---------- Mobile (reference values) ---------- */
@media (max-width: 768px) {
  .ehc-tab { padding: 9px 14px; font-size: 14px; }
  .ehc-notice { gap: 12px; padding: 14px 16px; }
  .ehc-notice__icon { flex-basis: 48px; width: 48px; height: 48px; }
  .ehc-notice__title { font-size: 16px; }
  .ehc-notice__sub { font-size: 13px; }
  .ehc .trip-coupon-card { padding: 15px; gap: 15px; min-height: 112px; }
  .ehc .trip-coupon-card-icon { width: 80px; height: 80px; min-width: 80px; }
  .ehc .trip-coupon-card h3 { font-size: 16px; }
  .ehc .trip-coupon-card p { font-size: 13px; }
  .ehc .trip-coupon-card .btn { min-width: 110px; padding: 10px 14px; font-size: 12px; }
}
@media (max-width: 480px) {
  /* very narrow: button drops under the text so nothing overflows */
  .ehc .trip-coupon-card { flex-wrap: wrap; }
  .ehc .trip-coupon-card .btn { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .ehc .trip-coupon-card, .ehc-tab, .ehc-toast { transition: none; }
  .ehc .trip-coupon-card:hover { transform: none; }
}