/*
 * 광고주센터 공용 컴포넌트 — Figma 디자인 시스템(AYoFVOT05AVWSQKaMNhHRE · Component 페이지) 기준
 *
 * 값 출처(2026-10-22 실측)
 *   버튼   559:2701  높이 xxs36 / xs38 / s40 / m48 / l56, 라운드 8, 좌우 12, 간격 8
 *   칩     559:2619  rounded 999 · square 8, 높이 s34 / m38 / l40
 *   배지   42:714    높이 24, 라운드 4, 좌우 8, caption-m
 *   태그   593:2555  color 라운드 4 · normal/text 999
 * 색·간격·타이포는 global-style.css 토큰만 쓴다 — raw 값은 Figma에 토큰이 없는 것만.
 * 카드(.ds-card)는 Figma에 기준이 없어 가드닝 합의값: 라운드 16 · subtle 보더 한 겹 · 그림자 없음.
 * fill-dark 는 Figma surface/inverse(#4e5668)와 코드 토큰(neutral-800)이 달라 코드 토큰을 따른다.
 */

/* ───────── 버튼 ───────── */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  height: 40px;
  padding: 0 var(--spacing-12);
  border: 0;
  border-radius: var(--radius-8);
  background: var(--color-surface-brand);
  font: var(--font-body-s-medium);
  color: var(--color-content-inverse);
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.ds-btn svg {
  width: 16px;
  height: 16px;
  flex: none;
}
.ds-btn:focus-visible {
  outline: 2px solid var(--color-border-focus);
  outline-offset: 2px;
}
.ds-btn:disabled,
.ds-btn.is-disabled {
  background: var(--color-surface-subtle);
  border-color: var(--color-border-disabled);
  color: var(--color-content-disabled);
  cursor: default;
  pointer-events: none;
}

/* 크기 */
.ds-btn--xxs { height: 36px; gap: var(--spacing-4); font: var(--font-caption-m); }
.ds-btn--xs  { height: 38px; }
.ds-btn--s   { height: 40px; }
.ds-btn--m   { height: 48px; font: var(--font-body-m-medium); }
.ds-btn--l   { height: 56px; font: var(--font-body-m-medium); }
.ds-btn--xs svg { width: 14px; height: 14px; }
.ds-btn--xxs svg { width: 12px; height: 12px; }
.ds-btn--l svg { width: 20px; height: 20px; }
.ds-btn--block { display: flex; width: 100%; }

/* 변형 — hover 는 Figma 대로 검정 20% 덮기(overlay/hover) */
.ds-btn--fill-brand { background: var(--color-surface-brand); color: var(--color-content-inverse); }
.ds-btn--fill-brand:hover { box-shadow: inset 0 0 0 999px var(--color-overlay-hover); }

.ds-btn--fill-dark { background: var(--color-surface-inverse); color: var(--color-content-inverse); }
.ds-btn--fill-dark:hover { box-shadow: inset 0 0 0 999px var(--color-overlay-hover); }

.ds-btn--fill-weak { background: var(--color-surface-brand-subtle); color: var(--color-content-brand); }
.ds-btn--fill-weak:hover { background: var(--color-surface-brand-muted); }

.ds-btn--fill-error { background: var(--color-status-error-default); color: var(--color-content-inverse); }
.ds-btn--fill-error:hover { box-shadow: inset 0 0 0 999px var(--color-overlay-hover); }

.ds-btn--stroke { background: var(--color-surface-default); border: 1px solid var(--color-border-default); color: var(--color-content-default); }
.ds-btn--stroke:hover { background: var(--color-surface-wash); }

.ds-btn--stroke-brand { background: transparent; border: 1px solid var(--color-border-brand); color: var(--color-content-brand); }
.ds-btn--stroke-brand:hover { background: var(--color-surface-brand-subtle); }

.ds-btn--stroke-error { background: transparent; border: 1px solid var(--color-border-error); color: var(--color-status-error-content); }
.ds-btn--stroke-error:hover { background: var(--color-status-error-subtle); }

.ds-btn--gradient { background: var(--gradient-cta-accent-magenta); color: var(--color-content-inverse); }
.ds-btn--gradient:hover { box-shadow: inset 0 0 0 999px var(--color-overlay-hover); }
.ds-btn--gradient-blue { background: var(--gradient-cta-accent-blue); color: var(--color-content-inverse); }
.ds-btn--gradient-blue:hover { box-shadow: inset 0 0 0 999px var(--color-overlay-hover); }

.ds-btn--text { background: transparent; color: var(--color-content-subtle); }
.ds-btn--text:hover { background: var(--color-surface-wash); color: var(--color-content-default); }
.ds-btn--text-brand { background: transparent; color: var(--color-content-brand); }
.ds-btn--text-brand:hover { background: var(--color-surface-brand-subtle); }

/* 아이콘 전용 — 원형, s 40 / xs 32 */
.ds-btn--icon { padding: 0; width: 40px; height: 40px; border-radius: var(--radius-full); background: transparent; color: var(--color-content-default); }
.ds-btn--icon svg { width: 20px; height: 20px; }
.ds-btn--icon.ds-btn--xs { width: 32px; height: 32px; }
.ds-btn--icon.ds-btn--xs svg { width: 16px; height: 16px; }
.ds-btn--icon:hover { background: var(--color-surface-subtle); }
.ds-btn--icon.ds-btn--stroke { background: var(--color-surface-default); border: 1px solid var(--color-border-default); }
.ds-btn--icon.ds-btn--fill-brand { background: var(--color-surface-brand); color: var(--color-content-inverse); }

/* ───────── 칩(필터·선택) ───────── */
.ds-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 34px;
  padding: 0 var(--spacing-12);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-full);
  background: var(--color-surface-default);
  font: var(--font-body-s-medium);
  color: var(--color-content-default);
  white-space: nowrap;
  cursor: pointer;
}
.ds-chip--m { height: 38px; padding: 0 var(--spacing-16); font: var(--font-body-m-medium); }
.ds-chip--l { height: 40px; padding: 0 var(--spacing-16); font: var(--font-body-l-medium); }
.ds-chip--square { border-radius: var(--radius-8); }
.ds-chip--solid { border-color: transparent; background: var(--color-surface-subtle); }
.ds-chip.is-active { border-color: var(--color-border-focus); background: var(--color-surface-brand-subtle); color: var(--color-content-brand); }
.ds-chip--solid.is-active { border-color: transparent; background: var(--color-surface-brand); color: var(--color-content-inverse); }
.ds-chip--solid-weak.is-active { border-color: transparent; background: var(--color-surface-brand-muted); color: var(--color-content-brand); }
.ds-chip:disabled,
.ds-chip.is-disabled { background: var(--color-surface-subtle); color: var(--color-content-disabled); cursor: default; pointer-events: none; }

/* ───────── 상태 배지(카드·목록용, 클릭 없음) ───────── */
.ds-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 var(--spacing-8);
  border-radius: var(--radius-4);
  background: var(--color-surface-default);
  border: 1px solid var(--color-border-subtle);
  font: var(--font-caption-m);
  color: var(--color-content-muted);
  white-space: nowrap;
}
.ds-badge--brand   { border-color: transparent; background: var(--color-surface-brand-subtle); color: var(--color-content-brand); }
.ds-badge--accent  { border-color: transparent; background: var(--color-accent-subtle); color: var(--color-accent-default); }
.ds-badge--neutral { border-color: transparent; background: var(--color-surface-muted); color: var(--color-content-subtle); }
.ds-badge--success { border-color: transparent; background: var(--color-status-success-subtle); color: var(--color-status-success-content); }
.ds-badge--error   { border-color: transparent; background: var(--color-status-error-subtle); color: var(--color-status-error-content); }
.ds-badge--caution { border-color: transparent; background: var(--color-status-caution-subtle); color: var(--color-status-caution-content); }
.ds-badge--m { height: 30px; font: var(--font-body-s-medium); }
.ds-badge--rounded { border-radius: var(--radius-full); }

/* ───────── 태그(값 선택·삭제 가능) ───────── */
.ds-tag {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-4);
  padding-left: var(--spacing-8);
  border-radius: var(--radius-4);
  background: var(--color-surface-brand-subtle);
  font: var(--font-caption-m);
  color: var(--color-content-brand);
  white-space: nowrap;
}
.ds-tag--m { font: var(--font-body-s-medium); }
.ds-tag--l { font: var(--font-body-m-medium); }
.ds-tag--normal { border-radius: var(--radius-full); border: 1px solid var(--color-border-default); background: var(--color-surface-default); color: var(--color-content-subtle); }
.ds-tag--text { border-radius: var(--radius-full); background: transparent; color: var(--color-content-subtle); }
/* 삭제 버튼 — 글자보다 작게(10px), 호버 배경 없음. 터치 영역은 패딩으로 확보 */
.ds-tag__remove { display: inline-flex; padding: var(--spacing-4) var(--spacing-8) var(--spacing-4) var(--spacing-4); border: 0; background: transparent; color: inherit; cursor: pointer; }
.ds-tag__remove svg { width: 10px; height: 10px; }
.ds-tag--m .ds-tag__remove svg { width: 11px; height: 11px; }
.ds-tag--l .ds-tag__remove svg { width: 12px; height: 12px; }
.ds-tag__remove:hover svg { opacity: 0.7; }

/* ───────── 카드(컨테이너) ───────── */
.ds-card {
  display: flex;
  flex-direction: column;
  padding: var(--spacing-20);
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-16);
  background: var(--color-surface-default);
}
.ds-card--flat { border-color: transparent; background: var(--color-surface-subtle); }
.ds-card--brand { border-color: transparent; background: var(--color-surface-brand-subtle); }
.ds-card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-12); }
.ds-card__title { font: var(--font-body-m-semibold); color: var(--color-content-strong); }
.ds-card__body { display: flex; flex-direction: column; gap: var(--spacing-12); }

/* ═════════ 2026-10-27 추가 — 파트너스 작업에서 필요한 공용 요소 (Figma Component 페이지 규격, 없는 것은 가드닝 합의값) ═════════ */

/* ───────── 입력(Textinput) ───────── */
.ds-field { display: flex; flex-direction: column; gap: var(--spacing-8); }
.ds-field__label { font: var(--font-body-s-semibold); color: var(--color-content-subtle); }
.ds-field__label small { font: var(--font-caption-m); color: var(--color-content-muted); margin-left: var(--spacing-4); }
.ds-field__help { font: var(--font-caption-m); color: var(--color-content-subtle); }
.ds-field__error { font: var(--font-caption-m); color: var(--color-status-error-content); }
.ds-input {
  width: 100%;
  height: 48px;
  padding: 0 var(--spacing-16);
  border: 1px solid var(--color-border-default);
  border-radius: var(--radius-8);
  background: var(--color-surface-default);
  font: var(--font-body-m-regular);
  color: var(--color-content-strong);
  outline: 0;
  transition: border-color 0.15s ease;
}
.ds-input::placeholder { color: var(--color-content-faint); }
.ds-input:focus { border-color: var(--color-border-focus); }
.ds-input.is-error { border-color: var(--color-border-error); }
.ds-input:disabled { background: var(--color-surface-subtle); color: var(--color-content-disabled); }
.ds-input--mono { font-family: ui-monospace, Menlo, monospace; letter-spacing: 0.08em; }
.ds-input-row { display: flex; gap: var(--spacing-8); }
.ds-input-row .ds-input { flex: 1; min-width: 0; }
select.ds-input { appearance: none; padding-right: var(--spacing-40); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6'%3E%3Cpath d='M4.94782 5.50122C4.71995 5.76434 4.31177 5.76434 4.0839 5.50122L0.13875 0.94575C-0.181751 0.575668 0.0811372 0.000234645 0.57071 0.000234688L8.46101 0.000235378C8.95058 0.000235421 9.21347 0.57567 8.89297 0.945752L4.94782 5.50122Z' fill='%23333C4D'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--spacing-16) center; background-size: 10px 6px; }
/* 아무것도 고르지 않은 상태(첫 option value="")는 입력칸 placeholder 와 같은 색. 펼친 목록은 기본 색 */
select.ds-input:has(> option[value=""]:checked) { color: var(--color-content-faint); }
select.ds-input option { color: var(--color-content-default); }
.ds-textarea { min-height: 96px; padding: var(--spacing-12) var(--spacing-16); resize: vertical; }

/* ───────── 세그먼트 컨트롤 ───────── */
.ds-segment { display: flex; padding: var(--spacing-4); border-radius: var(--radius-8); background: var(--color-surface-subtle); }
.ds-segment__item {
  flex: 1;
  height: 40px;
  border: 0;
  border-radius: var(--radius-6);
  background: transparent;
  font: var(--font-body-s-medium);
  color: var(--color-content-subtle);
  cursor: pointer;
}
.ds-segment__item.is-active { background: var(--color-surface-default); color: var(--color-content-strong); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); }

/* ───────── 탭(밑줄) ───────── */
.ds-tabs { display: flex; border-bottom: 1px solid var(--color-border-subtle); }
.ds-tabs__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 44px;
  padding: 0 var(--spacing-16);
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  font: var(--font-body-s-medium);
  color: var(--color-content-subtle);
  text-decoration: none;
  white-space: nowrap;
}
.ds-tabs__item.is-active { color: var(--color-content-strong); border-bottom-color: var(--color-content-strong); font: var(--font-body-s-semibold); }
.ds-tabs--fill .ds-tabs__item { flex: 1; }

/* ───────── 표 ───────── */
.ds-table-wrap { width: 100%; overflow-x: auto; }
.ds-table { width: 100%; border-collapse: collapse; font: var(--font-body-s-medium); color: var(--color-content-default); }
.ds-table th {
  padding: var(--spacing-12) var(--spacing-12);
  text-align: left;
  font: var(--font-caption-m);
  color: var(--color-content-subtle);
  white-space: nowrap;
  border-bottom: 1px solid var(--color-border-subtle);
}
.ds-table td { padding: var(--spacing-12) var(--spacing-12); border-bottom: 1px solid var(--color-border-subtle); vertical-align: middle; }
.ds-table tr:last-child td { border-bottom: 0; }
.ds-table .is-num { text-align: right; font-variant-numeric: tabular-nums; }
.ds-table .is-muted { color: var(--color-content-muted); }
.ds-table tr.is-clickable { cursor: pointer; }
.ds-table tr.is-clickable:hover td { background: var(--color-surface-wash); }

/* ───────── 단계 표시(스텝) ───────── */
.ds-steps { display: flex; flex-direction: column; gap: var(--spacing-8); }
.ds-steps__bar { display: flex; gap: var(--spacing-4); }
.ds-steps__bar span { flex: 1; height: 4px; border-radius: var(--radius-full); background: var(--color-surface-muted); }
.ds-steps__bar span.is-done { background: var(--color-surface-brand); }
.ds-steps__label { font: var(--font-caption-m); color: var(--color-content-subtle); }

/* ───────── 빈 상태 ───────── */
.ds-empty { display: flex; flex-direction: column; align-items: center; gap: var(--spacing-8); padding: var(--spacing-40) var(--spacing-16); text-align: center; }
.ds-empty__title { font: var(--font-body-m-semibold); color: var(--color-content-strong); }
.ds-empty__desc { font: var(--font-body-s-regular); color: var(--color-content-subtle); }
.ds-empty .ds-btn { margin-top: var(--spacing-8); }

/* ───────── 정보 툴팁 (아이콘 16 · 터치 영역 40) ───────── */
.ds-tooltip { position: relative; display: inline-flex; align-items: center; }
.ds-tooltip__trigger { width: 40px; height: 40px; margin: -12px; display: inline-flex; align-items: center; justify-content: center; border: 0; background: transparent; color: var(--color-content-muted); cursor: pointer; }
.ds-tooltip__trigger svg { width: 16px; height: 16px; }
.ds-tooltip__panel {
  position: absolute;
  left: 0;
  top: calc(100% + var(--spacing-8));
  z-index: 20;
  width: 260px;
  padding: var(--spacing-12);
  border-radius: var(--radius-8);
  background: var(--color-surface-inverse);
  color: var(--color-content-inverse);
  font: var(--font-caption-m);
  line-height: 1.5;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
  /* 닫힘: 투명 + 4px 아래. 열리면 제자리로 떠오른다 (display 토글은 전환이 안 됨) */
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
}
.ds-tooltip.is-open .ds-tooltip__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
@media (hover: hover) { .ds-tooltip:hover .ds-tooltip__panel { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } }
@media (prefers-reduced-motion: reduce) { .ds-tooltip__panel { transition: none; } }

/* ───────── 성과 카드(KPI) ───────── */
.ds-stat { display: flex; flex-direction: column; gap: var(--spacing-4); padding: var(--spacing-16) var(--spacing-20); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-16); background: var(--color-surface-default); }
.ds-stat__label { font: var(--font-caption-m); color: var(--color-content-subtle); }
.ds-stat__value { font: var(--font-title-xs); color: var(--color-content-strong); }
.ds-stat__note { font: var(--font-caption-m); color: var(--color-content-muted); }