@import '../shared.css';

/* SCR-33 EDM·캠페인 · SCR-34 스폰서십 (M12) 공통 스타일. */

.kx-mkt {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  padding: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.kx-mkt__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.kx-mkt__title {
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  color: var(--color-neutral-900);
}
.kx-mkt__subtitle {
  font-size: var(--fs-body);
  color: var(--color-neutral-500);
  margin-top: 2px;
}
.kx-mkt__head-actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
}

/* 샘플 데이터 배지 */
.kx-sample {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--color-warning);
  background: #fff4e5;
  border: 1px solid #fcd9a8;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}

/* 오프라인 강등(폴백) 표시 — 집계 API 미연결 시 시연 데이터 안내 */
.kx-vis__degraded {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--color-warning);
  background: #fff4e5;
  border: 1px solid #fcd9a8;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  white-space: nowrap;
}
.kx-vis__activity-empty {
  color: var(--color-text-muted, #667085);
  font-size: 13px;
  padding: 6px 0;
  list-style: none;
}

/* 칩 */
.kx-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 4px 12px;
  cursor: pointer;
}
.kx-chip.is-active {
  color: var(--color-primary-700);
  background: var(--color-primary-100);
}

/* KPI */
.kx-mkt__kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}
.kx-kpi__unit {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin-left: 3px;
  color: var(--color-neutral-500);
}
.kx-kpi__sub {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}
.kx-kpi--accent-primary {
  border-left: 4px solid var(--color-primary-600);
}
.kx-kpi--accent-ai {
  border-left: var(--accent-ai);
}
.kx-kpi--accent-success {
  border-left: 4px solid var(--color-success);
}
.kx-kpi--accent-warning {
  border-left: 4px solid var(--color-violation-warn);
}

/* 2열 분할 */
.kx-mkt__split {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.kx-mkt__list-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}
.kx-mkt__list-head h2 {
  font-size: var(--fs-h3);
  color: var(--color-neutral-900);
}
.kx-mkt__tabs {
  display: flex;
  gap: var(--space-2);
}
.kx-mkt__link {
  border: none;
  background: none;
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-primary-600);
  cursor: pointer;
}

/* ── 캠페인 리스트 ── */
.kx-mkt__campaigns {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kx-mkt__campaign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-white);
}
.kx-mkt__campaign:hover {
  box-shadow: var(--shadow-level2);
}
.kx-mkt__campaign-main {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-width: 0;
}
.kx-mkt__campaign-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary-100);
  color: var(--color-primary-700);
}
.kx-mkt__campaign-icon.is-scheduled {
  background: #dcf3e9;
  color: var(--color-success);
}
.kx-mkt__campaign-icon.is-sending {
  background: #fdecea;
  color: var(--color-error);
}
.kx-mkt__campaign-icon.is-done {
  background: var(--color-neutral-100);
  color: var(--color-neutral-500);
}
.kx-mkt__campaign-info {
  min-width: 0;
}
.kx-mkt__campaign-top {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: 3px;
}
.kx-mkt__campaign-top h3 {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kx-mkt__campaign-meta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}
.kx-mkt__dot-sep {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-neutral-200);
}
.kx-mkt__campaign-metrics {
  display: flex;
  gap: var(--space-5);
  flex-shrink: 0;
}
.kx-mkt__campaign-metrics > div {
  text-align: center;
}
.kx-mkt__metric-k {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
  margin-bottom: 2px;
}
.kx-mkt__campaign-metrics strong {
  font-size: var(--fs-body);
  color: var(--color-neutral-900);
}

/* 캠페인 상태 pill */
.kx-mkt__cpill {
  flex-shrink: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: 4px;
}
.kx-mkt__cpill.is-draft {
  color: var(--color-neutral-500);
  background: var(--color-neutral-100);
}
.kx-mkt__cpill.is-scheduled {
  color: var(--color-primary-700);
  background: var(--color-primary-100);
}
.kx-mkt__cpill.is-sending {
  color: var(--color-error);
  background: #fdecea;
}
.kx-mkt__cpill.is-done {
  color: var(--color-success);
  background: #dcf3e9;
}

/* ── 캠페인 빌더 ── */
.kx-mkt__builder .kx-card {
  position: sticky;
  top: 0;
}
.kx-mkt__field-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-900);
  margin: var(--space-4) 0 var(--space-2);
}
.kx-mkt__segments {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kx-mkt__segment {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-3);
  border: var(--border-card);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
}
.kx-mkt__segment:hover {
  background: var(--color-neutral-050);
}
.kx-mkt__segment input {
  width: 16px;
  height: 16px;
  accent-color: var(--color-ai-accent);
}
.kx-mkt__segment-count {
  margin-left: auto;
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}

.kx-mkt__ai-box {
  margin-top: var(--space-4);
  padding: var(--space-4);
  background: var(--color-ai-surface);
  border: 1px solid #d9cfff;
  border-radius: var(--radius-lg);
}
.kx-mkt__ai-box-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  color: var(--color-ai-accent);
  margin-bottom: var(--space-2);
}
.kx-mkt__ai-box p {
  font-size: var(--fs-caption);
  color: var(--color-neutral-700);
  line-height: var(--lh-caption);
  margin-bottom: var(--space-3);
}

.kx-mkt__image-slot {
  width: 100%;
  aspect-ratio: 16 / 9;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  border: 2px dashed var(--color-neutral-200);
  border-radius: var(--radius-lg);
  background: var(--color-neutral-050);
  color: var(--color-neutral-500);
  font-size: var(--fs-caption);
  cursor: pointer;
}
.kx-mkt__image-slot:hover {
  border-color: var(--color-primary-600);
  color: var(--color-primary-600);
}

.kx-mkt__schedule {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}
.kx-mkt__schedule .kx-seg {
  display: flex;
}
.kx-mkt__schedule .kx-seg__btn {
  flex: 1;
}
.kx-mkt__datetime {
  width: 100%;
  height: 36px;
  padding: 0 var(--space-3);
  border: var(--border-card);
  border-radius: var(--radius-sm);
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
  font-family: inherit;
}

.kx-mkt__preview {
  margin: var(--space-4) 0;
  border: var(--border-card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.kx-mkt__preview-head {
  padding: var(--space-2);
  text-align: center;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-500);
  background: var(--color-neutral-050);
  border-bottom: 1px solid var(--color-neutral-200);
}
.kx-mkt__preview-body {
  padding: var(--space-4);
  background: var(--color-white);
}
.kx-mkt__preview-banner {
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: var(--color-neutral-050);
  color: var(--color-neutral-500);
  font-size: var(--fs-caption);
  font-style: italic;
  margin-bottom: var(--space-3);
}
.kx-mkt__preview-title {
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  color: var(--color-neutral-900);
  margin-bottom: var(--space-2);
}
.kx-mkt__preview-text {
  font-size: var(--fs-caption);
  color: var(--color-neutral-700);
  line-height: var(--lh-caption);
}
.kx-mkt__preview-foot {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-neutral-100);
  font-size: var(--fs-nano);
  color: var(--color-neutral-500);
}
.kx-mkt__preview-links {
  display: flex;
  gap: var(--space-2);
  margin-top: 4px;
}
.kx-mkt__preview-links a {
  text-decoration: underline;
}

/* ── 스폰서십 티어 ── */
.kx-mkt__tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-4);
}
.kx-mkt__tier {
  display: flex;
  flex-direction: column;
  border: var(--border-card);
  border-left: 4px solid var(--tier-accent, var(--color-primary-600));
  border-radius: var(--radius-lg);
  background: var(--color-white);
  overflow: hidden;
}
.kx-mkt__tier.is-soldout {
  opacity: 0.72;
}
.kx-mkt__tier-body {
  padding: var(--space-4);
  flex: 1;
}
.kx-mkt__tier-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
}
.kx-mkt__tier-badge {
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: 0.08em;
  color: var(--tier-accent, var(--color-primary-700));
  background: color-mix(in srgb, var(--tier-accent, #0066b3) 12%, white);
  padding: 3px 10px;
  border-radius: var(--radius-pill);
}
.kx-mkt__tier-name {
  font-size: var(--fs-h3);
  color: var(--color-neutral-900);
  margin-bottom: 2px;
}
.kx-mkt__tier-price {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--color-primary-700);
  margin-bottom: var(--space-4);
}
.kx-mkt__tier-benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kx-mkt__tier-benefits li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--fs-caption);
  color: var(--color-neutral-700);
}
.kx-mkt__tier-check {
  color: var(--color-primary-600);
  flex-shrink: 0;
}
.kx-mkt__tier-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--color-neutral-100);
  background: var(--color-neutral-050);
}
.kx-mkt__tier-remain {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-neutral-700);
}
.kx-mkt__tier-remain strong {
  color: var(--color-primary-700);
}
.kx-mkt__tier-remain.is-sold {
  color: var(--color-error);
}

.kx-mkt__deadline {
  margin-top: var(--space-4);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding: var(--space-4);
  border: var(--border-card);
  border-radius: var(--radius-lg);
  background: var(--color-primary-050);
}
.kx-mkt__deadline-info {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}
.kx-mkt__deadline-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--color-white);
  color: var(--color-primary-600);
}
.kx-mkt__deadline h3 {
  font-size: var(--fs-h3);
  color: var(--color-neutral-900);
}
.kx-mkt__deadline p {
  font-size: var(--fs-caption);
  color: var(--color-neutral-700);
  margin-top: 2px;
}

/* ── 스폰서 관리 ── */
.kx-mkt__sponsor-col {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}
.kx-mkt__sponsors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.kx-mkt__sponsor {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3);
  border: none;
  background: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
}
.kx-mkt__sponsor:hover {
  background: var(--color-neutral-050);
}
.kx-mkt__sponsor.is-selected {
  background: var(--color-primary-050);
  box-shadow: inset 4px 0 0 var(--color-primary-600);
}
.kx-mkt__sponsor-avatar {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  background: var(--color-primary-100);
  color: var(--color-primary-700);
  font-weight: var(--fw-bold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.kx-mkt__sponsor-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.kx-mkt__sponsor-info strong {
  font-size: var(--fs-body);
  color: var(--color-neutral-900);
}
.kx-mkt__sponsor-info span {
  font-size: var(--fs-caption);
  color: var(--color-neutral-500);
}
.kx-mkt__spill {
  flex-shrink: 0;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  padding: 2px 8px;
  border-radius: 4px;
}
.kx-mkt__spill.is-signed {
  color: var(--color-success);
  background: #dcf3e9;
}
.kx-mkt__spill.is-pending {
  color: var(--color-neutral-700);
  background: var(--color-neutral-100);
}

/* 이행물 체크리스트 */
.kx-mkt__fulfillment {
  list-style: none;
  margin: 0 0 var(--space-4);
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}
.kx-mkt__fulfillment li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  font-size: var(--fs-body);
  color: var(--color-neutral-700);
}
.kx-mkt__fulfillment li.is-done {
  color: var(--color-neutral-900);
}
.kx-mkt__check {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  border-radius: var(--radius-sm);
  border: 1.5px solid var(--color-neutral-200);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-accent);
}
.kx-mkt__check.is-done {
  background: var(--color-primary-600);
  border-color: var(--color-primary-600);
}
.kx-mkt__roi-link {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  border: none;
  border-radius: var(--radius-lg);
  background: var(--color-primary-050);
  color: var(--color-primary-700);
  font-size: var(--fs-body);
  font-weight: var(--fw-bold);
  cursor: pointer;
}
.kx-mkt__roi-link:hover {
  background: var(--color-primary-100);
}

/* 반응형 */
@media (max-width: 1100px) {
  .kx-mkt__split {
    grid-template-columns: 1fr;
  }
  .kx-mkt__builder .kx-card {
    position: static;
  }
}
@media (max-width: 720px) {
  .kx-mkt__kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .kx-mkt__tiers {
    grid-template-columns: 1fr;
  }
  .kx-mkt__campaign {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* 캠페인 발송 결과 안내(수신동의자 한정 발송 후) */
.kx-mkt__send-msg {
  padding: 12px 16px;
  border-radius: 10px;
  background: var(--kx-success-bg, #ecfdf5);
  color: var(--kx-success-fg, #065f46);
  border: 1px solid var(--kx-success-border, #a7f3d0);
  font-size: var(--fs-body);
}
