/* ============================================================
   RA Design System — Components
   원칙: 시맨틱 토큰(tokens.css)만 참조. 페이지는 이 클래스를 조합해서 만들고
   페이지 전용 CSS 는 레이아웃(배치)만 담당한다. 갤러리: /design
   ============================================================ */

/* ---------- 버튼 ---------- */
.ra-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font-family: var(--ra-font-sans); font-size: var(--ra-text-md); font-weight: 600;
  padding: 8px 16px; border-radius: var(--ra-radius-sm); cursor: pointer;
  border: 1px solid transparent; line-height: 1.2; white-space: nowrap;
  transition: background var(--ra-dur) var(--ra-ease), border-color var(--ra-dur) var(--ra-ease);
  text-decoration: none;
}
.ra-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.ra-btn--primary { background: var(--ra-bg-brand); color: var(--ra-fg-oninverse); }
.ra-btn--primary:hover:not(:disabled) { background: var(--ra-bg-brand-hover); }
.ra-btn--neutral { background: var(--ra-bg-layer); color: var(--ra-fg-base); border-color: var(--ra-stroke-strong); }
.ra-btn--neutral:hover:not(:disabled) { background: var(--ra-bg-hover); }
.ra-btn--ghost { background: transparent; color: var(--ra-fg-brand); }
.ra-btn--ghost:hover:not(:disabled) { background: var(--ra-bg-brand-weak); }
.ra-btn--danger { background: transparent; color: var(--ra-fg-danger); }
.ra-btn--danger:hover:not(:disabled) { background: var(--ra-bg-danger-weak); }
.ra-btn--sm { font-size: var(--ra-text-sm); padding: 5px 11px; }
.ra-btn--lg { font-size: var(--ra-text-lg); padding: 11px 22px; }

/* ---------- 뱃지 (상태 표시) ---------- */
.ra-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 9px; border-radius: var(--ra-radius-full);
  font-size: var(--ra-text-xs); font-weight: 600; white-space: nowrap;
}
.ra-badge--neutral { background: var(--ra-bg-layer-alt); color: var(--ra-fg-muted); }
.ra-badge--info    { background: var(--ra-bg-info-weak); color: var(--ra-fg-brand); }
.ra-badge--success { background: var(--ra-bg-success-weak); color: var(--ra-fg-success); }
.ra-badge--warning { background: var(--ra-bg-warning-weak); color: var(--ra-fg-warning); }
.ra-badge--danger  { background: var(--ra-bg-danger-weak); color: var(--ra-fg-danger); }
.ra-badge--purple  { background: var(--ra-purple-100); color: var(--ra-purple-600); }

/* ---------- 카드 ---------- */
.ra-card {
  background: var(--ra-bg-layer); border-radius: var(--ra-radius-md);
  box-shadow: var(--ra-shadow-1); padding: var(--ra-sp-5) var(--ra-sp-5);
}
.ra-card--flat { box-shadow: none; border: 1px solid var(--ra-stroke-base); }
.ra-card__title { font-size: var(--ra-text-xl); font-weight: 700; color: var(--ra-fg-strong); margin: 0 0 var(--ra-sp-2); }

/* ---------- 입력 ---------- */
.ra-input, .ra-select, .ra-textarea {
  font-family: var(--ra-font-sans); font-size: var(--ra-text-md); color: var(--ra-fg-base);
  background: var(--ra-bg-layer); border: 1px solid var(--ra-stroke-strong);
  border-radius: var(--ra-radius-sm); padding: 8px 12px; width: 100%;
  transition: border-color var(--ra-dur) var(--ra-ease), box-shadow var(--ra-dur) var(--ra-ease);
}
.ra-input::placeholder, .ra-textarea::placeholder { color: var(--ra-fg-subtle); }
.ra-input:focus, .ra-select:focus, .ra-textarea:focus {
  outline: none; border-color: var(--ra-stroke-brand);
  box-shadow: 0 0 0 3px var(--ra-bg-brand-weak);
}
.ra-textarea { resize: vertical; min-height: 80px; line-height: var(--ra-leading); }
.ra-select { width: auto; }
.ra-field { display: flex; flex-direction: column; gap: var(--ra-sp-1); }
.ra-field > label { font-size: var(--ra-text-sm); color: var(--ra-fg-muted); font-weight: 600; }
.ra-hint { font-size: var(--ra-text-xs); color: var(--ra-fg-subtle); }

/* ---------- 배너 (안내/경고) ---------- */
.ra-banner {
  border-radius: var(--ra-radius-md); padding: var(--ra-sp-3) var(--ra-sp-4);
  font-size: var(--ra-text-sm); line-height: var(--ra-leading); border: 1px solid;
}
.ra-banner--info    { background: var(--ra-bg-info-weak); border-color: var(--ra-blue-200); color: var(--ra-fg-brand); }
.ra-banner--success { background: var(--ra-bg-success-weak); border-color: var(--ra-green-100); color: var(--ra-fg-success); }
.ra-banner--warning { background: var(--ra-bg-warning-weak); border-color: #f0dfae; color: var(--ra-fg-warning); }
.ra-banner--danger  { background: var(--ra-bg-danger-weak); border-color: #f4c7c0; color: var(--ra-fg-danger); }

/* ---------- 목록 행 (게시판형) ---------- */
.ra-listrow {
  display: flex; gap: var(--ra-sp-3); align-items: center;
  padding: 13px var(--ra-sp-5); border-bottom: 1px solid var(--ra-gray-100);
  text-decoration: none; color: inherit; transition: background var(--ra-dur) var(--ra-ease);
}
.ra-listrow:hover { background: var(--ra-bg-brand-weak); }
.ra-listrow:last-child { border-bottom: none; }

/* ---------- 테이블 ---------- */
.ra-table { border-collapse: collapse; width: 100%; font-size: var(--ra-text-md); }
.ra-table th {
  text-align: left; font-size: var(--ra-text-sm); color: var(--ra-fg-muted);
  padding: 8px 10px; border-bottom: 1px solid var(--ra-stroke-base); font-weight: 600;
}
.ra-table td { padding: 9px 10px; border-bottom: 1px solid var(--ra-gray-100); color: var(--ra-fg-base); }
.ra-table tr:hover td { background: var(--ra-bg-hover); }

/* ---------- 페이저 ---------- */
.ra-pager { display: flex; gap: 6px; justify-content: center; align-items: center; }
.ra-pager a, .ra-pager .cur {
  padding: 5px 11px; border-radius: var(--ra-radius-sm); font-size: var(--ra-text-sm);
  text-decoration: none; color: var(--ra-fg-brand);
}
.ra-pager a:hover { background: var(--ra-bg-brand-weak); }
.ra-pager .cur { background: var(--ra-bg-brand); color: var(--ra-fg-oninverse); font-weight: 600; }

/* ---------- 기타 ---------- */
.ra-divider { border: none; border-top: 1px solid var(--ra-stroke-base); margin: var(--ra-sp-4) 0; }
.ra-empty { text-align: center; padding: var(--ra-sp-8); color: var(--ra-fg-subtle); font-size: var(--ra-text-md); }
.ra-kv { display: flex; gap: var(--ra-sp-2); font-size: var(--ra-text-sm); }
.ra-kv > dt { color: var(--ra-fg-muted); min-width: 90px; }
.ra-kv > dd { color: var(--ra-fg-base); margin: 0; }

/* ============================================================
   확장 세트 (26-08-21) — 실화면 반복 패턴 전수 승격.
   대응 원본: pill(68회)/num·kpi·mega(90+회)/fld(24회)/imgtab/매장필터 칩/
   meta_ads 스텝·하단 액션바/recrop 모달/fb-panel 드로어 등
   ============================================================ */

/* ---------- 필 (pill — 뱃지보다 큰 라운드 라벨, 카운트·필터 표기) ---------- */
.ra-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 12px; border-radius: var(--ra-radius-full);
  font-size: var(--ra-text-sm); font-weight: 600; white-space: nowrap;
  background: var(--ra-bg-layer-alt); color: var(--ra-fg-muted);
  border: 1px solid transparent;
}
.ra-pill--info    { background: var(--ra-bg-info-weak); color: var(--ra-fg-brand); }
.ra-pill--success { background: var(--ra-bg-success-weak); color: var(--ra-fg-success); }
.ra-pill--warning { background: var(--ra-bg-warning-weak); color: var(--ra-fg-warning); }
.ra-pill--danger  { background: var(--ra-bg-danger-weak); color: var(--ra-fg-danger); }
.ra-pill--outline { background: var(--ra-bg-layer); border-color: var(--ra-stroke-strong); }

/* ---------- 상태 점 (dot — 표·목록에서 상태를 가장 작게) ---------- */
.ra-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; vertical-align: middle; }
.ra-dot--ok   { background: var(--ra-bg-success); }
.ra-dot--warn { background: var(--ra-bg-warning); }
.ra-dot--bad  { background: var(--ra-bg-danger); }
.ra-dot--idle { background: var(--ra-gray-300); }

/* ---------- KPI 스탯 (num/num-big/mega/nv-kpi 계열 통합) ---------- */
.ra-stat { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ra-stat__label { font-size: var(--ra-text-xs); color: var(--ra-fg-muted); font-weight: 600; }
.ra-stat__value { font-size: 1.5rem; font-weight: 800; color: var(--ra-fg-strong);
  font-variant-numeric: tabular-nums; line-height: 1.15; }
.ra-stat__value--xl { font-size: 2rem; }
.ra-stat__unit { font-size: var(--ra-text-md); font-weight: 600; color: var(--ra-fg-muted); }
.ra-stat__delta { font-size: var(--ra-text-xs); font-weight: 700; }
.ra-stat__delta--up { color: var(--ra-fg-success); }
.ra-stat__delta--down { color: var(--ra-fg-danger); }
.ra-stat--inverse { }
.ra-stat--inverse .ra-stat__label, .ra-stat--inverse .ra-stat__unit { color: rgba(255,255,255,.75); }
.ra-stat--inverse .ra-stat__value { color: var(--ra-fg-oninverse); }
.ra-statgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--ra-sp-3); }

/* ---------- 스텝 인디케이터 (meta_ads ①②③ 흐름) ---------- */
.ra-steps { display: flex; gap: var(--ra-sp-2); align-items: center; flex-wrap: wrap; }
.ra-step { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px;
  border-radius: var(--ra-radius-full); border: 1px solid var(--ra-stroke-base);
  background: var(--ra-bg-layer); font-size: var(--ra-text-sm); font-weight: 600; color: var(--ra-fg-muted); }
.ra-step__n { display: inline-flex; align-items: center; justify-content: center;
  width: 17px; height: 17px; border-radius: 50%; background: var(--ra-bg-layer-alt);
  font-size: 0.68rem; font-weight: 800; }
.ra-step--active { border-color: var(--ra-stroke-brand); color: var(--ra-fg-brand); background: var(--ra-bg-brand-weak); }
.ra-step--active .ra-step__n { background: var(--ra-bg-brand); color: var(--ra-fg-oninverse); }
.ra-step--done { color: var(--ra-fg-success); }
.ra-step--done .ra-step__n { background: var(--ra-bg-success); color: var(--ra-fg-oninverse); }
.ra-steps__arrow { color: var(--ra-fg-subtle); font-size: var(--ra-text-sm); }

/* ---------- 탭 (밑줄형) + 세그먼트 (기간 선택형) ---------- */
.ra-tabs { display: flex; gap: var(--ra-sp-4); border-bottom: 1px solid var(--ra-stroke-base); }
.ra-tab { padding: 9px 2px; font-size: var(--ra-text-md); font-weight: 600; color: var(--ra-fg-muted);
  border: none; background: none; cursor: pointer; border-bottom: 2px solid transparent;
  margin-bottom: -1px; text-decoration: none; }
.ra-tab:hover { color: var(--ra-fg-base); }
.ra-tab--active { color: var(--ra-fg-brand); border-bottom-color: var(--ra-bg-brand); }
.ra-segment { display: inline-flex; border: 1px solid var(--ra-stroke-strong);
  border-radius: var(--ra-radius-sm); overflow: hidden; }
.ra-segment > button, .ra-segment > a { padding: 6px 14px; font-size: var(--ra-text-sm); font-weight: 600;
  border: none; background: var(--ra-bg-layer); color: var(--ra-fg-muted); cursor: pointer;
  border-right: 1px solid var(--ra-stroke-base); text-decoration: none; }
.ra-segment > :last-child { border-right: none; }
.ra-segment > .active { background: var(--ra-bg-brand); color: var(--ra-fg-oninverse); }

/* ---------- 선택 칩 (매장 필터형 — input 은 숨기고 label 스타일) ---------- */
.ra-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border: 1px solid var(--ra-stroke-strong); border-radius: var(--ra-radius-full);
  background: var(--ra-bg-layer); font-size: var(--ra-text-sm); cursor: pointer; user-select: none;
  transition: background var(--ra-dur) var(--ra-ease), border-color var(--ra-dur) var(--ra-ease); }
.ra-chip:hover { background: var(--ra-bg-hover); }
.ra-chip.on, .ra-chip:has(input:checked) {
  background: var(--ra-bg-brand-weak); border-color: var(--ra-stroke-brand); color: var(--ra-fg-brand); font-weight: 600; }
.ra-chip input { accent-color: var(--ra-bg-brand); margin: 0; }

/* ---------- 토글 스위치 ---------- */
.ra-switch { position: relative; display: inline-block; width: 38px; height: 22px; }
.ra-switch input { opacity: 0; width: 0; height: 0; }
.ra-switch__track { position: absolute; inset: 0; border-radius: var(--ra-radius-full);
  background: var(--ra-gray-300); transition: background var(--ra-dur) var(--ra-ease); cursor: pointer; }
.ra-switch__track::before { content: ''; position: absolute; left: 3px; top: 3px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--ra-bg-layer); box-shadow: var(--ra-shadow-1);
  transition: transform var(--ra-dur) var(--ra-ease); }
.ra-switch input:checked + .ra-switch__track { background: var(--ra-bg-brand); }
.ra-switch input:checked + .ra-switch__track::before { transform: translateX(16px); }

/* ---------- 진행 바 ---------- */
.ra-progress { height: 8px; border-radius: var(--ra-radius-full); background: var(--ra-bg-layer-alt); overflow: hidden; }
.ra-progress > div { height: 100%; border-radius: var(--ra-radius-full); background: var(--ra-bg-brand);
  transition: width .3s var(--ra-ease); }
.ra-progress--success > div { background: var(--ra-bg-success); }
.ra-progress--danger > div { background: var(--ra-bg-danger); }

/* ---------- 모달 + 드로어 ---------- */
.ra-overlay { position: fixed; inset: 0; background: rgba(21,27,35,.4); z-index: 700; display: none; }
.ra-overlay.open { display: block; }
.ra-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  background: var(--ra-bg-layer); border-radius: var(--ra-radius-lg); box-shadow: var(--ra-shadow-3);
  z-index: 710; width: min(560px, 92vw); max-height: 86vh; display: none; flex-direction: column; }
.ra-modal.open { display: flex; }
.ra-modal__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--ra-sp-4) var(--ra-sp-5); border-bottom: 1px solid var(--ra-stroke-base);
  font-weight: 700; color: var(--ra-fg-strong); }
.ra-modal__body { padding: var(--ra-sp-4) var(--ra-sp-5); overflow-y: auto; }
.ra-modal__foot { display: flex; justify-content: flex-end; gap: var(--ra-sp-2);
  padding: var(--ra-sp-3) var(--ra-sp-5); border-top: 1px solid var(--ra-stroke-base); }
.ra-modal__x { border: none; background: none; font-size: 1.2rem; color: var(--ra-fg-subtle); cursor: pointer; }
.ra-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: 400px; max-width: 92vw;
  background: var(--ra-bg-layer); z-index: 710; box-shadow: var(--ra-shadow-3);
  transform: translateX(110%); transition: transform .25s var(--ra-ease); display: flex; flex-direction: column; }
.ra-drawer.open { transform: translateX(0); }

/* ---------- 하단 고정 액션바 (meta_ads 등록바형) ---------- */
.ra-actionbar { position: sticky; bottom: 12px; z-index: 500;
  display: flex; align-items: center; gap: var(--ra-sp-3);
  background: var(--ra-gray-800); color: var(--ra-fg-oninverse);
  border-radius: var(--ra-radius-lg); padding: var(--ra-sp-3) var(--ra-sp-5); box-shadow: var(--ra-shadow-3); }
.ra-actionbar .spacer { flex: 1; }

/* ---------- 스피너 + 스켈레톤 ---------- */
.ra-spinner { display: inline-block; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--ra-stroke-base); border-top-color: var(--ra-bg-brand);
  animation: ra-spin .7s linear infinite; vertical-align: middle; }
@keyframes ra-spin { to { transform: rotate(360deg); } }
.ra-skeleton { border-radius: var(--ra-radius-sm); background:
  linear-gradient(90deg, var(--ra-bg-layer-alt) 25%, var(--ra-gray-100) 50%, var(--ra-bg-layer-alt) 75%);
  background-size: 200% 100%; animation: ra-shimmer 1.3s infinite; color: transparent; }
@keyframes ra-shimmer { to { background-position: -200% 0; } }

/* ---------- 툴바 · 섹션 헤더 · 링크 · 코드 ---------- */
.ra-toolbar { display: flex; gap: var(--ra-sp-2); align-items: center; flex-wrap: wrap; }
.ra-section { display: flex; align-items: baseline; gap: var(--ra-sp-2); margin: var(--ra-sp-6) 0 var(--ra-sp-3); }
.ra-section > h2 { font-size: var(--ra-text-xl); font-weight: 700; color: var(--ra-fg-strong); margin: 0; }
.ra-section > .sub { font-size: var(--ra-text-sm); color: var(--ra-fg-muted); }
.ra-link { color: var(--ra-fg-brand); text-decoration: none; }
.ra-link:hover { text-decoration: underline; }
.ra-code { font-family: var(--ra-font-mono); font-size: 0.78rem; background: var(--ra-bg-layer-alt);
  padding: 1px 6px; border-radius: 4px; color: var(--ra-fg-base); }
.ra-iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px;
  border: 1px solid var(--ra-stroke-strong); border-radius: var(--ra-radius-sm); background: var(--ra-bg-layer);
  cursor: pointer; color: var(--ra-fg-muted); }
.ra-iconbtn:hover { background: var(--ra-bg-hover); color: var(--ra-fg-base); }
.ra-iconbtn svg { width: 16px; height: 16px; }

/* ---------- 알럿 콜아웃 (제목 있는 배너) ---------- */
.ra-alert { display: flex; gap: var(--ra-sp-3); border-radius: var(--ra-radius-md);
  padding: var(--ra-sp-4) var(--ra-sp-4); border: 1px solid; font-size: var(--ra-text-sm); line-height: var(--ra-leading); }
.ra-alert__icon { font-size: 1.1rem; line-height: 1.3; }
.ra-alert__title { font-weight: 700; margin-bottom: 2px; }
.ra-alert--info    { background: var(--ra-bg-info-weak); border-color: var(--ra-blue-200); }
.ra-alert--info .ra-alert__title { color: var(--ra-fg-brand); }
.ra-alert--warning { background: var(--ra-bg-warning-weak); border-color: #f0dfae; }
.ra-alert--warning .ra-alert__title { color: var(--ra-fg-warning); }
.ra-alert--danger  { background: var(--ra-bg-danger-weak); border-color: #f4c7c0; }
.ra-alert--danger .ra-alert__title { color: var(--ra-fg-danger); }
.ra-alert--success { background: var(--ra-bg-success-weak); border-color: var(--ra-green-100); }
.ra-alert--success .ra-alert__title { color: var(--ra-fg-success); }

/* ---------- 폼 그리드 (fld/dgrid 계열 통합) ---------- */
.ra-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--ra-sp-3); }
.ra-formgrid .full { grid-column: 1 / -1; }

/* ---------- 테이블 변형 ---------- */
.ra-table--compact th, .ra-table--compact td { padding: 5px 8px; font-size: var(--ra-text-sm); }
.ra-table--striped tbody tr:nth-child(even) td { background: var(--ra-gray-50); }
.ra-tablewrap { overflow-x: auto; max-width: 100%; }

/* ---------- 토스트 ---------- */
.ra-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%);
  background: var(--ra-gray-800); color: var(--ra-fg-oninverse); border-radius: var(--ra-radius-md);
  padding: 10px 18px; font-size: var(--ra-text-sm); box-shadow: var(--ra-shadow-3); z-index: 800;
  opacity: 0; pointer-events: none; transition: opacity .2s var(--ra-ease); }
.ra-toast.show { opacity: 1; }

/* ---------- 버튼 solid 상태 변형 (레거시 btn-danger/btn-success 대응) ---------- */
.ra-btn--danger-solid { background: var(--ra-bg-danger); color: var(--ra-fg-oninverse); }
.ra-btn--danger-solid:hover:not(:disabled) { background: var(--ra-red-700); }
.ra-btn--success { background: var(--ra-bg-success); color: var(--ra-fg-oninverse); }
.ra-btn--success:hover:not(:disabled) { background: var(--ra-green-700); }