/* static/css/meta-ads.css — 퍼포먼스 마케팅 · 메타 뷰(#metaAdsView) 전용 스타일. 이슈 #38 3단계-1.
   ads(메타 소재 라이브 자동화) 원본 성과 대시보드를 그리드 div 표로 그대로 복제(26컬럼·정렬·리사이즈·합계행·3탭).
   ads 원본은 인라인 스타일 위주지만, 여기선 전역 토큰(common.css --surface/--line/--text/--brand/--pos/--neg 등)에
   맞춰 클래스로 정리한다 — 값(200%/100% 임계값, 컬럼 순서, 정렬 로직)은 손대지 않고 겉면만 어드민 톤. */

#metaAdsView {
  --mad-total-bg: #F1F3F6;
  font-size: 14px;
}

/* ═══════ 페이지 헤드 ═══════ */
#metaAdsView .mad-pagehead { margin: 4px 0 18px; }
#metaAdsView .mad-pagehead h1 { font-size: 16px; font-weight: 700; color: var(--text); margin: 0 0 4px; letter-spacing: -.01em; }
#metaAdsView .mad-sub { font-size: 12.5px; color: var(--muted); }
/* 새 캠페인 만들기·보안 설정 버튼 — "기간 설정" 섹션 타이틀 줄 우측(.section-title-actions, #38).
   두 버튼 크기 동일(색만 다름): primary 스펙(padding 11px 14px·font 14px)에 ghost도 맞춘다. */
#metaAdsView .mad-newcamp-btn,
#metaAdsView .mad-security-btn { flex-shrink: 0; white-space: nowrap; width: auto; padding: 11px 14px; font-size: 14px; line-height: 1.2; }

/* ═══════ 기간 선택(폴백) ═══════ */
#metaAdsView .mad-date {
  height: 36px; padding: 0 11px; border: 1px solid var(--line-strong); border-radius: var(--radius-md, 12px);
  font-size: 13px; font-family: inherit; color: var(--text); background: var(--surface);
  font-variant-numeric: tabular-nums; transition: border-color .12s, box-shadow .12s;
}
#metaAdsView .mad-date:hover { border-color: var(--muted); }
#metaAdsView .mad-date:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(62, 77, 65, .14); }
#metaAdsView .mad-tilde { color: var(--muted); font-size: 13px; margin: 0 -2px; }
#metaAdsView .mad-gobtn { height: 36px; padding: 0 18px; font-weight: 600; }

/* Cally 범위 캘린더(기간 설정·비용관리와 동일 컴포넌트). 트리거·팝오버 룩은 common.css .cal-trigger/.cal-pop
   전역 스타일을 그대로 상속한다. 여기선 폴백 전환(네이티브 input ↔ 캘린더 트리거)만 스코프별로 정의.
   비용관리 .cost-native-only/.cost-cal(cost.css 86-89) 패턴 그대로. */
#metaAdsView .mad-cal { position: relative; display: inline-flex; min-width: 0; }
#metaAdsView .mad-native-only { display: none; }
.no-cally #metaAdsView .mad-native-only { display: inline-flex; }
.no-cally #metaAdsView .mad-cal { display: none; }

/* 프리셋 줄(퍼포먼스 채널과 동일 .period-presets/.preset-btn 그대로 재사용) + 캐시 비우기 */
#metaAdsView .mad-clear-cache-btn {
  background: var(--surface); color: var(--neg); border: 1px solid var(--neg-bg);
  border-radius: var(--radius-pill); padding: 7px 15px; font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background-color .12s, border-color .12s;
}
#metaAdsView .mad-clear-cache-btn:hover { background: var(--neg-bg); border-color: var(--neg); }

/* ═══════ 탭 ═══════ */
#metaAdsView .mad-tabbar { display: flex; align-items: center; border-bottom: 2px solid var(--line); margin-bottom: 0; }
#metaAdsView .mad-tab {
  padding: 10px 20px; border: none; background: none; font-size: 14px; font-weight: 600;
  color: var(--muted); border-bottom: 3px solid transparent; cursor: pointer; transition: color .15s, border-color .15s;
}
#metaAdsView .mad-tab.is-active { color: var(--brand); border-bottom-color: var(--brand); }
#metaAdsView .mad-tab:hover:not(.is-active) { color: var(--text-2); }
#metaAdsView .mad-badge {
  display: none; align-items: center; padding: 4px 10px; background: var(--sage-tint); border-radius: var(--radius-pill);
  font-size: 12.5px; font-weight: 600; color: var(--brand-ink); margin-left: 12px;
}

/* ═══════ 카드 + 그리드 표 — 우리 표준 데일리 표(#gridDaily/.grid-daily) 비주얼 언어 이식 ═══════
   구조는 그대로: 세로=캠페인(행) / 가로=26지표(열), CSS 그리드 div. daily-table.css·common.css
   .grid 규칙(회색 헤더·sticky·첫열 고정·우측정렬 tabular·가로 구분선·zebra·합계 볼드)의 색·보더·
   폰트를 그대로 이식한다. 값·정렬·리사이즈·드릴다운·컬럼은 불변. */
#metaAdsView .mad-card { background: var(--surface); border-radius: var(--radius, 18px); box-shadow: var(--shadow-card); overflow: hidden; margin-top: 14px; }
#metaAdsView .mad-table-scroll { overflow-x: auto; }
/* 가로 스크롤바 얇게 — common.css .table-scroll(1330-1344)과 동일 스타일 그대로(#38). */
#metaAdsView .mad-table-scroll { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
#metaAdsView .mad-table-scroll::-webkit-scrollbar { width: 10px; height: 10px; }
#metaAdsView .mad-table-scroll::-webkit-scrollbar-track { background: transparent; }
#metaAdsView .mad-table-scroll::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
#metaAdsView .mad-table-scroll::-webkit-scrollbar-thumb:hover { background: var(--sage); }
#metaAdsView .mad-table-scroll::-webkit-scrollbar-corner { background: transparent; }
#metaAdsView .mad-grid-wrap { min-width: max-content; font-size: 12px; }

/* 행 배경(zebra/선택/합계)을 --row-bg 한 곳에 담아, 스크롤에 안 밀리는 sticky 첫 열 셀도 같은 값을
   불투명 배경으로 상속받게 한다(데일리 zebra가 sticky 항목열에도 동일 적용되는 것과 같은 방식). */
#metaAdsView .mad-grid-row { display: grid; gap: 0; align-items: stretch; --row-bg: #FFFFFF; background: var(--row-bg); }
#metaAdsView .mad-grid-row:not(.mad-grid-header):not(.mad-grid-total) { border-bottom: 1px solid var(--line); }
#metaAdsView .mad-grid-row:nth-child(odd):not(.mad-grid-header):not(.mad-grid-total) { --row-bg: #FAFBFC; }
/* 선택 행 — zebra(:nth-child+:not = 특정도 0,4,0)를 이기도록 동급 특정도 + 뒤 순서로 명시. */
#metaAdsView .mad-grid-row.is-selected:not(.mad-grid-header):not(.mad-grid-total) { --row-bg: var(--sage-tint-3); }
#metaAdsView .mad-grid-row.is-selected:hover:not(.mad-grid-header):not(.mad-grid-total) { --row-bg: var(--sage-tint); }

/* 셀 공통 — 데일리 th/td(padding 8px 12px, nowrap, 12px) */
#metaAdsView .mad-gc { padding: 8px 12px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; position: relative; }
#metaAdsView .mad-gc-head { font-size: 11px; font-weight: 700; color: var(--charcoal); letter-spacing: 0; }
#metaAdsView .mad-gc-num { text-align: right; color: var(--text-2); font-variant-numeric: tabular-nums; }
#metaAdsView .mad-gc-chk { display: flex; align-items: center; justify-content: center; padding: 8px 6px; }
#metaAdsView .mad-gc-actions { display: flex; align-items: center; gap: 6px; padding: 6px 8px; overflow: visible; white-space: nowrap; }

/* 헤더 행 — 데일리 thead(회색 --thead-bg 불투명, 11px/700 --charcoal, sticky top) */
#metaAdsView .mad-grid-row.mad-grid-header { position: sticky; top: 0; z-index: 20; --row-bg: var(--thead-bg); }
#metaAdsView .mad-grid-header .mad-gc { background: var(--thead-bg); border-bottom: 1px solid var(--line-strong); }

/* 첫 열(체크박스+캠페인명) sticky left — 데일리 항목열(th.dlabel/corner)과 동일하게 고정+우측 구분선+그림자.
   sticky 셀은 스크롤되는 지표 셀 위를 덮으므로 반드시 불투명 배경(--row-bg)을 가진다. */
#metaAdsView .mad-gc-name { text-align: left; font-weight: 600; color: var(--text); position: sticky; left: 0; z-index: 5; background: var(--row-bg); border-right: 1px solid var(--line-strong); box-shadow: 6px 0 8px -4px rgba(16, 24, 40, .10); }
#metaAdsView .mad-gc-chk { position: sticky; left: 0; z-index: 6; background: var(--row-bg); }
#metaAdsView .mad-gc-chk + .mad-gc-name { left: 40px; }
#metaAdsView .mad-grid-header .mad-gc-name { color: var(--charcoal); font-weight: 700; z-index: 25; }
#metaAdsView .mad-grid-header .mad-gc-chk { z-index: 26; }

/* ROAS 컬럼 강조 — 데일리 ROAS행(볼드) 톤. 임계값 색(hi/lo)은 아래 규칙이 덮는다. */
#metaAdsView .mad-gc.mad-col-roas { font-weight: 700; color: var(--text); }
#metaAdsView .mad-grid-header .mad-gc.mad-col-roas { color: var(--charcoal); }

/* 정렬 헤더 */
#metaAdsView .mad-sortable { cursor: pointer; user-select: none; }
#metaAdsView .mad-sortable:hover { color: var(--text-2); }
#metaAdsView .mad-sortable.is-active { color: var(--brand); }

/* 컬럼 드래그 리사이즈 핸들 — ads .perf-col-resizer 그대로(위치/두께), 색만 토큰화 */
#metaAdsView .mad-resizer {
  position: absolute; right: 0; top: 20%; width: 1px; height: 60%; cursor: col-resize; user-select: none;
  background: rgba(16, 24, 40, .14); transition: background-color .15s;
}
#metaAdsView .mad-resizer:hover, #metaAdsView .mad-resizer.is-resizing { background: var(--brand); width: 2px; }

/* 0/빈값 표기 */
#metaAdsView .mad-dash, #metaAdsView .mad-zero { color: var(--muted); }

/* ROAS 임계값 강조 — 200%↑ 녹색(--pos) / 100%↓ 빨강(--neg), 그 사이는 기본색 */
#metaAdsView .mad-roas-hi { color: var(--pos); font-weight: 700; }
#metaAdsView .mad-roas-lo { color: var(--neg); }

/* 합계 행 — 데일리 d-subtotal(볼드 + 굵은 상단 구분선) 톤. --row-bg로 sticky 첫 열까지 같은 면색.
   상단 구분선은 셀마다(d-subtotal > * 와 동일) — sticky 셀도 함께 고정돼 어긋나지 않는다. */
#metaAdsView .mad-grid-row.mad-grid-total { --row-bg: var(--surface-2); }
#metaAdsView .mad-grid-total .mad-gc { border-top: 2px solid var(--line-strong); }
#metaAdsView .mad-grid-total .mad-gc-name { font-weight: 700; color: var(--text); }
#metaAdsView .mad-grid-total .mad-gc-num { font-weight: 700; color: var(--text); }

/* 행 액션 버튼(복제/소재 추가) — 다음 단계 연결 전까지는 자리만(스텁) */
#metaAdsView .mad-action-btn {
  font-size: 12px; padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm, 8px);
  cursor: pointer; background: var(--surface); color: var(--text-2); transition: border-color .12s, color .12s, background-color .12s;
}
#metaAdsView .mad-action-btn:hover { border-color: var(--brand); color: var(--brand); }
#metaAdsView .mad-action-btn--accent { border-color: var(--sage); background: var(--sage-tint); color: var(--brand-ink); }
#metaAdsView .mad-action-btn--accent:hover { background: var(--sage-tint-2); border-color: var(--brand); }

/* ═══════ 광고세트/광고 탭 — 캠페인 미선택 빈 상태 ═══════ */
#metaAdsView .mad-empty-select { text-align: center; padding: 48px 24px; color: var(--muted); }
#metaAdsView .mad-empty-select-ico { font-size: 32px; margin-bottom: 12px; }
#metaAdsView .mad-empty-select-title { font-size: 15px; font-weight: 700; color: var(--text-2); margin-bottom: 8px; }
#metaAdsView .mad-empty-select-desc { font-size: 13px; margin-bottom: 16px; }

/* ═══════ 로딩/빈 상태 ═══════ */
#metaAdsView .mad-loading,
#metaAdsView .mad-empty {
  text-align: center; color: var(--muted); padding: 28px 0; white-space: normal;
}

/* ═══════ 반응형 ═══════ */
@media (max-width: 640px) {
  #metaAdsView .mad-pagehead { margin: 2px 0 12px; }
  #metaAdsView .mad-pagehead h1 { font-size: 15px; }
  #metaAdsView .mad-tabbar { overflow-x: auto; }
}

@media (prefers-reduced-motion: reduce) {
  #metaAdsView .mad-grid-row,
  #metaAdsView .mad-date,
  #metaAdsView .mad-gobtn,
  #metaAdsView .mad-resizer,
  #metaAdsView .mad-action-btn { transition: none; }
}