/* ================================================================
   RE:B — Design System
   Warm Intelligence Theme
   ================================================================ */

/* ── Tokens ─────────────────────────────────────────────────────── */
:root {
  /* Background */
  --bg:             #F8F8F6;
  --bg-elevated:    #FFFFFF;
  --bg-subtle:      #F2F2EF;
  --bg-overlay:     rgba(0, 0, 0, 0.35);

  /* Text */
  --text:           #1A1A1A;
  --text-secondary: #6B6B6B;
  --text-tertiary:  #A1A1A1;
  --text-inverse:   #FFFFFF;

  /* Primary — Indigo */
  --primary:        #6366F1;
  --primary-hover:  #4F46E5;
  --primary-light:  #EEF2FF;
  --primary-subtle: #E0E7FF;

  /* AI accent — Amber */
  --ai:             #D97706;
  --ai-light:       #FEF3C7;
  --ai-subtle:      #FFFBEB;
  --ai-border:      #FDE68A;

  /* Semantic */
  --success:        #059669;
  --success-light:  #D1FAE5;
  --error:          #DC2626;
  --error-light:    #FEE2E2;

  /* Border */
  --border:         #E5E5E0;
  --border-light:   #EDEDEB;
  --border-focus:   var(--primary);

  /* Radius */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-full: 9999px;

  /* Shadow */
  --shadow-xs:  0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm:  0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-md:  0 4px 12px rgba(0, 0, 0, 0.07);
  --shadow-lg:  0 8px 24px rgba(0, 0, 0, 0.09);
  --shadow-xl:  0 16px 48px rgba(0, 0, 0, 0.12);

  /* Transition */
  --ease:            cubic-bezier(0.16, 1, 0.3, 1);
  --transition-fast: 150ms var(--ease);
  --transition:      250ms var(--ease);
  --transition-slow: 400ms var(--ease);
}

/* ── Reset ──────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

html {
  overflow-y: scroll;
}

body {
  font-family: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont,
               'Segoe UI', Roboto, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  word-break: keep-all;
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* HTML `hidden` 속성은 user-agent style 의 [hidden]{display:none} 으로 동작하는데,
   우리 컴포넌트가 .reb-share-form-row{display:grid} 같이 display 를 명시하면
   specificity 가 더 높아서 hidden 이 무력화된다 (브라우저 표준 함정).
   여기서 한 번에 강제해서 _shareResetForm 의 .hidden=true 등이 항상 동작하도록. */
[hidden] { display: none !important; }
img { display: block; max-width: 100%; }

/* ── Layout ────────────────────────────────────────────────────── */
.reb-container {
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

.reb-container--narrow { max-width: 740px; }
.reb-container--wide   { max-width: 1200px; }
.reb-container--brief  { max-width: 1080px; }

/* ── Header ────────────────────────────────────────────────────── */
.reb-header {
  position: sticky;
  top: 0;
  z-index: 100;
  height: 56px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  background: rgba(248, 248, 246, 0.85);
  backdrop-filter: blur(20px) saturate(1.2);
  -webkit-backdrop-filter: blur(20px) saturate(1.2);
  border-bottom: 1px solid var(--border-light);
}

.reb-header-inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.reb-logo {
  display: flex;
  align-items: center;
  gap: 0;
  user-select: none;
  transition: opacity var(--transition-fast);
  text-decoration: none;
}

.reb-logo:hover { opacity: 0.7; }

.reb-logo-en {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.05em;
  color: var(--text);
  line-height: 1;
}

.reb-logo-colon { color: var(--primary); }

.reb-logo-divider {
  width: 1px;
  height: 18px;
  background: var(--border);
  margin: 0 10px;
  flex-shrink: 0;
}

.reb-logo-kr {
  font-family: 'Noto Serif KR', serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--text-secondary);
  line-height: 1;
}

.reb-nav { display: flex; align-items: center; gap: 8px; }

/* ── Hero (Brief Input) ─────────────────────────────────────────── */
.reb-hero {
  text-align: center;
  padding: 56px 0 36px;
}

.reb-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 16px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  font-size: 12px;
  font-weight: 680;
  letter-spacing: 0.04em;
  margin-bottom: 20px;
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.reb-hero-title {
  font-size: clamp(28px, 5vw, 40px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.03em;
  margin-bottom: 14px;
}

.reb-hero-accent {
  background: linear-gradient(135deg, var(--primary), #818CF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.reb-hero-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 420px;
  margin: 0 auto;
}

/* ── Card ──────────────────────────────────────────────────────── */
.reb-card {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-sm), 0 0 0 1px rgba(0,0,0,0.02);
}

/* ── Brief File Uploader ───────────────────────────────────────── */
.reb-brief-uploader {
  padding: 28px 32px 24px;
  margin: 0 auto 24px;
  max-width: 820px;
  background: linear-gradient(180deg, var(--bg-elevated, #fff) 0%, var(--bg, #fafaf7) 100%);
  border: 1px solid var(--border);
}

.reb-brief-uploader-head { margin-bottom: 18px; }

.reb-brief-uploader-headline {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.reb-brief-uploader-headline .reb-ai-sparkle {
  color: var(--primary);
  font-size: 18px;
}

.reb-brief-uploader-title {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text);
  margin: 0;
}

.reb-brief-uploader-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary, var(--text-tertiary));
  margin: 0;
}

.reb-brief-uploader-desc strong {
  color: var(--primary);
  font-weight: 650;
}

.reb-brief-dropzone {
  display: block;
  position: relative;
  border: 1.5px dashed var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  padding: 20px 24px;
  cursor: pointer;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.reb-brief-dropzone:hover {
  border-color: var(--primary);
  background: var(--bg-elevated);
}

.reb-brief-dropzone--dragover {
  border-color: var(--primary);
  background: var(--primary-light, #EEF2FF);
  box-shadow: 0 0 0 3px var(--primary-light, #EEF2FF);
}

.reb-brief-dropzone--busy { cursor: wait; }
.reb-brief-dropzone--busy .reb-brief-dropzone-inner { display: none; }

.reb-brief-dropzone--done { cursor: default; }
.reb-brief-dropzone--done .reb-brief-dropzone-inner { display: none; }

.reb-brief-dropzone-inner {
  display: flex;
  align-items: center;
  gap: 18px;
}

.reb-brief-dropzone-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: var(--primary-light, #EEF2FF);
  color: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reb-brief-dropzone-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.reb-brief-dropzone-title {
  font-size: 14.5px;
  font-weight: 620;
  color: var(--text);
}

.reb-brief-dropzone-hint {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.reb-brief-dropzone-btn { flex-shrink: 0; }

.reb-brief-dropzone-progress {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 6px 4px;
}

.reb-brief-dropzone-progress[hidden],
.reb-brief-dropzone-success[hidden] {
  display: none !important;
}

.reb-brief-progress-spinner {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.reb-brief-progress-spinner svg {
  width: 100%;
  height: 100%;
  animation: reb-brief-spin 1.4s linear infinite;
}

.reb-brief-progress-spinner circle {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 80, 200;
  stroke-dashoffset: 0;
  animation: reb-brief-dash 1.4s ease-in-out infinite;
}

@keyframes reb-brief-spin { to { transform: rotate(360deg); } }
@keyframes reb-brief-dash {
  0%   { stroke-dasharray: 1, 200;  stroke-dashoffset: 0; }
  50%  { stroke-dasharray: 80, 200; stroke-dashoffset: -25px; }
  100% { stroke-dasharray: 80, 200; stroke-dashoffset: -110px; }
}

.reb-brief-progress-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.reb-brief-progress-title {
  font-size: 14px;
  font-weight: 620;
  color: var(--text);
}

.reb-brief-progress-detail {
  font-size: 12.5px;
  color: var(--text-tertiary);
}

.reb-brief-dropzone-success {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 4px 4px;
}

.reb-brief-success-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--success-light, #DCFCE7);
  color: var(--success, #16A34A);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}

.reb-brief-success-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reb-brief-success-title {
  font-size: 14px;
  font-weight: 620;
  color: var(--text);
}

.reb-brief-success-detail {
  font-size: 12.5px;
  color: var(--text-tertiary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.reb-brief-success-reset {
  background: none;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  font-size: 12.5px;
  color: var(--text-secondary, var(--text-tertiary));
  cursor: pointer;
  transition: all 0.15s var(--ease);
  flex-shrink: 0;
}

.reb-brief-success-reset:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Form ──────────────────────────────────────────────────────── */
.reb-brief-form {
  padding: 36px 40px 40px;
  margin: 0 auto 80px;
  max-width: 820px;
}

.reb-brief-actions {
  display: grid;
  grid-template-columns: auto minmax(0, 0.5fr) minmax(0, 1fr);
  gap: 10px;
  align-items: stretch;
}

.reb-brief-actions .reb-btn-ai { width: 100%; }

/* AI 분석 버튼 — 모드별 시각 차이
   - analyze (기본): 보라 그라디언트 (current)
   - continue: 분석 결과로 넘어가기 — 보라 그대로지만 sparkle 제거된 깔끔한 형태
   - reanalyze: 변경 감지됨 — 살짝 호박색 톤으로 "재분석 필요" 시그널 */
.reb-btn-ai[data-mode="continue"] {
  background: linear-gradient(135deg, var(--ai), var(--ai-hover, var(--ai)));
}
.reb-btn-ai[data-mode="continue"] svg { transition: transform 0.18s ease; }
.reb-btn-ai[data-mode="continue"]:hover svg { transform: translateX(3px); }

.reb-btn-ai[data-mode="reanalyze"] {
  background: linear-gradient(135deg, #d97706, #b45309);
}
.reb-btn-ai[data-mode="reanalyze"]:hover {
  background: linear-gradient(135deg, #b45309, #92400e);
}

.reb-btn-reset {
  padding: 14px 16px;
  font-size: 13.5px;
  gap: 6px;
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-tertiary);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease);
}
.reb-btn-reset:hover:not(:disabled) {
  border-color: var(--border);
  color: var(--text-secondary);
  background: var(--bg-subtle);
}
.reb-btn-reset svg { opacity: 0.75; }

.reb-btn-draft {
  padding: 14px 18px;
  font-size: 14.5px;
  gap: 8px;
  white-space: nowrap;
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text-secondary);
  transition: border-color 0.18s var(--ease), color 0.18s var(--ease), background 0.18s var(--ease), transform 0.18s var(--ease);
}
.reb-btn-draft:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}
.reb-btn-draft:disabled {
  opacity: 0.65;
  cursor: progress;
}

.reb-brief-actions-hint {
  margin: 12px 4px 0;
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.55;
  text-align: right;
}

@media (max-width: 640px) {
  .reb-brief-actions {
    grid-template-columns: 1fr;
  }
  .reb-btn-reset {
    order: 3;
    padding: 10px 14px;
  }
  .reb-brief-actions-hint { text-align: left; }
}

.reb-form-group {
  margin-bottom: 24px;
  position: relative;
}

.reb-form-group:last-of-type { margin-bottom: 32px; }

.reb-form-label {
  display: block;
  font-size: 14px;
  font-weight: 620;
  color: var(--text);
  margin-bottom: 8px;
}

.reb-label-optional {
  font-size: 12px;
  font-weight: 450;
  color: var(--text-tertiary);
  margin-left: 6px;
}

.reb-input,
.reb-textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  font-size: 15px;
  font-family: inherit;
  color: var(--text);
  background: var(--bg);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
}

.reb-input:hover,
.reb-textarea:hover { border-color: #c5c5c0; background: var(--bg-elevated); }

.reb-input:focus,
.reb-textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--primary-light);
}

.reb-input::placeholder,
.reb-textarea::placeholder { color: var(--text-tertiary); }

.reb-textarea {
  resize: none;
  min-height: 130px;
  line-height: 1.7;
}

.reb-form-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.reb-form-row .reb-form-group { margin-bottom: 24px; }

.reb-char-count {
  display: block;
  text-align: right;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

.reb-form-group--error .reb-input,
.reb-form-group--error .reb-textarea {
  border-color: var(--error);
  box-shadow: 0 0 0 3px var(--error-light);
}

/* ── Deep Brief (extracted_brief) Card ─────────────────────────── */
.reb-deepbrief {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--bg);
  margin: -56px auto 80px;
  max-width: 820px;
  overflow: hidden;
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), box-shadow 0.2s var(--ease);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

.reb-deepbrief[hidden] { display: none !important; }

.reb-deepbrief[open] {
  border-color: var(--primary);
  background: var(--bg-elevated);
  box-shadow: 0 8px 24px -12px rgba(99, 102, 241, 0.18);
}

.reb-deepbrief-summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 28px;
  user-select: none;
}

.reb-deepbrief-summary::-webkit-details-marker { display: none; }
.reb-deepbrief-summary::marker { display: none; }

.reb-deepbrief-summary-main {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  min-width: 0;
}

.reb-deepbrief-summary-icon {
  font-size: 18px;
  color: var(--primary);
  margin-top: 1px;
}

.reb-deepbrief-summary-title {
  display: block;
  font-size: 14.5px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 3px;
}

.reb-deepbrief-summary-desc {
  display: block;
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.55;
}

.reb-deepbrief-summary-chevron {
  font-size: 16px;
  color: var(--text-tertiary);
  transition: transform 0.2s var(--ease);
  flex-shrink: 0;
}

.reb-deepbrief[open] .reb-deepbrief-summary-chevron {
  transform: rotate(180deg);
}

.reb-deepbrief-body {
  padding: 8px 28px 28px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 20px;
}

.reb-deepbrief-section {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
}

.reb-deepbrief-section--full { grid-column: 1 / -1; }

.reb-deepbrief-section-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.reb-deepbrief-field {
  margin-bottom: 10px;
}

.reb-deepbrief-field:last-child { margin-bottom: 0; }

.reb-deepbrief-label {
  display: block;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 4px;
}

.reb-deepbrief-input,
.reb-deepbrief-textarea {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  font-size: 13px;
  font-family: inherit;
  line-height: 1.55;
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease);
}

.reb-deepbrief-input:focus,
.reb-deepbrief-textarea:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-elevated);
}

.reb-deepbrief-textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.65;
}

.reb-deepbrief-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reb-deepbrief-list-item {
  display: flex;
  gap: 6px;
  align-items: center;
}

.reb-deepbrief-list-item .reb-deepbrief-input,
.reb-deepbrief-list-item .reb-deepbrief-textarea {
  flex: 1;
}

.reb-deepbrief-list-item .reb-deepbrief-textarea { align-self: stretch; }

.reb-deepbrief-list-remove {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--border);
  background: var(--bg);
  border-radius: 6px;
  font-size: 16px;
  line-height: 1;
  color: var(--text-tertiary);
  cursor: pointer;
  flex-shrink: 0;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}

.reb-deepbrief-list-remove:hover {
  border-color: var(--error, #DC2626);
  color: var(--error, #DC2626);
  background: rgba(220, 38, 38, 0.04);
}

.reb-deepbrief-list-add {
  align-self: flex-start;
  margin-top: 8px;
  background: none;
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease), background 0.15s var(--ease);
}

.reb-deepbrief-list-add:hover {
  border-color: var(--primary);
  color: var(--primary);
}

@media (max-width: 768px) {
  .reb-deepbrief-body { grid-template-columns: 1fr; padding: 6px 18px 20px; }
  .reb-deepbrief { margin: -16px 0 60px; }
  .reb-deepbrief-summary { padding: 16px 18px; }
  .reb-brief-uploader { padding: 22px 18px 18px; }
  .reb-brief-dropzone { padding: 16px 14px; }
  .reb-brief-dropzone-inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .reb-brief-dropzone-btn { width: 100%; }
  .reb-brief-success-detail { white-space: normal; }
}

/* ── Buttons ───────────────────────────────────────────────────── */
.reb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: var(--radius-md);
  font-size: 15px;
  font-weight: 620;
  /* 명시적 1px transparent border 로 통일 — variant 가 border 를 추가하더라도
     box-sizing: border-box 에서 외곽이 일관되게 유지됨 */
  border: 1px solid transparent;
  line-height: 1.4;
  transition: all 0.25s var(--ease);
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.reb-btn--sm {
  padding: 8px 16px;
  font-size: 13px;
  border-radius: var(--radius-sm);
}

.reb-btn--icon-only {
  width: 36px;
  height: 36px;
  padding: 0;
  border-radius: var(--radius-sm);
}

.reb-btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, #4F46E5 100%);
  color: var(--text-inverse);
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.25), 0 0 0 1px rgba(99,102,241,0.1);
}

.reb-btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, #4F46E5 0%, #4338CA 100%);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.35);
}

.reb-btn-primary:active { transform: translateY(0); }

.reb-btn-primary:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.reb-btn-secondary {
  background: var(--bg-elevated);
  color: var(--text);
  border: 1px solid var(--border);
}

.reb-btn-secondary:hover {
  border-color: var(--text-tertiary);
  background: var(--bg-subtle);
}

.reb-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  padding: 8px 16px;
}

.reb-btn-ghost:hover {
  color: var(--text);
  background: var(--bg-subtle);
}

.reb-btn-ai {
  width: 100%;
  padding: 16px 32px;
  font-size: 16px;
  position: relative;
  overflow: hidden;
}

.reb-btn-ai::after {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.13), transparent);
  animation: shimmer 3s ease-in-out infinite;
}

.reb-ai-sparkle {
  font-style: normal;
  animation: sparkle 2.5s ease-in-out infinite;
}

/* ── Toggle Switch ─────────────────────────────────────────────── */
.reb-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  border: none;
  padding: 0;
  background: var(--border);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition);
}

.reb-toggle[aria-checked="true"] { background: var(--primary); }

.reb-toggle-knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
  transition: transform var(--transition);
  pointer-events: none;
}

.reb-toggle[aria-checked="true"] .reb-toggle-knob {
  transform: translateX(20px);
}

/* ── Tags / Keywords ───────────────────────────────────────────── */
.reb-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.reb-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  transition: all var(--transition-fast);
  border: 1px solid transparent;
}

.reb-tag:hover { border-color: var(--border); }

.reb-tag-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: none;
  border: none;
  color: var(--text-tertiary);
  font-size: 14px;
  cursor: pointer;
  margin-left: 2px;
  padding: 0;
  opacity: 0;
  transition: opacity var(--transition-fast);
}

.reb-tag:hover .reb-tag-remove { opacity: 1; }
.reb-tag-remove:hover { color: var(--error); }

.reb-tag-add {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  border: 1px dashed var(--border);
  background: transparent;
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.reb-tag-add:hover {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.reb-tag-input {
  display: inline-block;
  width: 120px;
  padding: 5px 10px;
  border: 1.5px solid var(--primary);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-family: inherit;
  color: var(--text);
  outline: none;
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* ── URL Input (Coupang etc.) ──────────────────────────────────── */
.reb-url-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.reb-url-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  font-size: 13px;
  color: var(--text-secondary);
  transition: border-color var(--transition-fast);
}

.reb-url-item:hover { border-color: var(--border); }

.reb-url-item-icon { flex-shrink: 0; color: var(--text-tertiary); }

.reb-url-item-info { flex: 1; min-width: 0; }

.reb-url-item-id {
  font-weight: 650;
  font-size: 14px;
  color: var(--text);
  display: block;
}

.reb-url-item-url {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-top: 2px;
}

.reb-url-item-remove {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.reb-url-item-remove:hover { color: var(--error); background: var(--error-light); }

.reb-url-input-row {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
}

.reb-url-input-row .reb-input {
  flex: 1;
  font-size: 13px;
  padding: 10px 14px;
}

.reb-url-add-btn {
  padding: 10px 18px !important;
  font-size: 13px !important;
  flex-shrink: 0;
  border-radius: var(--radius-md) !important;
}

.reb-source-card-guide {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
  margin-top: 6px;
  display: flex;
  align-items: flex-start;
  gap: 6px;
}

.reb-source-card-guide-icon { flex-shrink: 0; margin-top: 1px; }

/* ── Addon Source Cards ────────────────────────────────────────── */
.reb-source-card--addon {
  opacity: 0.5;
  border-left-color: var(--border);
  background: var(--bg-subtle);
  cursor: default;
}

.reb-source-icon--addon { opacity: 0.5; }

.reb-addon-badge {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 650;
  letter-spacing: 0.02em;
  background: var(--border-light);
  color: var(--text-tertiary);
}

.reb-source-card--addon .reb-source-card-reason { margin-bottom: 0; }

.reb-source-card-urls--optional {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}

/* ── External Research Sources (쿠팡 / 디시인사이드) ──────────────
   네이버 카드와 동일한 시각 언어를 그대로 따른다.
   - 라벨: .reb-source-card-keywords-label (재사용)
   - 키워드 핍: .reb-tag 스타일 그대로, 변형만 .reb-tag--external
   - 추천 상품/갤러리: 2줄 가능한 "리치 행" 컴포넌트 (.reb-ext-rich) */

.reb-source-card-keywords + .reb-source-card-keywords {
  margin-top: 16px;
}

/* 클릭 가능한 외부 검색 핍 */
.reb-tag--external {
  text-decoration: none;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.reb-tag--external .reb-ext-icon {
  flex-shrink: 0;
  color: var(--text-tertiary);
  margin-left: 2px;
  opacity: 0.7;
}
.reb-tag--external:hover {
  background: #fff;
  border-color: var(--source-color);
  color: var(--source-color);
}
.reb-tag--external:hover .reb-ext-icon { color: var(--source-color); opacity: 1; }

/* 추천 상품 / 추천 갤러리 — 두 줄 가능한 클릭 행 */
.reb-ext-rich-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reb-ext-rich {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-sm);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease;
}
.reb-ext-rich:hover {
  background: #fff;
  border-color: var(--source-color);
  transform: translateY(-1px);
}

.reb-ext-rich-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}

.reb-ext-rich-name {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  line-height: 1.4;
}

.reb-ext-rich-why {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.45;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.reb-ext-rich .reb-ext-icon {
  flex-shrink: 0;
  color: var(--text-tertiary);
  width: 12px;
  height: 12px;
  opacity: 0.7;
  transition: color 0.15s ease, opacity 0.15s ease;
}
.reb-ext-rich:hover .reb-ext-icon { color: var(--source-color); opacity: 1; }

/* 상품 URL 입력 라벨 부가 설명 (선택 표기) */
.reb-source-card-keywords-label .reb-label-optional {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-tertiary);
  opacity: 0.85;
  margin-left: 4px;
}

/* ── External Research: 카드 헤더 데이터 상태 pill ───────────────── */
.reb-data-pill {
  display: inline-flex;
  align-items: center;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: -0.1px;
  margin-left: 6px;
  white-space: nowrap;
  line-height: 1.4;
}
.reb-data-pill--has {
  color: var(--source-color, var(--accent));
  background: color-mix(in srgb, var(--source-color, var(--accent)) 10%, transparent);
}
.reb-data-pill--none {
  color: var(--text-tertiary, #777);
  background: var(--bg-subtle, rgba(0,0,0,0.05));
  border: 1px dashed var(--border-color, #d6d6df);
}

/* ── External Research: AdTech 팀 데이터 업로드 영역 ──────────────
   쿠팡 리뷰 / 디시 게시물 등 자동 수집 미지원 소스에서
   미리 받아 둔 JSON·CSV 파일을 직접 카드 안에서 첨부하는 패턴 */
.reb-ext-upload {
  margin-top: 12px;
  padding: 14px 16px;
  background: var(--bg-subtle, rgba(0,0,0,0.025));
  border: 1px dashed var(--border-color, #d6d6df);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reb-ext-upload-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.reb-ext-upload-titles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.reb-ext-upload-title {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.1px;
}

.reb-ext-upload-count {
  font-size: 11px;
  font-weight: 600;
  color: var(--source-color, var(--accent));
  background: color-mix(in srgb, var(--source-color, var(--accent)) 10%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: -0.1px;
}

.reb-ext-upload-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-color, #d6d6df);
  border-radius: 8px;
  padding: 6px 12px;
  cursor: pointer;
  transition: all 0.15s ease;
  white-space: nowrap;
}
.reb-ext-upload-btn:hover {
  border-color: var(--source-color, var(--accent));
  color: var(--source-color, var(--accent));
  background: color-mix(in srgb, var(--source-color, var(--accent)) 6%, var(--bg-elevated, #fff));
}

.reb-ext-upload-desc {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.reb-ext-upload-sample {
  margin: -2px 0 0;
  font-size: 11.5px;
}
.reb-ext-upload-sample a {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-secondary);
  text-decoration: underline;
  text-decoration-color: var(--border-color, #d6d6df);
  text-underline-offset: 3px;
  transition: color 0.15s ease, text-decoration-color 0.15s ease;
}
.reb-ext-upload-sample a:hover {
  color: var(--source-color, var(--accent));
  text-decoration-color: currentColor;
}

.reb-ext-upload-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 2px;
}

.reb-ext-upload-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  background: var(--bg-elevated, #fff);
  border: 1px solid var(--border-color, #e3e3e9);
  border-radius: 8px;
  font-size: 12px;
}

/* 아직 분석에 반영되지 않은 업로드 ─ 좌측에 amber 강조선 + 살짝 톤 다운된 배경.
   사용자가 confirm 취소 후 새로고침해도 "이 파일은 아직 분석 안 됐다"고
   바로 인지할 수 있도록 시각적 위계를 부여. */
.reb-ext-upload-item--pending {
  background: linear-gradient(90deg, rgba(245,158,11,0.06), rgba(245,158,11,0));
  border-color: rgba(245,158,11,0.45);
  box-shadow: inset 3px 0 0 0 #F59E0B;
}

/* 분석 미반영 pill ─ 외부 카드 / custom entry 양쪽에서 공통 사용 */
.reb-upload-pending-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
  padding: 2px 8px;
  font-size: 10.5px;
  font-weight: 700;
  color: #92400E;
  background: rgba(245,158,11,0.16);
  border: 1px solid rgba(245,158,11,0.4);
  border-radius: 999px;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

.reb-ext-upload-item-main {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1;
}

.reb-ext-upload-item-name {
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.reb-ext-upload-item-meta {
  font-size: 11px;
  color: var(--text-tertiary);
  white-space: nowrap;
  flex-shrink: 0;
}

.reb-ext-upload-remove {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s ease;
  flex-shrink: 0;
}
.reb-ext-upload-remove:hover {
  background: color-mix(in srgb, var(--danger, #e44) 12%, transparent);
  color: var(--danger, #e44);
}

.reb-ext-upload-empty {
  margin: 0;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-style: italic;
}

/* ── AI Insight ────────────────────────────────────────────────── */
.reb-ai-insight {
  padding: 24px 28px;
  background: linear-gradient(135deg, var(--ai-subtle), var(--ai-light));
  border: 1px solid var(--ai-border);
  border-radius: var(--radius-lg);
  margin-bottom: 36px;
}

.reb-ai-insight-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--radius-full);
  background: rgba(217, 119, 6, 0.1);
  color: var(--ai);
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 14px;
  letter-spacing: 0.02em;
}

.reb-ai-insight p {
  font-size: 15px;
  line-height: 1.7;
  color: #78350F;
}

/* ── Section ───────────────────────────────────────────────────── */
.reb-section { margin-bottom: 36px; }

.reb-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
}

.reb-section-title {
  font-size: 18px;
  font-weight: 650;
  letter-spacing: -0.01em;
}

.reb-section-count {
  font-size: 13px;
  color: var(--text-tertiary);
  font-weight: 500;
}

/* ── Keyword Groups ────────────────────────────────────────────── */
.reb-keyword-groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}

.reb-keyword-group {
  padding: 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
}

.reb-keyword-group-title {
  font-size: 13px;
  font-weight: 650;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 12px;
}

/* ── Source Cards ───────────────────────────────────────────────── */
.reb-source-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

.reb-source-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  position: relative;
  transition: all var(--transition);
  opacity: 0.55;
  animation: cardEnter 0.5s var(--ease) backwards;
}

.reb-source-card--active {
  opacity: 1;
  border-left-color: var(--source-color, var(--primary));
  box-shadow: var(--shadow-xs);
}

.reb-source-card--active:hover { box-shadow: var(--shadow-sm); }

.reb-source-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.reb-source-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 650;
  font-size: 15px;
}

.reb-source-icon {
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 750;
  color: white;
  background: var(--source-color, var(--primary));
  flex-shrink: 0;
}

.reb-source-icon--sm {
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-radius: 6px;
}

.reb-source-card-priority { margin-bottom: 10px; }

.reb-priority {
  display: inline-block;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.02em;
}

.reb-priority--high   { background: #FEE2E2; color: #991B1B; }
.reb-priority--medium { background: var(--ai-light); color: #92400E; }
.reb-priority--low    { background: var(--bg-subtle); color: var(--text-secondary); }

.reb-source-card-reason {
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 8px;
}

.reb-source-card-insight {
  font-size: 13px;
  color: var(--text-tertiary);
  line-height: 1.5;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
  margin-bottom: 14px;
}

.reb-source-card-keywords-label {
  display: block;
  font-size: 11px;
  font-weight: 650;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 8px;
}

/* ── Recommendations Header ────────────────────────────────────── */
.reb-reco-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 64px 0 8px;
  margin-bottom: 28px;
}

.reb-reco-title {
  font-size: clamp(24px, 4vw, 32px);
  font-weight: 740;
  letter-spacing: -0.02em;
}

.reb-reco-subtitle {
  font-size: 15px;
  color: var(--text-secondary);
  margin-top: 6px;
}

/* ── Action Bar ────────────────────────────────────────────────── */
.reb-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 28px 0 80px;
  border-top: 1px solid var(--border-light);
  margin-top: 12px;
}

/* (V1 Home Hero styles removed — now using V2 hero styles below) */

.reb-btn--lg {
  padding: 13px 26px;
  font-size: 15px;
  font-weight: 650;
  gap: 8px;
  animation: reb-fadein-up 0.6s var(--ease) 0.24s both;
}

/* (V1 Home Stats/Process/Projects styles removed — now using V2 styles below) */

/* ================================================================
   PROJECT LIST
   ================================================================ */

/* ── Project Grid ──────────────────────────────────────────────── */
.reb-projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.reb-project-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s var(--ease);
  position: relative;
  animation: cardEnter 0.4s var(--ease) backwards;
}

.reb-project-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  transform: translateY(-3px);
  border-color: color-mix(in srgb, var(--primary) 20%, var(--border-light));
}

.reb-project-card:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

.reb-project-card--deleting {
  opacity: 0;
  transform: scale(0.95);
  transition: all 0.3s var(--ease);
}

.reb-project-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.reb-project-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 11.5px;
  font-weight: 680;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

.reb-project-actions {
  display: flex;
  gap: 2px;
  opacity: 0;
  transition: opacity var(--transition-fast);
}
.reb-project-card:hover .reb-project-actions { opacity: 1; }

.reb-project-edit,
.reb-project-delete {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all var(--transition-fast);
}
.reb-project-edit:hover { color: var(--primary); background: var(--primary-light); }
.reb-project-delete:hover { color: var(--error); background: var(--error-light); }

.reb-project-card-name {
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -0.01em;
  margin-bottom: 4px;
  line-height: 1.3;
}

.reb-project-card-brand {
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 16px;
}

.reb-project-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  font-size: 12px;
  color: var(--text-tertiary);
}

.reb-project-card-sources {
  font-weight: 550;
  color: var(--text-secondary);
}

/* footer 좌/우 그룹 — 좌측: 소스 수 / 우측: 작성자 + 날짜.
   gap 이 작아 두 정보가 시각적으로 한 묶음으로 보이게. min-width:0 으로
   긴 작성자명 ellipsis 가능. */
.reb-project-card-footer-left,
.reb-project-card-footer-right {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.reb-project-card-footer-right {
  flex-shrink: 0;
  max-width: 65%;
}

/* 작성자 chip — 아이콘 + 이름. 날짜와 같은 톤이지만 아이콘으로 시각적 구분.
   카드 폭이 좁아질 때 이름이 ellipsis 되도록 inline-grid 사용. */
.reb-project-card-creator {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 0;
  color: var(--text-tertiary);
  font-weight: 500;
}
.reb-project-card-creator svg {
  flex: 0 0 auto;
  opacity: 0.7;
}
.reb-project-card-creator-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 110px;
}

/* 날짜 — 작성자와 동일한 패턴(아이콘 + 라벨)으로 좌우 시각적 균형. tooltip 으로 절대시각 노출. */
.reb-project-card-date {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.reb-project-card-date svg {
  flex: 0 0 auto;
  opacity: 0.7;
}

/* ── Pulse Dot ─────────────────────────────────────────────────── */
.reb-pulse-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentColor;
  animation: pulseDot 1.6s ease-in-out infinite;
}

.reb-pulse-dot--sm { width: 6px; height: 6px; }

/* ── Empty State ───────────────────────────────────────────────── */
.reb-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 80px 24px 120px;
}

.reb-empty-icon {
  width: 100px;
  height: 100px;
  color: var(--text-tertiary);
  margin-bottom: 28px;
  opacity: 0.5;
}

.reb-empty-icon svg {
  width: 100%;
  height: 100%;
}

.reb-empty-title {
  font-size: 20px;
  font-weight: 650;
  margin-bottom: 10px;
  letter-spacing: -0.01em;
}

.reb-empty-desc {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 32px;
  max-width: 480px;
  line-height: 1.65;
}
.reb-empty-desc b {
  color: var(--text-primary);
  font-weight: 650;
}

/* 빈 상태의 복구 액션 행 — 예: "지금 미디어 인사이트 생성" 같은 actionable empty state */
.reb-empty-actions {
  display: flex; gap: 8px; justify-content: center;
  flex-wrap: wrap;
}

/* 공용 스피너 — 버튼/로딩 영역에서 inline rotate.
   prefers-reduced-motion 사용자에게는 정지(접근성). */
@keyframes reb-spin { to { transform: rotate(360deg); } }
.reb-spin { animation: reb-spin 0.9s linear infinite; transform-origin: center; }
@media (prefers-reduced-motion: reduce) {
  .reb-spin { animation: none; }
}

/* ================================================================
   COLLECTION STATUS VIEW
   ================================================================ */

.reb-status-header {
  padding: 36px 0 28px;
}

.reb-back-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px 6px 8px;
  margin-bottom: 16px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-full);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: all var(--transition-fast);
}

.reb-back-link:hover { color: var(--primary); background: var(--primary-light); border-color: rgba(99,102,241,0.15); }

.reb-status-title {
  font-size: clamp(22px, 3.5vw, 28px);
  font-weight: 780;
  letter-spacing: -0.025em;
}

.reb-status-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
  margin-top: 4px;
}

/* ── Ring Progress ─────────────────────────────────────────────── */
.reb-status-overall {
  display: flex;
  align-items: center;
  gap: 40px;
  padding: 32px 36px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  margin-bottom: 28px;
  box-shadow: var(--shadow-xs);
}

.reb-status-ring-wrap {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.reb-status-ring { width: 100%; height: 100%; transform: rotate(-90deg); }

.reb-status-ring-bg {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 8;
}

.reb-status-ring-fill {
  fill: none;
  stroke: var(--primary);
  stroke-width: 8;
  stroke-linecap: round;
  transition: stroke-dashoffset 0.8s var(--ease);
}

.reb-status-ring-label {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: baseline;
  gap: 2px;
}

.reb-status-ring-pct {
  font-size: 32px;
  font-weight: 760;
  letter-spacing: -0.03em;
  color: var(--text);
}

.reb-status-ring-unit {
  font-size: 16px;
  font-weight: 600;
  color: var(--text-secondary);
}

.reb-status-meta {
  display: flex;
  flex-direction: column;
  gap: 16px;
  flex: 1;
}

.reb-status-meta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.reb-status-meta-label {
  font-size: 14px;
  color: var(--text-secondary);
}

.reb-status-meta-value {
  font-size: 18px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.reb-text-success { color: var(--success); }
.reb-text-primary { color: var(--primary); }

/* ── Source Status Rows ────────────────────────────────────────── */
.reb-status-sources {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 36px;
}

.reb-source-status-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: all var(--transition);
  animation: cardEnter 0.35s var(--ease) backwards;
}

.reb-source-status-row:hover {
  box-shadow: var(--shadow-xs);
}

.reb-source-status--running {
  border-left: 4px solid var(--primary);
}

.reb-source-status--done {
  border-left: 4px solid var(--success);
}

.reb-source-status--pending {
  border-left: 4px solid var(--border);
  opacity: 0.6;
}

/* empty = 외부 업로드 카드인데 업로드된 데이터가 없어 이번 분석에서 자동 제외된 상태.
   "수집 안 함" 신호로 점선 + 옅게. */
.reb-source-status--empty {
  border-left: 4px dashed var(--border);
  opacity: 0.55;
  background: var(--bg-subtle);
}
.reb-source-status--empty .reb-source-status-badge { color: var(--text-tertiary); }

.reb-source-status-info {
  flex: 1;
  min-width: 0;
}

.reb-source-status-name {
  font-size: 14px;
  font-weight: 620;
  display: block;
}

.reb-source-status-detail {
  font-size: 12px;
  color: var(--text-tertiary);
  display: block;
  margin-top: 2px;
}

.reb-source-status-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 550;
  color: var(--text-secondary);
  white-space: nowrap;
}

.reb-source-status--running .reb-source-status-badge { color: var(--primary); }
.reb-source-status--done .reb-source-status-badge { color: var(--success); }
.reb-source-status--failed .reb-source-status-badge { color: var(--error); }

.reb-source-status--failed {
  border-left: 4px solid var(--error);
  opacity: 0.7;
}

.reb-fail-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--error);
  color: white;
  font-size: 11px;
  font-weight: 800;
}

.reb-check-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--success);
  color: white;
  font-size: 11px;
  font-weight: 800;
}

/* ── AI Analysis Phase ─────────────────────────────────────────── */
.reb-ai-phase {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 28px 32px;
  margin-bottom: 28px;
  animation: cardEnter 0.4s var(--ease) backwards;
}

.reb-ai-phase-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 20px;
}

.reb-ai-phase-icon {
  width: 44px;
  height: 44px;
  border-radius: var(--radius-md);
  background: #FEF3C7;
  color: #D97706;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.reb-ai-phase-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 2px;
}

.reb-ai-phase-desc {
  font-size: 13px;
  color: var(--text-secondary);
}

.reb-ai-phase-progress {
  margin-bottom: 20px;
}

.reb-ai-phase-bar-bg {
  height: 6px;
  background: var(--bg-subtle);
  border-radius: 3px;
  overflow: hidden;
}

.reb-ai-phase-bar-fill {
  height: 100%;
  border-radius: 3px;
  background: linear-gradient(90deg, #F59E0B, #D97706);
  transition: width 1s var(--ease);
  position: relative;
}

.reb-ai-phase-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s ease-in-out infinite;
}

.reb-ai-phase-steps {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reb-ai-phase-step {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-tertiary);
  transition: all var(--transition);
}

.reb-ai-phase-step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: all var(--transition);
}

.reb-ai-phase-step--active {
  color: #D97706;
  font-weight: 600;
}

.reb-ai-phase-step--active .reb-ai-phase-step-dot {
  border-color: #D97706;
  background: #D97706;
  animation: stepPulse 1.4s ease-in-out infinite;
}

.reb-ai-phase-step--done {
  color: var(--success);
}

.reb-ai-phase-step--done .reb-ai-phase-step-dot {
  border-color: var(--success);
  background: var(--success);
  animation: none;
}

/* ── Status Actions ────────────────────────────────────────────── */
.reb-status-actions {
  padding: 24px 0 80px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: center;
}

.reb-status-actions .reb-btn {
  min-width: 240px;
  padding: 14px 32px;
}

/* ── Loading ───────────────────────────────────────────────────── */
.reb-loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
}

.reb-loader {
  width: 56px;
  height: 56px;
  margin-bottom: 36px;
  position: relative;
}

.reb-loader svg {
  width: 100%;
  height: 100%;
  animation: loaderRotate 1.8s linear infinite;
}

.reb-loader circle {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 120;
  stroke-dashoffset: 120;
  animation: loaderDash 1.4s ease-in-out infinite;
}

.reb-loading-title {
  font-size: 20px;
  font-weight: 650;
  margin-bottom: 28px;
  letter-spacing: -0.01em;
}

.reb-loading-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: flex-start;
  text-align: left;
}

.reb-loading-step {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: var(--text-tertiary);
  transition: all var(--transition);
}

.reb-loading-step-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 2px solid var(--border);
  flex-shrink: 0;
  transition: all var(--transition);
  position: relative;
}

.reb-loading-step--active { color: var(--text); font-weight: 550; }

.reb-loading-step--active .reb-loading-step-dot {
  border-color: var(--primary);
  background: var(--primary);
  animation: stepPulse 1.4s ease-in-out infinite;
}

.reb-loading-step--done { color: var(--success); }

.reb-loading-step--done .reb-loading-step-dot {
  border-color: var(--success);
  background: var(--success);
  animation: none;
}

.reb-loading-step--done .reb-loading-step-dot::after {
  content: '✓';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 7px;
  color: white;
  font-weight: 800;
}

/* ── Toast ─────────────────────────────────────────────────────── */
.reb-toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 24px;
  border-radius: var(--radius-md);
  background: var(--text);
  color: var(--text-inverse);
  font-size: 14px;
  font-weight: 500;
  opacity: 0;
  transition: all 0.35s var(--ease);
  z-index: 9000;
  box-shadow: var(--shadow-lg);
  max-width: 90vw;
}

.reb-toast--visible {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.reb-toast--error { background: var(--error); }
.reb-toast--success { background: var(--success); }

/* ================================================================
   ANALYSIS DASHBOARD
   ================================================================ */

.reb-analysis-header {
  padding: 32px 0 24px;
}

.reb-analysis-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.reb-analysis-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reb-analysis-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
}

.reb-analysis-title {
  font-size: clamp(24px, 3vw, 30px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
}

.reb-analysis-meta-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 8px;
}

.reb-analysis-subtitle {
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 6px;
}

.reb-version-selector-wrap {
  position: relative;
}

.reb-version-select {
  appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: 6px 30px 6px 14px;
  cursor: pointer;
  transition: all 0.2s var(--ease);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.reb-version-select:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
}

.reb-version-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ── Overview Cards ───────────────────────────────────────────── */
.reb-analysis-overview {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-bottom: 36px;
}

.reb-overview-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 20px 22px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: all 0.3s var(--ease);
  position: relative;
  overflow: hidden;
  animation: cardEnter 0.4s var(--ease) backwards;
}

.reb-overview-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  border-radius: 16px 16px 0 0;
}

.reb-overview-card--buzz::before   { background: linear-gradient(90deg, #6366F1, #818CF8); }
.reb-overview-card--content::before { background: linear-gradient(90deg, #059669, #34D399); }
.reb-overview-card--source::before  { background: linear-gradient(90deg, #D97706, #FBBF24); }
.reb-overview-card--keyword::before { background: linear-gradient(90deg, #DB2777, #F472B6); }

.reb-overview-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

.reb-overview-icon {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 6px;
}

.reb-overview-card--buzz .reb-overview-icon    { background: var(--primary-light); color: var(--primary); }
.reb-overview-card--content .reb-overview-icon { background: var(--success-light); color: var(--success); }
.reb-overview-card--source .reb-overview-icon  { background: #FEF3C7; color: #D97706; }
.reb-overview-card--keyword .reb-overview-icon { background: #FCE7F3; color: #EC4899; }

.reb-overview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}

.reb-overview-value-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}

.reb-overview-value {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  line-height: 1;
}

.reb-overview-unit {
  font-size: 14px;
  font-weight: 500;
  color: var(--text-tertiary);
}
.reb-overview-filtered {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 2px;
  opacity: 0.7;
}

/* ── Analysis Sections ────────────────────────────────────────── */
.reb-analysis-section {
  margin-bottom: 36px;
  animation: sectionEnter 0.5s var(--ease) backwards;
}

.reb-analysis-section:nth-child(3) { animation-delay: 0.1s; }
.reb-analysis-section:nth-child(4) { animation-delay: 0.2s; }
.reb-analysis-section:nth-child(5) { animation-delay: 0.3s; }
.reb-analysis-section:nth-child(6) { animation-delay: 0.4s; }

.reb-analysis-section-title {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.02em;
  margin-bottom: 4px;
  color: var(--text);
}

.reb-analysis-section-desc {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 16px;
}

/* ── Chart Cards ──────────────────────────────────────────────── */
.reb-chart-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 20px 24px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.25s ease;
}

.reb-chart-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
}

.reb-chart-card-title {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 4px;
}

.reb-chart-card-subtitle {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 10px;
}

.reb-chart-card-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 12px;
}

.reb-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
}

.reb-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.reb-chart {
  width: 100%;
}

.reb-analysis-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.reb-chart-card--half {
  min-width: 0;
}

.reb-section-wide {
  max-width: none;
}

.reb-entity-card {
  padding: 0 !important;
  overflow: hidden;
}
.reb-entity-card > .reb-chart {
  padding: 10px 12px;
}
/* 차트 하단 제스처 안내 — 데스크탑/터치에 맞춰 문구가 자동 전환됨 */
.reb-chart-gesture-hint {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 14px 12px;
  font-size: 11.5px;
  color: var(--text-tertiary);
  letter-spacing: -0.005em;
}
.reb-chart-gesture-hint svg { flex: none; opacity: 0.7; }
.reb-chart-gesture-hint-touch { display: none; }
@media (pointer: coarse), (max-width: 720px) {
  .reb-chart-gesture-hint-desktop { display: none; }
  .reb-chart-gesture-hint-touch   { display: inline; }
}

.reb-wc-card {
  position: relative;
  padding: 0 !important;
  overflow: hidden;
}
.reb-wc-card > canvas {
  padding: 30px;
}

.reb-wc-canvas {
  display: block;
  width: 100%;
  border-radius: calc(var(--radius-xl) - 8px);
}

.reb-wc-tooltip {
  position: absolute;
  pointer-events: none;
  background: rgba(30, 30, 40, 0.92);
  color: #fff;
  font-size: 13px;
  line-height: 1.5;
  padding: 8px 14px;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  z-index: 10;
  white-space: nowrap;
  backdrop-filter: blur(6px);
  transition: opacity 0.15s ease;
}

/* ── Network Tabs ─────────────────────────────────────────────── */
.reb-network-tabs {
  display: flex;
  gap: 0;
  margin-bottom: 20px;
  border-bottom: 1px solid var(--border-light);
}

.reb-network-tab {
  padding: 8px 18px;
  border: none;
  background: none;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
  font-family: inherit;
}

.reb-network-tab:hover { color: var(--text-secondary); }

.reb-network-tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── Network Cards View ───────────────────────────────────────── */
.reb-network-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 14px;
  min-height: 200px;
}

.reb-network-cluster {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  transition: all var(--transition);
  animation: cardEnter 0.35s var(--ease) backwards;
}

.reb-network-cluster:hover {
  box-shadow: var(--shadow-sm);
  border-color: var(--border);
}

.reb-network-cluster-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.reb-network-cluster-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.reb-network-cluster-name {
  font-size: 14px;
  font-weight: 650;
  color: var(--text);
}

.reb-network-cluster-count {
  font-size: 11px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: auto;
}

.reb-network-cluster-words {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.reb-network-cluster-word {
  display: inline-block;
  padding: 4px 10px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  font-size: 12px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: all var(--transition-fast);
}

.reb-network-cluster-word:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── Insight Cards ─────────────────────────────────────────────── */
.reb-insight-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
}

.reb-insight-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  padding: 22px 24px;
  transition: all var(--transition);
  animation: cardEnter 0.4s var(--ease) backwards;
}

.reb-insight-card:hover {
  box-shadow: var(--shadow-sm);
}

.reb-insight-card--channel { border-left-color: #10B981; }
.reb-insight-card--keyword { border-left-color: #6366F1; }
.reb-insight-card--sentiment { border-left-color: #F59E0B; }
.reb-insight-card--network { border-left-color: #EC4899; }

.reb-insight-card-label {
  display: block;
  font-size: 11px;
  font-weight: 650;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  margin-bottom: 8px;
}

.reb-insight-card-title {
  font-size: 15px;
  font-weight: 650;
  color: var(--text);
  margin-bottom: 8px;
  line-height: 1.4;
}

.reb-insight-card-body {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
}

.reb-insight-card-stat {
  font-weight: 700;
  color: var(--primary);
}

/* ── Analysis Loading Skeleton ────────────────────────────────── */
.reb-analysis-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 0;
  gap: 16px;
}

.reb-analysis-loading-spinner {
  width: 40px;
  height: 40px;
}

.reb-analysis-loading-spinner svg {
  width: 100%;
  height: 100%;
  animation: loaderRotate 1.6s linear infinite;
}

.reb-analysis-loading-spinner circle {
  fill: none;
  stroke: var(--primary);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 80;
  animation: loaderDash 1.2s ease-in-out infinite;
}

.reb-analysis-loading-text {
  font-size: 15px;
  color: var(--text-secondary);
  font-weight: 500;
}

/* ── Content Tabs ─────────────────────────────────────────────── */
.reb-content-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
  padding-bottom: 0;
}

.reb-content-tab {
  padding: 10px 20px;
  border: none;
  background: none;
  font-size: 14px;
  font-weight: 550;
  color: var(--text-tertiary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all var(--transition-fast);
}

.reb-content-tab:hover {
  color: var(--text-secondary);
}

.reb-content-tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* ── Content List ─────────────────────────────────────────────── */
.reb-content-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.reb-content-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  margin-bottom: 8px;
  transition: all var(--transition);
  animation: cardEnter 0.35s var(--ease) backwards;
}

.reb-content-item:hover {
  box-shadow: var(--shadow-xs);
  border-color: var(--border);
}

.reb-content-item-rank {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--bg-subtle);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  color: var(--text-tertiary);
  flex-shrink: 0;
  margin-top: 1px;
}

.reb-content-item-rank--top {
  background: var(--primary);
  color: white;
}

.reb-content-item-body {
  flex: 1;
  min-width: 0;
}

.reb-content-item-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  display: block;
  margin-bottom: 4px;
  line-height: 1.4;
  text-decoration: none;
  transition: color var(--transition-fast);
}

.reb-content-item-title:hover {
  color: var(--primary);
}

.reb-content-item-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary);
}

.reb-content-item-meta span + span::before {
  content: '·';
  margin-right: 6px;
  color: var(--border);
}

.reb-content-item-keyword {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  background: var(--primary-light);
  color: var(--primary);
  font-size: 11px;
  font-weight: 600;
}

.reb-content-item-link {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-tertiary);
  transition: all var(--transition-fast);
  margin-top: 2px;
}

.reb-content-item-link:hover {
  color: var(--primary);
  background: var(--primary-light);
}

/* ================================================================
   AI ANALYSIS SECTIONS
   ================================================================ */

/* ── Executive Summary ───────────────────────────────────────── */
.reb-exec-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 24px 28px;
  position: relative;
  box-shadow: var(--shadow-sm);
}

/* (top border removed) */

.reb-exec-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.reb-exec-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  letter-spacing: 0.02em;
  border: 1px solid rgba(99, 102, 241, 0.12);
}

.reb-exec-confidence {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 600;
  color: var(--conf-color);
  background: var(--conf-bg);
  border: 1px solid color-mix(in srgb, var(--conf-color) 15%, transparent);
}

.reb-exec-confidence b {
  font-weight: 750;
}

.reb-exec-text {
  font-size: 14.5px;
  line-height: 1.8;
  color: var(--text);
  font-weight: 450;
  letter-spacing: -0.005em;
}

.reb-exec-footer {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.55;
}

.reb-exec-footer svg {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.45;
}

.reb-ai-section-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 14px;
  border-radius: var(--radius-full);
  background: linear-gradient(135deg, #EEF2FF, #E0E7FF);
  color: var(--primary);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-bottom: 16px;
  border: 1px solid rgba(99, 102, 241, 0.12);
}

/* (legacy summary card styles removed — now using reb-exec-card) */

/* ── Persona Cards ───────────────────────────────────────────── */
.reb-persona-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.reb-persona-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 0;
  overflow: hidden;
  transition: all var(--transition);
  animation: cardEnter 0.4s var(--ease) backwards;
  display: flex;
  flex-direction: column;
}

.reb-persona-card:hover {
  box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(0,0,0,0.06);
  transform: translateY(-3px);
}

.reb-persona-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 22px 24px 16px;
  background: var(--p-bg);
  border-bottom: 1px solid color-mix(in srgb, var(--p-accent) 12%, transparent);
}

.reb-persona-ring-wrap {
  position: relative;
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}

.reb-persona-ring {
  width: 56px;
  height: 56px;
}

.reb-persona-ring-fill {
  transition: stroke-dashoffset 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.reb-persona-ring-pct {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--p-accent);
  letter-spacing: -0.02em;
}

.reb-persona-identity {
  flex: 1;
  min-width: 0;
}

.reb-persona-name {
  font-size: 16px;
  font-weight: 780;
  color: var(--text);
  letter-spacing: -0.015em;
  line-height: 1.35;
}

.reb-persona-desc {
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--text-secondary);
  padding: 14px 24px 0;
  margin-bottom: 14px;
}

/* Internal tension — description 바로 다음 prominent 1줄 (환원 v5).
   이전: nested widget 안 별도 위계. 현재: description 과 chip 그룹 사이 단정 한 줄. */
.reb-persona-tension-line {
  margin: 0 24px 14px;
  padding: 10px 14px;
  background: color-mix(in srgb, var(--p-accent) 6%, var(--bg-elevated));
  border-left: 3px solid var(--p-accent);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.55;
  color: var(--text);
  letter-spacing: -0.005em;
}

.reb-persona-details {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 24px;
  margin-bottom: 16px;
  flex: 1;
}

/* .reb-persona-detail-context — 환원 v5.6 에서 제거됨.
   페르소나 카드는 desc(WHO) + tension-line(전략 갈등) 2개 prose 블록 + chip 그룹들로 정합.
   cultural_context 줄글은 chip 과 정보 중복 + 카드 세로 비대 + 다른 chip 그룹과 비대칭이라 제거.
   schema 는 유지되어 데이터 보존 (필요 시 다시 노출 가능). */

.reb-persona-detail {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.reb-persona-detail-label {
  font-size: 10.5px;
  font-weight: 720;
  color: var(--p-accent);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.reb-persona-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.reb-persona-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--p-tag-bg);
  font-size: 12px;
  font-weight: 550;
  color: var(--p-tag-color);
  border: 1px solid color-mix(in srgb, var(--p-accent) 10%, transparent);
}

.reb-persona-tag--pain {
  background: var(--p-pain-bg);
  color: var(--p-pain-color);
  border-color: color-mix(in srgb, var(--p-pain-color) 12%, transparent);
}

/* ===== Unified Evidence Footer (v3) =================================
   페이지 전체 카드의 데이터 근거 영역. 모든 evidence footer 가 동일한:
   - layout: grid (auto | 1fr | auto) — icon / text / conf chip 한 줄 시작
   - 톤: plain border-top, no bg (Pattern B)
   - 위계: text-tertiary, 11.5px, 1.55 line-height
   각 카드별 클래스는 부모 padding 보완용 horizontal offset 만 override.
   _renderEvidenceBlock 의 conf chip 은 grid col 3 에 우측 정렬, nowrap 으로 wrap 방지. */
.reb-persona-evidence,
.reb-ki-evidence,
.reb-ci-evidence,
.reb-direction-evidence,
.reb-meta-card-evidence,
.reb-diff-territory-evidence,
.reb-driver-evidence,
.reb-competitive-evidence {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--text-tertiary);
}
.reb-persona-evidence > svg,
.reb-ki-evidence > svg,
.reb-ci-evidence > svg,
.reb-direction-evidence > svg,
.reb-meta-card-evidence > svg,
.reb-diff-territory-evidence > svg,
.reb-driver-evidence > svg,
.reb-competitive-evidence > svg {
  margin-top: 3px;
  opacity: 0.55;
  flex-shrink: 0;
}

/* Per-card overrides — 부모 카드의 padding-bottom 이 0 인 카드들은 evidence 가 자체적으로
   bottom 호흡 공간 확보. ki / ci 는 부모 body 가 이미 bottom padding 제공하므로 override 불필요. */
.reb-persona-evidence {
  padding-right: 24px;
  padding-bottom: 16px;
  padding-left: 24px;
}
.reb-direction-evidence,
.reb-meta-card-evidence,
.reb-diff-territory-evidence {
  padding-bottom: 14px;
}

.reb-persona-evidence svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.5;
}

.reb-persona-evidence-label {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  padding: 2px 8px;
  border-radius: 4px;
  margin-right: 6px;
}

/* ── AI Sentiment ────────────────────────────────────────────── */
.reb-sentiment-drivers {
  padding: 8px 0;
}

/* 환원 v5.1: 라벨 chip 형식 → REB 표준 text-only uppercase label (페르소나 detail-label /
   key insight signals-label 과 동일 패턴). 태그는 pill chip. evidence 는 통일 룰 적용. */
.reb-driver-group {
  margin-bottom: 14px;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.reb-driver-group:last-of-type {
  margin-bottom: 0;
}

.reb-driver-label {
  font-size: 10.5px;
  font-weight: 720;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.reb-driver-label--pos { color: #059669; }
.reb-driver-label--neg { color: #DC2626; }

.reb-driver-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.reb-driver-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  font-size: 12px;
  font-weight: 550;
}

.reb-driver-tag--pos { background: #ECFDF5; color: #065F46; border: 1px solid color-mix(in srgb, #059669 14%, transparent); }
.reb-driver-tag--neg { background: #FEF2F2; color: #991B1B; border: 1px solid color-mix(in srgb, #DC2626 14%, transparent); }

/* .reb-driver-evidence — 통일 evidence 룰 (.reb-*-evidence 공유 selector) 에 편입됨 (v5.1).
   추가 override 불필요. */

/* ── Intent Distribution ─────────────────────────────────────── */
.reb-intent-bars {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 8px 0;
}

.reb-intent-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.reb-intent-label {
  width: 90px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  text-align: right;
  flex-shrink: 0;
}

.reb-intent-bar-wrap {
  flex: 1;
  height: 24px;
  background: var(--bg-subtle);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.reb-intent-bar {
  height: 100%;
  border-radius: var(--radius-sm);
  transition: width 0.8s var(--ease);
  min-width: 4px;
}

.reb-intent-count {
  width: 80px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}

.reb-intent-pct {
  font-weight: 400;
  color: var(--text-tertiary);
}

/* ── Competitive Landscape ───────────────────────────────────── */
/* 환원 v5.16: outer wrapper = white card, inner market_position = gray paragraph box.
   엔티티 네트워크 패턴 — section summary 톤 정합. */
.reb-comp-summary-card {
  padding: 22px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  margin-bottom: 20px;
  animation: sectionEnter 0.5s var(--ease) backwards;
  animation-delay: 0.1s;
}

/* market_position = inner gray paragraph box (.reb-ei-summary 톤 동일) */
.reb-market-position {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}

.reb-competitor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

/* 환원 v5.16: 컬러 헤더 + 플레인 바디 (페르소나 카드 패턴). card padding 0 + overflow hidden 으로
   header bg 가 rounded edge clip. wrapper(white) 안 inner card 로 적합. */
.reb-competitor-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: cardEnter 0.35s var(--ease) backwards;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.reb-competitor-card:hover {
  box-shadow: var(--shadow-xs);
  transform: translateY(-1px);
}

/* Header — 카드별 accent tint bg + 이름·언급 inline */
.reb-competitor-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  background: var(--c-bg);
}

/* Body — plain white, SWOT chip 그룹 */
.reb-competitor-body {
  padding: 14px 18px 16px;
  background: var(--bg-elevated);
  flex: 1;
}

.reb-competitor-card:hover {
  background: var(--bg-elevated);
}

/* 환원 v5.16: 컬러 헤더 톤 — name 강조, mention 은 accent 색으로 카드 컬러 정합 */
.reb-competitor-name {
  font-size: 15px;
  font-weight: 720;
  letter-spacing: -0.01em;
  color: var(--text);
}
.reb-competitor-mentions {
  font-size: 11.5px;
  color: var(--c-accent);
  font-weight: 600;
  flex-shrink: 0;
}

/* .reb-competitor-perception — 환원 v5.8 에서 제거됨. perceptual_map dot 위치가
   시장 인식을 시각적으로 보여주므로 카드 안 줄글 반복 불필요. SWOT chip 만 prominent. */

.reb-competitor-swot {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 환원 v5.12: SWOT layout 환원 — 라벨 inline 옆 → 라벨 위 + chip row 아래 (페르소나 detail-label 패턴) */
.reb-swot-section {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: flex-start;
}
.reb-swot-items {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

/* 환원 v5.17: 라벨은 chip 형태 → plain accent text (페르소나 detail-label 패턴 정합).
   chip 과 라벨이 시각적으로 명확히 구분됨. */
.reb-swot-label {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.04em;
  flex-shrink: 0;
}

/* 환원 v5.17: bg 제거, color 만 — plain accent text */
.reb-swot--strength .reb-swot-label { color: #059669; }
.reb-swot--weakness .reb-swot-label { color: #DC2626; }

/* 환원 v5.17: swot chip 에 semantic bg color — 강점 green tint / 약점 red tint */
.reb-swot-item {
  font-size: 12px;
  font-weight: 550;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  border: 1px solid transparent;
}
.reb-swot--strength .reb-swot-item {
  background: #ECFDF5;
  color: #065F46;
  border-color: color-mix(in srgb, #059669 14%, transparent);
}
.reb-swot--weakness .reb-swot-item {
  background: #FEF2F2;
  color: #991B1B;
  border-color: color-mix(in srgb, #DC2626 14%, transparent);
}

/* 환원 v5.17: 통일 evidence 룰의 margin-top: auto 는 flex/grid parent 컨텍스트에서만 동작.
   .reb-comp-summary-card 는 block parent 라 auto = 0 → 카드 grid 와 붙음. 명시 margin 추가. */
.reb-competitive-evidence {
  margin-top: 18px;
}

/* ── Tone Profile ────────────────────────────────────────────── */
.reb-tone-bars {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.reb-tone-row-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.reb-tone-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

.reb-tone-name {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  flex: 1;
}

.reb-tone-pct {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

.reb-tone-bar-bg {
  height: 8px;
  background: var(--bg-subtle);
  border-radius: 4px;
  overflow: hidden;
}

.reb-tone-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.8s var(--ease);
}

.reb-tone-context {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 4px;
  line-height: 1.5;
}

.reb-tone-recommendation {
  padding: 8px 0;
}

.reb-tone-rec-text {
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 16px;
  padding: 20px 24px;
  background: var(--primary-light);
  border-radius: var(--radius-md);
}

.reb-tone-evidence {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
}

/* ── Strategic Recommendations ───────────────────────────────── */
.reb-strategy-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.reb-strategy-card {
  display: flex;
  align-items: center;
  gap: 18px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 20px 22px;
  transition: all 0.25s var(--ease);
  animation: cardEnter 0.4s var(--ease) backwards;
}

.reb-strategy-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.reb-strategy-priority {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25);
}

.reb-strategy-body {
  flex: 1;
  min-width: 0;
}

.reb-strategy-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
  flex-wrap: wrap;
}
.reb-strategy-title {
  font-size: 15px;
  font-weight: 750;
  color: var(--text);
  letter-spacing: -0.01em;
}

.reb-strategy-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.reb-strategy-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.reb-strategy-tag {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  font-size: 12px;
  font-weight: 580;
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.1);
}

.reb-strategy-impact {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 13px;
  color: var(--success);
  font-weight: 650;
  margin-bottom: 8px;
}

.reb-strategy-rationale {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.6;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

/* ── Messages & Creative Hooks ───────────────────────────────── */
.reb-message-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reb-message-card {
  display: flex;
  gap: 0;
  padding: 18px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  animation: cardEnter 0.35s var(--ease) backwards;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.reb-message-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
}

.reb-message-quote-mark {
  font-family: 'Georgia', 'Noto Serif KR', serif;
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  color: var(--primary);
  opacity: 0.2;
  flex-shrink: 0;
  width: 32px;
  margin-top: -6px;
}

.reb-message-content {
  flex: 1;
  min-width: 0;
}

.reb-message-text {
  font-size: 14.5px;
  font-weight: 680;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 10px;
}

.reb-message-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.reb-message-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--border-light);
}

.reb-message-tag svg { opacity: 0.5; }

.reb-message-rationale {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.reb-message-quotes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.reb-message-src-quote {
  font-size: 12px;
  color: var(--text-tertiary);
  font-style: italic;
  line-height: 1.5;
}

.reb-hook-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.reb-hook-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 18px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  text-align: left;
  animation: cardEnter 0.35s var(--ease) backwards;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.reb-hook-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.06);
  transform: translateY(-1px);
  border-color: var(--hk-border);
}

.reb-hook-format {
  display: inline-block;
  padding: 4px 12px;
  border-radius: var(--radius-full);
  background: var(--hk-bg, var(--primary-light));
  color: var(--hk, var(--primary));
  font-size: 11px;
  font-weight: 720;
  margin-bottom: 12px;
  border: 1px solid var(--hk-border, rgba(99, 102, 241, 0.1));
}

.reb-hook-text {
  width: 100%;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 8px;
}

.reb-hook-rationale {
  width: 100%;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── Analysis Footer ──────────────────────────────────────────── */
.reb-analysis-footer {
  padding: 24px 0 48px;
  margin-top: 4px;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: center;
}

/* ── Key Insights ──────────────────────────────────────────────── */
.reb-key-insights-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.reb-ki-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  animation: cardEnter 0.45s var(--ease) both;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.reb-ki-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}

.reb-ki-body {
  flex: 1;
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
}

.reb-ki-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  gap: 8px;
}

.reb-ki-category {
  font-size: 11.5px;
  font-weight: 720;
  letter-spacing: 0.02em;
  color: var(--ki-cat);
  background: var(--ki-cat-bg);
  padding: 3px 12px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--ki-cat) 15%, transparent);
}

.reb-ki-impact {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 650;
  color: var(--ki-imp);
  background: var(--ki-imp-bg);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--ki-imp-border);
}

.reb-ki-impact-icon {
  font-size: 8px;
  line-height: 1;
}

/* Headline — Strategic lens 명제 1줄 (PPT 슬라이드 분석 헤드라인 톤).
   Strategic Meta 섹션 흡수 후 Key Insights 가 strategic 인사이트의 주역이 됨. */
.reb-ki-headline {
  font-size: 16.5px;
  font-weight: 720;
  line-height: 1.4;
  letter-spacing: -0.018em;
  color: var(--text);
  margin: 0 0 10px;
}

/* Signals — 데이터 신호 keyword chip 3개 (페르소나·메타 카드 패턴 차용) */
.reb-ki-signals {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}
.reb-ki-signals-label {
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ki-cat);
}
.reb-ki-signals-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.reb-ki-signal-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--ki-chip-bg, var(--ki-cat-bg));
  font-size: 12px;
  font-weight: 550;
  color: var(--ki-chip-color, var(--ki-cat));
  border: 1px solid color-mix(in srgb, var(--ki-cat) 10%, transparent);
}

/* Supporting text — headline 메커니즘 설명 1~2문장 (description 필드).
   환원 v4.3: headline 압축으로 잘려나간 메커니즘 설명 복원. PPT 캡처 시 가독성 위해 font 13.5,
   line-height 1.65 — Before 버전의 rich 설명 톤 회복하면서 새 lens 구조도 유지. */
.reb-ki-supporting {
  font-size: 13.5px;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 12px;
  font-weight: 500;
  letter-spacing: -0.005em;
}

.reb-ki-text {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.6;
  color: var(--text);
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}

.reb-ki-action {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 13px;
  font-weight: 550;
  color: var(--ki-cat);
  line-height: 1.55;
  margin-bottom: 8px;
}

.reb-ki-action svg {
  flex-shrink: 0;
  margin-top: 3px;
}

/* .reb-ki-evidence / svg — 통일 규칙(.reb-*-evidence 공유) 으로 흡수, 환원 v3 */

/* ── Content Themes ───────────────────────────────────────────── */
.reb-themes-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.reb-theme-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  animation: cardEnter 0.5s var(--ease) both;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.reb-theme-card:hover {
  box-shadow: 0 6px 24px rgba(0,0,0,0.08), 0 2px 6px rgba(0,0,0,0.04);
  transform: translateY(-2px);
}

.reb-theme-body {
  padding: 16px 20px;
}

.reb-theme-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.reb-theme-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 15%, transparent);
}

.reb-theme-name {
  font-size: 14.5px;
  font-weight: 720;
  color: var(--text);
  flex: 1;
  letter-spacing: -0.01em;
  line-height: 1.35;
}

.reb-theme-badge {
  font-size: 12px;
  font-weight: 700;
  color: var(--tc);
  background: var(--tc-bg);
  padding: 3px 10px;
  border-radius: var(--radius-full);
  border: 1px solid var(--tc-border);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Stacked sentiment bar */
.reb-theme-bar-wrap {
  margin-top: 14px;
}

.reb-theme-stacked-bar {
  display: flex;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  gap: 1px;
}

.reb-theme-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  transition: flex 0.6s var(--ease);
}

.reb-theme-seg span {
  font-size: 10.5px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.reb-theme-seg--pos { background: #10B981; }
.reb-theme-seg--neu { background: #94A3B8; }
.reb-theme-seg--neg { background: #EF4444; }

/* Frequency bar fallback */
.reb-theme-freq-bar {
  height: 8px;
  background: color-mix(in srgb, var(--tc) 10%, var(--bg-subtle));
  border-radius: 4px;
  overflow: hidden;
}

.reb-theme-freq-fill {
  height: 100%;
  border-radius: 4px;
  background: var(--tc);
  transition: width 0.8s var(--ease);
}

/* Phrases */
.reb-theme-phrases {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--border-light);
}

.reb-theme-phrase {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  padding: 3px 10px;
  border-radius: 6px;
  font-style: italic;
}

.reb-theme-legend {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.reb-theme-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-secondary);
}

.reb-theme-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.reb-theme-legend-dot--pos { background: #10B981; }
.reb-theme-legend-dot--neu { background: #CBD5E1; }
.reb-theme-legend-dot--neg { background: #EF4444;
  display: inline-block;
}

/* ── Channel Strategy ─────────────────────────────────────────── */
.reb-channel-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
}

.reb-channel-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  padding: 0;
  overflow: hidden;
  animation: cardEnter 0.5s var(--ease) both;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.reb-channel-card:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,0.07);
  transform: translateY(-2px);
}

.reb-channel-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 20px 12px;
  background: color-mix(in srgb, var(--ch-color, var(--primary)) 6%, var(--bg-elevated));
  border-bottom: 1px solid color-mix(in srgb, var(--ch-color, var(--primary)) 10%, transparent);
}

.reb-channel-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ch-color, var(--primary)) 15%, transparent);
}

.reb-channel-name {
  font-size: 15px;
  font-weight: 750;
  color: var(--text);
}

.reb-channel-desc {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  margin-bottom: 14px;
  padding: 14px 20px 0;
}

.reb-channel-desc:empty {
  display: none;
}

.reb-channel-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 12px;
  color: var(--text-secondary);
  padding: 0 20px;
}

.reb-channel-header + .reb-channel-meta {
  padding-top: 14px;
}

.reb-channel-meta-label {
  font-size: 11px;
  font-weight: 650;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  flex-shrink: 0;
}

.reb-channel-topics {
  margin-top: 8px;
  padding: 0 20px;
}

.reb-channel-topic-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}

.reb-channel-topic-tag {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-subtle);
  padding: 3px 10px;
  border-radius: 6px;
}

.reb-channel-strategy {
  margin: 12px 20px 0;
  padding: 12px 0 16px;
  border-top: 1px solid var(--border-light);
}

.reb-channel-strategy p {
  font-size: 13px;
  line-height: 1.6;
  color: var(--text);
  margin-top: 6px;
}

/* ── Strategic Recs — Tone Box ────────────────────────────────── */
.reb-strategy-tone-box {
  background: linear-gradient(135deg, #EEF2FF 0%, #F5F3FF 50%, #FDF2F8 100%);
  border: 1px solid #C7D2FE;
  border-radius: 14px;
  padding: 20px 24px;
  margin-bottom: 20px;
  position: relative;
  overflow: hidden;
}

.reb-strategy-tone-box::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366F1, #A855F7, #EC4899);
}

.reb-strategy-tone-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 750;
  color: var(--primary);
  margin-bottom: 12px;
}

.reb-strategy-tone-text {
  font-size: 14px;
  line-height: 1.7;
  color: var(--text);
}

.reb-strategy-tone-evidence {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(99, 102, 241, 0.12);
  line-height: 1.6;
}

/* ── Custom Upload Section ─────────────────────────────────────── */
.reb-custom-upload-section {
  margin-top: 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 28px;
  animation: cardEnter 0.4s var(--ease) backwards;
}

.reb-custom-upload-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.reb-custom-upload-title-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reb-custom-upload-title {
  display: block;
  font-size: 15px;
  font-weight: 650;
}

.reb-custom-upload-desc {
  display: block;
  font-size: 13px;
  color: var(--text-tertiary);
  margin-top: 2px;
}

.reb-template-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12px;
  font-weight: 550;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.reb-template-link:hover {
  border-color: #8B5CF6;
  color: #8B5CF6;
  background: #F5F3FF;
}

.reb-upload-entries {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.reb-upload-entry {
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 16px 18px;
  transition: all var(--transition-fast);
  animation: cardEnter 0.3s var(--ease) backwards;
}

.reb-upload-entry:hover {
  border-color: var(--border);
}

.reb-upload-entry--pending {
  background: linear-gradient(90deg, rgba(245,158,11,0.06), rgba(245,158,11,0));
  border-color: rgba(245,158,11,0.45);
  box-shadow: inset 4px 0 0 0 #F59E0B;
}

.reb-upload-entry-header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.reb-upload-entry-header .reb-source-icon {
  width: 28px;
  height: 28px;
  font-size: 12px;
  border-radius: 6px;
}

.reb-upload-entry-info {
  flex: 1;
  min-width: 0;
}

.reb-upload-entry-name {
  display: block;
  font-size: 14px;
  font-weight: 620;
  color: var(--text);
}

.reb-upload-entry-meta {
  display: block;
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 1px;
}

.reb-upload-entry-remove {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-sm);
  border: none;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--transition-fast);
}

.reb-upload-entry-remove:hover {
  color: var(--error);
  background: var(--error-light);
}

.reb-upload-entry-preview {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}

.reb-upload-preview-item {
  font-size: 12px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  padding: 3px 10px;
  border-radius: 6px;
  font-style: italic;
  border: 1px solid var(--border-light);
}

.reb-upload-preview-more {
  font-size: 12px;
  color: var(--text-tertiary);
  padding: 3px 8px;
}

.reb-upload-add-area {
  padding-top: 4px;
}

.reb-upload-add-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.reb-upload-source-input {
  flex: 1;
  font-size: 13px !important;
  padding: 10px 14px !important;
}

.reb-upload-file-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  border-radius: var(--radius-md);
  border: 1px dashed var(--border);
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 13px;
  font-weight: 550;
  cursor: pointer;
  transition: all var(--transition-fast);
  white-space: nowrap;
  flex-shrink: 0;
}

.reb-upload-file-label:hover {
  border-color: #8B5CF6;
  color: #8B5CF6;
  background: #F5F3FF;
  border-style: solid;
}

.reb-upload-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  margin-top: 8px;
}

/* ── Footer ────────────────────────────────────────────────────── */
.reb-footer {
  margin-top: auto;
  padding: 24px 28px;
  text-align: center;
  font-size: 12px;
  font-weight: 450;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-light);
  letter-spacing: 0.02em;
}

/* ── Views ─────────────────────────────────────────────────────── */
.reb-view { display: none; }

.reb-view--active {
  display: block;
  animation: viewEnter 0.45s var(--ease) forwards;
}

/* ── Animations ────────────────────────────────────────────────── */
@keyframes viewEnter {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes cardEnter {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes sectionEnter {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes shimmer {
  0%        { left: -100%; }
  50%, 100% { left: 100%; }
}

@keyframes sparkle {
  0%, 100% { opacity: 1; transform: scale(1) rotate(0deg); }
  50%      { opacity: 0.55; transform: scale(1.15) rotate(12deg); }
}

@keyframes loaderRotate {
  to { transform: rotate(360deg); }
}

@keyframes loaderDash {
  0%   { stroke-dashoffset: 120; }
  50%  { stroke-dashoffset: 30; }
  100% { stroke-dashoffset: 120; }
}

@keyframes stepPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.35); }
  50%      { box-shadow: 0 0 0 6px rgba(99, 102, 241, 0); }
}

@keyframes pulseDot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.35; }
}

/* ── Responsive ────────────────────────────────────────────────── */
/* (V1 900px responsive removed — now using V2 responsive below) */

@media (max-width: 768px) {
  .reb-brief-form { padding: 28px 20px; }
  .reb-form-row { grid-template-columns: 1fr; }
  .reb-source-grid { grid-template-columns: 1fr; }
  .reb-hero { padding: 48px 0 32px; }
  .reb-reco-header { flex-direction: column; padding-top: 40px; }
  .reb-action-bar { flex-direction: column; }
  .reb-action-bar .reb-btn { width: 100%; }
  .reb-projects-grid { grid-template-columns: 1fr; }
  .reb-status-overall { flex-direction: column; gap: 24px; padding: 24px 20px; }
  .reb-status-ring-wrap { width: 100px; height: 100px; }
  .reb-status-meta { width: 100%; }
  .reb-analysis-overview { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .reb-analysis-split { grid-template-columns: 1fr; }
  .reb-chart-card { padding: 16px 14px; }
  .reb-overview-value { font-size: 22px; }
  .reb-content-tab { padding: 10px 14px; font-size: 13px; }
  .reb-persona-grid { grid-template-columns: 1fr; }
  .reb-competitor-grid { grid-template-columns: 1fr; }
  .reb-strategy-card { flex-direction: column; gap: 12px; }
  .reb-exec-card { padding: 20px; }
  .reb-exec-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .reb-exec-meta { flex-direction: column; gap: 4px; }
  .reb-key-insights-grid { grid-template-columns: 1fr; }
  .reb-ki-card { }
  .reb-themes-grid { grid-template-columns: 1fr; }
  .reb-channel-grid { grid-template-columns: 1fr; }
  .reb-custom-upload-header { flex-direction: column; gap: 12px; }
  .reb-upload-add-row { flex-direction: column; }
  .reb-upload-file-label { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  .reb-brief-form { padding: 24px 16px; }
  .reb-hero-subtitle br { display: none; }
  .reb-keyword-groups { grid-template-columns: 1fr; }
  .reb-btn--sm span { display: none; }
  .reb-analysis-meta-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .reb-analysis-header-top { flex-wrap: wrap; gap: 8px; }
}

/* ================================================================
   DATA EXPLORER
   ================================================================ */

.reb-explorer-header { padding: 32px 0 20px; }
.reb-explorer-header-top { margin-bottom: 10px; }

.reb-explorer-title {
  font-size: clamp(22px, 3vw, 28px);
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--text);
  margin-bottom: 4px;
}

.reb-explorer-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
}

/* ── Summary Stats ───────────────────────────────────────── */

.reb-explorer-summary {
  display: flex;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.reb-exs-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  /* 가용 폭을 균등 분할(grow). min 120px 이하면 줄바꿈.
     grow 가 없으면 카드들이 콘텐츠 폭으로만 떨어져 우측 빈 공간이 생김. */
  flex: 1 1 120px;
  min-width: 120px;
}

.reb-exs-card--wide { flex: 1 1 100%; min-width: 0; }

@media (max-width: 720px) {
  .reb-exs-card { padding: 14px 16px; }
  .reb-exs-value { font-size: 22px; }
}

.reb-exs-value {
  font-size: 24px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-bottom: 4px;
}

.reb-exs-label {
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}

.reb-exs-sentiment-bar {
  display: flex;
  height: 20px;
  border-radius: 6px;
  overflow: hidden;
  gap: 1px;
  margin-bottom: 8px;
}

.reb-exs-seg {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
}

.reb-exs-seg span {
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.15);
}

.reb-exs-seg--pos { background: #059669; }
.reb-exs-seg--neu { background: #94A3B8; }
.reb-exs-seg--neg { background: #DC2626; }
.reb-exs-seg--mix { background: #D97706; }

.reb-exs-sentiment-legend {
  display: flex;
  gap: 12px;
  font-size: 11px;
  color: var(--text-secondary);
  font-weight: 550;
  flex-wrap: wrap;
  align-items: center;
}

.reb-exs-sentiment-note {
  margin-left: auto;
  padding-left: 12px;
  color: var(--text-tertiary, #94A3B8);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: -0.01em;
  cursor: help;
}

@media (max-width: 640px) {
  .reb-exs-sentiment-note {
    margin-left: 0;
    padding-left: 0;
    width: 100%;
    margin-top: 4px;
  }
}

.reb-exs-dot {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}

/* ── Filters ─────────────────────────────────────────────── */

.reb-explorer-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.reb-explorer-search-wrap {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.reb-explorer-search-wrap svg {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}

.reb-explorer-search {
  width: 100%;
  padding: 8px 12px 8px 36px;
  font-family: inherit;
  font-size: 13px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--bg-elevated);
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reb-explorer-search:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.reb-explorer-select {
  appearance: none;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  background: var(--bg-elevated);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-full);
  padding: 8px 30px 8px 14px;
  cursor: pointer;
  transition: all 0.2s ease;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2.5' stroke-linecap='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
}

.reb-explorer-select:hover {
  border-color: var(--primary);
  background-color: var(--primary-light);
  color: var(--primary);
}

.reb-explorer-select:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ── Item Cards ──────────────────────────────────────────── */

.reb-explorer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.reb-explorer-empty {
  text-align: center;
  padding: 60px 20px;
  color: var(--text-tertiary);
  font-size: 14px;
}

.reb-exi-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
  animation: cardEnter 0.3s var(--ease) both;
}

.reb-exi-card:hover {
  box-shadow: 0 2px 10px rgba(0,0,0,0.04);
  border-color: var(--border);
}

.reb-exi-main {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px;
  cursor: pointer;
  user-select: none;
}

.reb-exi-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  padding-top: 2px;
}

.reb-exi-relevance {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--rel-color);
  background: color-mix(in srgb, var(--rel-color) 8%, var(--bg-subtle));
  border: 1px solid color-mix(in srgb, var(--rel-color) 15%, transparent);
}

.reb-exi-sentiment {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: var(--radius-full);
  white-space: nowrap;
}

.reb-exi-center { flex: 1; min-width: 0; }

.reb-exi-title-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
}

.reb-exi-title {
  font-size: 14px;
  font-weight: 680;
  color: var(--text);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.reb-exi-link {
  flex-shrink: 0;
  color: var(--text-tertiary);
  opacity: 0.6;
  transition: opacity 0.2s;
}

.reb-exi-link:hover { opacity: 1; color: var(--primary); }

.reb-exi-meta {
  display: flex;
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}

.reb-exi-source, .reb-exi-date, .reb-exi-type {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  padding: 1px 8px;
  border-radius: var(--radius-full);
}

.reb-exi-source { color: var(--primary); background: var(--primary-light); }

.reb-exi-desc {
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
  margin: 0;
}

.reb-exi-toggle {
  flex-shrink: 0;
  padding-top: 4px;
  color: var(--text-tertiary);
  transition: transform 0.3s var(--ease);
}

.reb-exi-card--open .reb-exi-toggle { transform: rotate(180deg); }

.reb-exi-card--noai { opacity: 0.6; }
.reb-exi-card--noai:hover { opacity: 0.8; }

.reb-exi-noai {
  font-size: 13px;
  color: var(--text-tertiary);
  text-align: center;
  padding: 8px 0;
}

/* ── Detail (Accordion) ─────────────────────────────────── */

.reb-exi-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s var(--ease), padding 0.35s var(--ease);
  padding: 0 18px;
  border-top: 0 solid var(--border-light);
}

.reb-exi-card--open .reb-exi-detail {
  max-height: 600px;
  padding: 14px 18px 18px;
  border-top-width: 1px;
}

.reb-exi-detail-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
  margin-bottom: 14px;
}

.reb-exi-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.reb-exi-dl {
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  letter-spacing: 0.03em;
}

.reb-exi-dv {
  font-size: 13px;
  color: var(--text);
  line-height: 1.5;
  font-weight: 500;
}

.reb-exi-detail-section { margin-bottom: 10px; }

.reb-exi-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}

.reb-exi-tag {
  font-size: 11.5px;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary);
  border: 1px solid rgba(99, 102, 241, 0.1);
}

.reb-exi-tag--strategy {
  background: #FFFBEB;
  color: #92400E;
  border-color: rgba(217, 119, 6, 0.12);
}

.reb-exi-points {
  margin: 4px 0 0;
  padding-left: 16px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.reb-exi-quotes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}

.reb-exi-quote {
  font-size: 12.5px;
  color: var(--text-secondary);
  font-style: italic;
  line-height: 1.5;
}

/* ── Pagination ──────────────────────────────────────────── */

.reb-explorer-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0 40px;
  gap: 16px;
}

.reb-exp-page-info {
  font-size: 12.5px;
  color: var(--text-tertiary);
  font-weight: 550;
}

.reb-exp-page-btns {
  display: flex;
  align-items: center;
  gap: 4px;
}

.reb-exp-page {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.reb-exp-page:hover:not(:disabled) {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-light);
}

.reb-exp-page--active {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}

.reb-exp-page:disabled { opacity: 0.3; cursor: default; }

.reb-exp-ellipsis {
  font-size: 13px;
  color: var(--text-tertiary);
  padding: 0 4px;
}

/* ── Explorer Responsive ─────────────────────────────────── */

@media (max-width: 768px) {
  .reb-explorer-filters { flex-direction: column; }
  .reb-explorer-search-wrap { min-width: 100%; }
  .reb-exi-detail-grid { grid-template-columns: 1fr; }
  .reb-exs-card { min-width: 100px; }
  .reb-exi-main { gap: 10px; }
  .reb-exi-desc { display: none; }
}

/* ================================================================
   MEDIA PLAN INSIGHTS (reuses analysis dashboard design system)
   ================================================================ */

.reb-mp-pillars {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
  border-top: 1px solid var(--border-light);
}
.reb-mp-pillar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-light);
}
.reb-mp-pillar:last-child {
  border-bottom: none;
}
.reb-mp-pillar-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--mp-bg);
}
.reb-mp-pillar-content {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1;
}
.reb-mp-pillar-label {
  flex-shrink: 0;
  min-width: 100px;
  font-size: 12px;
  font-weight: 700;
  color: var(--mp-color);
}
.reb-mp-pillar-value {
  font-size: 13.5px;
  font-weight: 450;
  line-height: 1.65;
  color: var(--text);
}
@media (max-width: 640px) {
  .reb-mp-pillar-content {
    flex-direction: column;
    gap: 2px;
  }
  .reb-mp-pillar-label { min-width: unset; }
}

/* ── Media card internals ─────────────────────────────────── */
/* 환원 v5.20: chip cloud → stacked list.
   "포맷명: 설명" 패턴이 길어 wordy 했던 문제 해결.
   format-name 은 채널 컬러(--ch-color) 액센트, desc 는 readable body 톤. */
.reb-mp-formats {
  list-style: none;
  margin: 0 0 14px;
  padding: 14px 20px 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.reb-mp-format-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 9px 0;
  border-bottom: 1px dashed var(--border-light);
}
.reb-mp-format-item:first-child { padding-top: 2px; }
.reb-mp-format-item:last-child {
  padding-bottom: 2px;
  border-bottom: none;
}
.reb-mp-format-name {
  font-size: 11px;
  font-weight: 720;
  letter-spacing: 0.02em;
  color: var(--ch-color, var(--primary));
  line-height: 1.3;
}
.reb-mp-format-desc {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text);
}
.reb-mp-spec-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--border-light);
}
.reb-mp-spec-table th,
.reb-mp-spec-table td {
  padding: 9px 20px;
  font-size: 13px;
  line-height: 1.55;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--border-light);
}
.reb-mp-spec-table th {
  width: 80px;
  font-weight: 650;
  color: var(--text-tertiary);
  font-size: 11.5px;
  letter-spacing: 0.01em;
  white-space: nowrap;
  padding-right: 0;
}
.reb-mp-spec-table td {
  color: var(--text);
  font-weight: 450;
}
.reb-mp-spec-table tr:last-child th,
.reb-mp-spec-table tr:last-child td {
  border-bottom: none;
}
.reb-mp-rationale {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  padding: 12px 20px 16px;
  margin: 0 0 0;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-tertiary);
  border-top: 1px solid var(--border-light);
}
.reb-mp-rationale svg {
  flex-shrink: 0;
  margin-top: 2px;
  opacity: 0.45;
}
.reb-mp-support-group {
  margin-bottom: 28px;
}
.reb-mp-support-group:last-child {
  margin-bottom: 0;
}
.reb-mp-support-group-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-secondary);
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}
.reb-mp-spec-table--compact th,
.reb-mp-spec-table--compact td {
  padding: 6px 0;
}
.reb-mp-spec-table--compact th {
  width: 66px;
}

/* ── Media plan utility cards ──────────────────────────── */
.reb-mp-summary-card {
  margin-bottom: 14px;
  padding: 18px 22px;
}
.reb-mp-summary-text {
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}
.reb-mp-tips-card {
  margin-top: 12px;
  padding: 18px 22px;
  background: #F0FDF9;
  border-radius: 14px;
  border: 1px solid #D1FAE5;
}
.reb-mp-tips-title {
  font-size: 13px;
  font-weight: 700;
  color: #065F46;
  margin: 0 0 10px;
}
.reb-mp-tips-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reb-mp-tips-item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
  color: #065F46;
}
.reb-mp-tips-arrow {
  flex-shrink: 0;
  font-weight: 600;
}

/* ── Media plan note cards (cautions, next steps) ──── */
.reb-mp-note-card {
  margin-top: 14px;
  padding: 18px 22px;
  border-radius: 14px;
  border: 1px solid;
}
.reb-mp-note--caution {
  background: #FFFBF5;
  border-color: #FDE68A;
}
.reb-mp-note--next {
  background: #F0F4FF;
  border-color: #BFDBFE;
}
.reb-mp-note-title {
  font-size: 13px;
  font-weight: 700;
  margin: 0 0 10px;
}
.reb-mp-note--caution .reb-mp-note-title { color: #92400E; }
.reb-mp-note--next .reb-mp-note-title { color: #1E40AF; }
.reb-mp-note-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reb-mp-note-item {
  display: flex;
  gap: 8px;
  font-size: 13px;
  line-height: 1.55;
}
.reb-mp-note--caution .reb-mp-note-item { color: #92400E; }
.reb-mp-note--next .reb-mp-note-item { color: #1E40AF; }
.reb-mp-note-bullet {
  flex-shrink: 0;
  font-weight: 600;
}

/* ── Chart insight panels (inside chart cards) ──────── */
.reb-chart-insight-inner {
  padding: 24px 28px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
}
/* 환원 v5.2: border-left accent widget 패턴 제거 — REB 다른 섹션 desc/summary 와 톤 정합.
   keyword cloud / entity network 의 summary 박스 공유. */
.reb-ei-summary {
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.7;
  color: var(--text);
  margin: 0 0 18px;
  padding: 14px 18px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
}

/* ── Keyword / Entity Insight (shared card grid) ──── */
.reb-ki-groups-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 16px;
}

/* 환원 v5.5: 주목/부정 키워드 50:50 row — top_keyword_groups grid 와 분리하여
   2 카드가 grid 마지막 행에 orphan(narrow) 되는 현상 해소. PPT 캡처 시 카드 폭 균형. */
.reb-ki-meta-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 16px;
}
@media (max-width: 640px) {
  .reb-ki-meta-row { grid-template-columns: 1fr; }
}
.reb-ki-group-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 10px;
  padding: 14px 18px;
}
.reb-ki-group-name {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 8px;
}
.reb-ki-group-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.reb-ki-group-tags + .reb-ki-group-insight {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border-light);
}
/* 환원 v5.2: border-radius 14px → var(--radius-full) — REB chip 표준(pill) 정합 */
.reb-ki-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 550;
  color: var(--ki-c);
  background: var(--ki-bg);
  padding: 4px 11px;
  border-radius: var(--radius-full);
  border: 1px solid color-mix(in srgb, var(--ki-c) 10%, transparent);
}
.reb-ki-group-insight {
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  margin: 0;
}
/* 환원 v5.2: pos/neg 카드 강조 톤다운 — border 강한 색 → muted accent (다른 키워드 그룹 카드와 weight 정합).
   group name 만 의미색으로 강조 (긍/부정 의미 보존). */
.reb-ki-group--pos {
  border-color: color-mix(in srgb, #059669 22%, var(--border-light));
}
.reb-ki-group--pos .reb-ki-group-name {
  color: #065F46;
}
.reb-ki-group--neg {
  border-color: color-mix(in srgb, #DC2626 22%, var(--border-light));
}
.reb-ki-group--neg .reb-ki-group-name {
  color: #991B1B;
}

/* ── Tone & mood per concept ────────────────────────── */
.reb-sb-tone {
  display: flex;
  gap: 6px;
  align-items: flex-start;
  margin-top: 8px;
  padding: 8px 10px;
  background: #FAFAF9;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.reb-sb-tone svg {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: 0.5;
}

/* ── Creative insight 1-col layout ──────────────────── */
/* ── Creative Insight Cards (top-down flow) ──────── */
.reb-ci-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.reb-ci-row {
  animation: cardEnter 0.5s var(--ease) both;
}
.reb-ci-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 14px;
  overflow: hidden;
  position: relative;
}
.reb-ci-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px 0;
  gap: 12px;
  flex-wrap: wrap; /* 모바일에서 좌측 컨셉명 + 우측 "다시 생성" 버튼이 한 줄에 못 들어가면 줄바꿈 */
}
/* 모바일에서 컨셉 카드 사이 구분을 강하게 — 카드 간 spacing 확대 + shadow 살짝 부여.
   컨셉 1 의 4컷 storyboard 뒤에 바로 컨셉 2 가 와도 경계가 명확히 보이도록. */
@media (max-width: 900px) {
  .reb-ci-list { gap: 22px; }
  .reb-ci-card {
    box-shadow: var(--shadow-sm);
    border-color: var(--border);
  }
}
.reb-ci-top-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.reb-ci-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 6px;
  background: var(--ci-bg);
  color: var(--ci-color);
  font-size: 12px;
  font-weight: 800;
  flex-shrink: 0;
}
.reb-ci-card-body {
  padding: 10px 20px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reb-ci-title {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.025em;
  line-height: 1.35;
}
.reb-ci-big-idea {
  margin: 0;
  padding: 10px 16px;
  background: var(--ci-bg);
  border-left: 3px solid var(--ci-color);
  border-radius: 0 8px 8px 0;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.55;
  color: var(--ci-color);
  quotes: none;
}
.reb-ci-desc {
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* ── Storytelling block ── */
.reb-ci-block {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reb-ci-block-label {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 10.5px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.reb-ci-block-label svg { opacity: 0.4; width: 10px; height: 10px; }
.reb-ci-scenarios {
  display: flex;
  flex-direction: column;
  background: var(--bg-secondary);
  border-radius: 8px;
  overflow: hidden;
}
.reb-ci-scenario {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.reb-ci-scenario + .reb-ci-scenario {
  border-top: 1px solid var(--border-light);
}
.reb-ci-scenario-num {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--ci-color, var(--primary));
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 1;
}

/* ── Meta grid (tone, format) ── */
.reb-ci-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.reb-ci-meta-cell {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  background: var(--bg-secondary);
  border-radius: 8px;
  border: 1px solid var(--border-light);
}
.reb-ci-meta-label {
  font-size: 10px;
  font-weight: 700;
  color: var(--text-tertiary);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.reb-ci-meta-value {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text);
  font-weight: 500;
}

/* ── Hook (expected reaction) ── */
.reb-ci-hook {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 14px;
  background: var(--ci-bg);
  border-radius: 8px;
}
.reb-ci-hook-label {
  flex-shrink: 0;
  font-size: 10px;
  font-weight: 700;
  color: var(--ci-color);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  opacity: 0.65;
}
.reb-ci-hook-value {
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--ci-color);
  font-weight: 600;
}

/* ── Evidence ── */
/* .reb-ci-evidence / svg — 통일 규칙(.reb-*-evidence 공유) 으로 흡수, 환원 v3 */

/* ── Avoid directions ── */
.reb-ci-avoid-card {
  margin-top: 14px;
  padding: 18px 20px;
  background: #FFFBFB;
  border-color: #FECACA;
}
.reb-ci-avoid-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.reb-ci-avoid-item {
  display: flex;
  gap: 10px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 10px 0;
}
.reb-ci-avoid-item + .reb-ci-avoid-item {
  border-top: 1px solid rgba(220,38,38,0.1);
}
.reb-ci-avoid-x {
  flex-shrink: 0;
  font-weight: 700;
  color: #DC2626;
  margin-top: 1px;
}
.reb-ci-avoid-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.reb-ci-avoid-tags {
  display: flex;
  gap: 6px;
  align-items: center;
}
.reb-ci-avoid-cat {
  font-size: 10px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: 0.02em;
}
.reb-ci-avoid-risk {
  font-size: 9.5px;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 3px;
  letter-spacing: 0.02em;
}
.reb-ci-avoid-risk--high {
  color: #991B1B;
  background: #FEE2E2;
}
.reb-ci-avoid-risk--medium {
  color: #92400E;
  background: #FEF3C7;
}
.reb-sb-panel-slot:empty { display: none; }
.reb-sb-panel-slot {
  border-top: 1px solid var(--border-light);
}

/* ── Storyboard generation ─────────────────────────── */
.reb-sb-gen-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 600;
  color: var(--ci-color, var(--primary));
  background: var(--ci-bg, var(--primary-bg));
  border: 1px solid color-mix(in srgb, var(--ci-color, var(--primary)) 18%, transparent);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.reb-sb-gen-btn:hover:not(:disabled) {
  background: color-mix(in srgb, var(--ci-color, var(--primary)) 14%, white);
  border-color: color-mix(in srgb, var(--ci-color, var(--primary)) 35%, transparent);
}
.reb-sb-gen-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
.reb-sb-spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid color-mix(in srgb, var(--primary) 25%, transparent);
  border-top-color: var(--primary);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
.reb-sb-spinner--lg {
  width: 28px;
  height: 28px;
  border-width: 3px;
}
@keyframes spin { to { transform: rotate(360deg); } }

.reb-sb-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 48px 20px;
  color: var(--text-tertiary);
  font-size: 13px;
}
.reb-sb-timeline {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
}
.reb-sb-frame {
  border-right: 1px solid var(--border-light);
}
.reb-sb-frame:last-child { border-right: none; }
.reb-sb-frame-img {
  position: relative;
  aspect-ratio: 16/9;
  overflow: hidden;
  background: #1a1a2e;
}
.reb-sb-frame-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reb-sb-frame-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: rgba(255,255,255,0.5);
}
.reb-sb-frame-body {
  padding: 12px 14px;
}
.reb-sb-frame-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--text);
  margin: 0 0 4px;
  line-height: 1.4;
}
.reb-sb-frame-copy {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--primary);
  margin: 0 0 4px;
  line-height: 1.5;
}
.reb-sb-frame-audio {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-tertiary);
  margin: 0;
}
.reb-sb-error {
  padding: 20px 22px;
  font-size: 13px;
  color: #DC2626;
  margin: 0;
}
/* 태블릿/모바일 — 4컷은 항상 2x2 로 유지.
   1열 stack 으로 떨어뜨리면 한 컨셉이 화면 4프레임만큼 길게 늘어나, 스크롤 중에 다음
   컨셉 카드와 시각적으로 섞여 "꼬여" 보이는 문제가 생김. 좁은 폭에서도 2x2 가 비교 가독성 ↑. */
@media (max-width: 900px) {
  .reb-sb-timeline { grid-template-columns: repeat(2, 1fr); }
  .reb-sb-frame { border-right: 1px solid var(--border-light); }
  .reb-sb-frame:nth-child(2n) { border-right: none; }
  .reb-sb-frame:nth-child(1),
  .reb-sb-frame:nth-child(2) { border-bottom: 1px solid var(--border-light); }
  .reb-sb-frame:nth-child(3),
  .reb-sb-frame:nth-child(4) { border-bottom: none; }
}
/* 매우 좁은 폭(360px 이하)에서도 2x2 유지하되 padding/폰트 축소 */
@media (max-width: 420px) {
  .reb-sb-frame-body { padding: 10px 10px; }
  .reb-sb-frame-title { font-size: 12px; }
  .reb-sb-frame-copy  { font-size: 11.5px; }
  .reb-sb-frame-audio { font-size: 10px; }
}

/* Storyboard clickable hint */
.reb-sb-clickable { cursor: pointer; position: relative; }
.reb-sb-zoom-hint {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.45);
  border-radius: 6px;
  color: #fff;
  opacity: 0;
  transition: opacity 0.15s;
  backdrop-filter: blur(4px);
}
.reb-sb-clickable:hover .reb-sb-zoom-hint { opacity: 1; }

/* Storyboard Lightbox */
.reb-sb-lightbox {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.reb-sb-lb--open { opacity: 1; }
.reb-sb-lb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.75);
  backdrop-filter: blur(8px);
}
.reb-sb-lb-content {
  position: relative;
  width: 92vw;
  max-width: 1200px;
  max-height: 88vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 24px 80px rgba(0,0,0,0.35);
  padding: 32px;
}
.reb-sb-lb-close {
  position: absolute;
  top: 12px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--text-tertiary);
  cursor: pointer;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  transition: background 0.15s;
}
.reb-sb-lb-close:hover { background: var(--bg-secondary); color: var(--text-primary); }
.reb-sb-lb-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}
.reb-sb-lb-frame {
  position: relative;
  border: 1px solid var(--border-light);
  border-radius: 12px;
  overflow: hidden;
  background: var(--bg-secondary);
}
.reb-sb-lb-num {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 26px;
  height: 26px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.55);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  border-radius: 50%;
  z-index: 1;
  backdrop-filter: blur(4px);
}
.reb-sb-lb-img-wrap {
  aspect-ratio: 16/9;
  background: #1a1a2e;
}
.reb-sb-lb-img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.reb-sb-lb-info {
  padding: 14px 16px;
}
.reb-sb-lb-info h4 {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
}
.reb-sb-lb-copy {
  margin: 0 0 4px;
  font-size: 13px;
  color: var(--primary);
  font-style: italic;
}
.reb-sb-lb-audio {
  margin: 0;
  font-size: 12px;
  color: var(--text-tertiary);
}
@media (max-width: 640px) {
  .reb-sb-lb-grid { grid-template-columns: 1fr; }
  .reb-sb-lb-content { padding: 20px; width: 96vw; }
}


/* ================================================================
   AI 어시스턴트 — 사이드 드로어 채팅
   ================================================================ */

/* ── Fixed Side Tab ───────────────────────────────────────────── */
.reb-chat-tab {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 148;
  display: none;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 8px;
  background: var(--primary);
  color: #fff;
  border: none;
  border-radius: 10px 0 0 10px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: -2px 2px 12px rgba(79, 70, 229, 0.25);
  transition: transform 0.3s var(--ease), opacity 0.3s var(--ease), background 0.2s;
  writing-mode: horizontal-tb;
}
.reb-chat-tab:hover {
  background: var(--primary-dark, #4338CA);
  transform: translateY(-50%) translateX(-2px);
}
.reb-chat-tab svg {
  flex-shrink: 0;
}
.reb-chat-tab-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.reb-chat-tab--hidden {
  transform: translateY(-50%) translateX(100%);
  opacity: 0;
  pointer-events: none;
}

/* ── Backdrop ─────────────────────────────────────────────────── */
.reb-chat-backdrop {
  position: fixed;
  inset: 0;
  z-index: 149;
  background: rgba(0, 0, 0, 0);
  pointer-events: none;
  transition: background 0.4s var(--ease);
}
.reb-chat-backdrop--visible {
  background: rgba(0, 0, 0, 0.12);
  pointer-events: auto;
}

/* ── Drawer Container ─────────────────────────────────────────── */
.reb-chat-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 440px;
  height: 100vh;
  height: 100dvh;
  z-index: 150;
  pointer-events: none;
  transform: translateX(100%);
  transition: transform 0.4s var(--ease);
}
.reb-chat-drawer.reb-chat-drawer--open {
  pointer-events: auto;
  transform: translateX(0);
}

/* ── Panel ────────────────────────────────────────────────────── */
.reb-chat-panel {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--bg-elevated);
  border-left: 1px solid var(--border-light);
  box-shadow: -8px 0 32px rgba(0, 0, 0, 0.08);
}

/* ── Header ───────────────────────────────────────────────────── */
.reb-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.reb-chat-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.reb-chat-header-icon {
  color: var(--primary);
  flex-shrink: 0;
}
.reb-chat-header-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.01em;
}
.reb-chat-header-project {
  display: block;
  font-size: 11px;
  color: var(--text-tertiary);
  margin-top: 1px;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reb-chat-header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}
.reb-chat-header-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.reb-chat-header-btn:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

/* ── Messages Area ────────────────────────────────────────────── */
.reb-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.reb-chat-messages::-webkit-scrollbar { width: 4px; }
.reb-chat-messages::-webkit-scrollbar-track { background: transparent; }
.reb-chat-messages::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.reb-chat-messages::-webkit-scrollbar-thumb:hover { background: var(--text-tertiary); }

/* ── Empty State ──────────────────────────────────────────────── */
.reb-chat-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
  padding: 24px 16px;
}
.reb-chat-empty-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary-light);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  color: var(--primary);
}
.reb-chat-empty-title {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 6px;
}
.reb-chat-empty-desc {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 20px;
  line-height: 1.5;
}

/* ── Suggestion Chips ─────────────────────────────────────────── */
.reb-chat-suggestions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}
.reb-chat-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  color: var(--text);
  font-size: 13px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast), transform var(--transition-fast);
  font-family: inherit;
}
.reb-chat-chip svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color var(--transition-fast);
}
.reb-chat-chip:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary);
  transform: translateX(2px);
}
.reb-chat-chip:hover svg {
  color: var(--primary);
}

/* ── Message Bubbles ──────────────────────────────────────────── */
.reb-chat-msg {
  display: flex;
  flex-direction: column;
  max-width: 100%;
  animation: rebChatMsgIn 0.3s var(--ease) forwards;
}
@keyframes rebChatMsgIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.reb-chat-msg--user {
  align-items: flex-end;
}
.reb-chat-msg--ai {
  align-items: flex-start;
  width: 100%;
}

.reb-chat-bubble {
  padding: 12px 16px;
  border-radius: var(--radius-md);
  font-size: 13.5px;
  line-height: 1.7;
  word-break: break-word;
}
.reb-chat-msg--user .reb-chat-bubble {
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 4px;
  max-width: 85%;
}
.reb-chat-msg--ai .reb-chat-bubble {
  background: #FAFAFF;
  color: var(--text);
  border: 1px solid var(--border-light);
  border-bottom-left-radius: 4px;
  padding: 0;
  overflow: hidden;
  width: 100%;
}
.reb-chat-ai-body {
  padding: 16px 24px;
}
.reb-chat-msg--ai .reb-chat-bubble strong {
  font-weight: 680;
  color: var(--text);
}
.reb-chat-msg--ai .reb-chat-bubble ul,
.reb-chat-msg--ai .reb-chat-bubble ol {
  padding-left: 18px;
  margin: 8px 0;
}
.reb-chat-msg--ai .reb-chat-bubble li {
  margin-bottom: 5px;
}
.reb-chat-msg--ai .reb-chat-bubble li::marker {
  color: var(--primary);
}

/* ── AI Answer Header (confidence + copy) ─────────────────────── */
.reb-chat-ai-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: var(--bg-subtle);
  border-bottom: 1px solid var(--border-light);
  gap: 8px;
}
.reb-chat-ai-copy {
  display: flex;
  align-items: center;
  gap: 4px;
  border: none;
  background: none;
  color: var(--text-tertiary);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  font-family: inherit;
  transition: color var(--transition-fast), background var(--transition-fast);
}
.reb-chat-ai-copy:hover {
  color: var(--text);
  background: var(--bg-elevated);
}
.reb-chat-ai-copy svg { flex-shrink: 0; }

/* ── Evidence inside bubble ───────────────────────────────────── */
.reb-chat-evidence-wrap {
  border-top: 1px solid var(--border-light);
  padding: 10px 12px;
  background: var(--bg-subtle);
}

/* ── Evidence Block ───────────────────────────────────────────── */
.reb-chat-evidence {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reb-chat-evidence-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 9px 12px;
  background: var(--primary-light);
  border-left: 3px solid var(--primary);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.reb-chat-evidence-icon {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
  color: var(--primary);
  margin-top: 2px;
}
.reb-chat-evidence-text {
  flex: 1;
}
.reb-chat-evidence-source {
  display: inline-block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-subtle);
  padding: 2px 7px;
  border-radius: var(--radius-full);
  margin-left: 4px;
  vertical-align: middle;
}

/* ── Confidence Badge ─────────────────────────────────────────── */
.reb-chat-confidence {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10.5px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-full);
}
.reb-chat-confidence--high   { background: var(--success-light); color: var(--success); }
.reb-chat-confidence--medium { background: var(--ai-light); color: var(--ai); }
.reb-chat-confidence--low    { background: var(--error-light); color: var(--error); }

/* ── Typing Indicator ─────────────────────────────────────────── */
.reb-chat-typing {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: #FAFAFF;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  border-bottom-left-radius: 4px;
  width: fit-content;
}
.reb-chat-typing-dots {
  display: flex;
  align-items: center;
  gap: 3px;
  flex-shrink: 0;
}
.reb-chat-typing-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.4;
  animation: rebTypingPulse 1.4s infinite ease-in-out;
}
.reb-chat-typing-dot:nth-child(2) { animation-delay: 0.2s; }
.reb-chat-typing-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes rebTypingPulse {
  0%, 80%, 100% { opacity: 0.4; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.15); }
}
.reb-chat-typing-text {
  font-size: 12.5px;
  color: var(--text-secondary);
  animation: rebTypingFade 0.4s var(--ease) forwards;
}
@keyframes rebTypingFade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Inline Visualizations ────────────────────────────────────── */
.reb-chat-viz {
  margin: 10px 0 4px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  width: 100%;
  box-sizing: border-box;
}
.reb-chat-viz-title {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.3px;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border-light);
}

/* Bar Chart */
.reb-chat-viz-bar-row {
  padding: 8px 0;
}
.reb-chat-viz-bar-row + .reb-chat-viz-bar-row {
  border-top: 1px solid var(--border-light);
}
.reb-chat-viz-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 5px;
}
.reb-chat-viz-bar-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
}
.reb-chat-viz-bar-val {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-primary);
  flex-shrink: 0;
}
.reb-chat-viz-bar-track {
  width: 100%;
  height: 18px;
  background: #F1F2F6;
  border-radius: 10px;
  overflow: hidden;
}
.reb-chat-viz-bar-fill {
  display: block;
  height: 18px;
  border-radius: 10px;
}

/* Donut Chart */
.reb-chat-viz-donut-wrap {
  display: flex;
  align-items: center;
  gap: 16px;
}
.reb-chat-viz-donut-ring {
  flex-shrink: 0;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  position: relative;
}
.reb-chat-viz-donut-ring::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
}
.reb-chat-viz-donut-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reb-chat-viz-legend-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
}
.reb-chat-viz-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.reb-chat-viz-legend-label {
  flex: 1;
  color: var(--text-secondary);
}
.reb-chat-viz-legend-val {
  font-weight: 700;
  color: var(--text-primary);
}

/* Table */
.reb-chat-viz--table table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11.5px;
}
.reb-chat-viz--table th {
  text-align: left;
  font-weight: 700;
  color: var(--text-secondary);
  padding: 6px 8px;
  border-bottom: 2px solid var(--border);
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.reb-chat-viz--table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border-light);
  color: var(--text-primary);
}
.reb-chat-viz--table tr:last-child td {
  border-bottom: none;
}
.reb-chat-viz--table tr:hover td {
  background: var(--bg-subtle);
}

/* ── Follow-up Questions ──────────────────────────────────────── */
.reb-chat-followups {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
  width: 100%;
}
.reb-chat-followup {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-size: 12.5px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: border-color var(--transition-fast), color var(--transition-fast), background var(--transition-fast);
}
.reb-chat-followup svg {
  flex-shrink: 0;
  color: var(--text-tertiary);
  transition: color var(--transition-fast), transform var(--transition-fast);
}
.reb-chat-followup:hover {
  border-color: var(--primary);
  border-style: solid;
  color: var(--primary);
  background: var(--primary-light);
}
.reb-chat-followup:hover svg {
  color: var(--primary);
  transform: translateX(2px);
}

/* ── Input Area ───────────────────────────────────────────────── */
.reb-chat-input-area {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-elevated);
  flex-shrink: 0;
}
.reb-chat-input-wrap {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 8px 8px 8px 16px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.reb-chat-input-wrap:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.08);
}
.reb-chat-input {
  flex: 1;
  border: none;
  background: none;
  font-size: 13.5px;
  font-family: inherit;
  color: var(--text);
  resize: none;
  outline: none;
  max-height: 120px;
  line-height: 1.5;
  padding: 4px 0;
}
.reb-chat-input::placeholder {
  color: var(--text-tertiary);
}
.reb-chat-send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: none;
  border-radius: var(--radius-sm);
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--transition-fast), opacity var(--transition-fast);
}
.reb-chat-send:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}
.reb-chat-send:not(:disabled):hover {
  background: var(--primary-hover);
}
.reb-chat-input-hint {
  display: none;
}

/* ── Minimized Pill ───────────────────────────────────────────── */
.reb-chat-pill {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 150;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  border-radius: var(--radius-full);
  background: var(--primary);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  box-shadow: var(--shadow-lg);
  transition: background var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
  animation: rebChatPillIn 0.4s var(--ease) forwards;
}
.reb-chat-pill:hover {
  background: var(--primary-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}
@keyframes rebChatPillIn {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (min-width: 1600px) {
  .reb-chat-drawer { width: 480px; }
}
@media (min-width: 1025px) and (max-width: 1440px) {
  .reb-chat-drawer { width: 400px; }
}
@media (max-width: 1024px) {
  .reb-chat-drawer {
    width: 100%;
    height: 70vh;
    top: auto;
    bottom: 0;
    transform: translateY(100%);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    overflow: hidden;
  }
  .reb-chat-drawer.reb-chat-drawer--open {
    transform: translateY(0);
  }
  .reb-chat-panel {
    border-left: none;
    border-top: 1px solid var(--border-light);
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  }
  .reb-chat-backdrop--visible {
    background: rgba(0, 0, 0, 0.25);
  }
  .reb-chat-tab {
    top: auto;
    /* iOS 하단 홈 인디케이터·주소창과 겹치지 않게 safe-area 보정 + 시각적 무게도 화면 하단 1/4 정도로 올림 */
    bottom: calc(96px + env(safe-area-inset-bottom, 0px));
    transform: translateY(0);
    border-radius: 10px 0 0 10px;
  }
  .reb-chat-tab:hover {
    transform: translateX(-2px);
  }
  .reb-chat-tab--hidden {
    transform: translateX(100%);
  }
}


/* ================================================================
   RE:B V2 — Main Page Redesign
   Award-level visual overhaul for the landing / projects view
   ================================================================ */

/* ── V2 Header — transparent over dark hero (home view only) ──── */
.reb-hero-active .reb-header {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  position: absolute;
  width: 100%;
  z-index: 100;
}
.reb-hero-active .reb-logo-en { color: #fff; }
.reb-hero-active .reb-logo-colon { color: #818CF8; }
.reb-hero-active .reb-logo-divider { background: rgba(255,255,255,0.15); }
.reb-hero-active .reb-logo-kr { color: rgba(255,255,255,0.5); }
.reb-hero-active .reb-nav .reb-btn-primary {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: none;
  backdrop-filter: blur(12px);
}
.reb-hero-active .reb-nav .reb-btn-primary:hover {
  background: rgba(255,255,255,0.18);
  box-shadow: 0 4px 20px rgba(99,102,241,0.3);
}

/* ── Landing Dark Hero ────────────────────────────────────────── */
.reb-landing-hero {
  position: relative;
  overflow: hidden;
  background: #0B0B14;
  padding: 160px 0 100px;
  min-height: 560px;
  display: flex;
  align-items: center;
}

.reb-landing-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.reb-landing-hero-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(100px);
}
.reb-landing-hero-orb--1 {
  width: 600px; height: 600px;
  background: radial-gradient(circle, #6366F1 0%, transparent 70%);
  top: -200px; right: -100px;
  opacity: 0.3;
  animation: reb-orb-drift 25s ease-in-out infinite;
}
.reb-landing-hero-orb--2 {
  width: 450px; height: 450px;
  background: radial-gradient(circle, #818CF8 0%, transparent 70%);
  bottom: -150px; left: -80px;
  opacity: 0.18;
  animation: reb-orb-drift 20s ease-in-out infinite reverse;
}
.reb-landing-hero-orb--3 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #D97706 0%, transparent 70%);
  top: 40%; left: 55%;
  opacity: 0.08;
  animation: reb-orb-drift 30s ease-in-out infinite;
  animation-delay: -8s;
}

.reb-landing-hero-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 50%, black 20%, transparent 70%);
}

.reb-landing-hero-noise {
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  background-size: 200px;
  opacity: 0.5;
}

@keyframes reb-orb-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(40px, -30px) scale(1.08); }
  66%      { transform: translate(-25px, 20px) scale(0.92); }
}

.reb-landing-hero-content {
  position: relative;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: center;
}

.reb-landing-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.55);
  margin-bottom: 32px;
  padding: 6px 16px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 100px;
  background: rgba(255,255,255,0.03);
  animation: reb-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) both;
}
.reb-landing-hero-eyebrow-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(129,140,248,0.6);
}

.reb-landing-hero-brand {
  margin-bottom: 32px;
  animation: reb-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.1s both;
}
.reb-landing-hero-logo {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  font-size: 80px;
  font-weight: 900;
  letter-spacing: -0.06em;
  color: #fff;
  line-height: 1;
  display: inline-block;
}
.reb-landing-hero-logo-colon {
  color: #818CF8;
}
.reb-landing-hero-logo-kr {
  display: block;
  font-family: 'Noto Serif KR', serif;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.25em;
  color: rgba(255,255,255,0.4);
  margin-top: 10px;
}

.reb-landing-hero-title {
  font-size: clamp(28px, 4.2vw, 42px);
  font-weight: 780;
  letter-spacing: -0.03em;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 20px;
  animation: reb-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.2s both;
}
.reb-landing-hero-title em {
  font-style: normal;
  background: linear-gradient(135deg, #C7D2FE, #A5B4FC, #818CF8);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.reb-landing-hero-desc {
  font-size: 16px;
  line-height: 1.75;
  color: rgba(255,255,255,0.6);
  margin-bottom: 48px;
  max-width: 440px;
  margin: 0 auto 40px;
  animation: reb-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.3s both;
}

.reb-landing-hero-cta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 16px 36px;
  border-radius: 14px;
  font-size: 16px;
  font-weight: 650;
  color: #fff;
  background: linear-gradient(135deg, #6366F1, #4F46E5);
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 4px 24px rgba(99,102,241,0.4), inset 0 1px 0 rgba(255,255,255,0.12);
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.16,1,0.3,1);
  animation: reb-fade-up 0.7s cubic-bezier(0.16,1,0.3,1) 0.4s both;
}
.reb-landing-hero-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 40px rgba(99,102,241,0.5), inset 0 1px 0 rgba(255,255,255,0.15);
}
.reb-landing-hero-cta .reb-ai-sparkle {
  font-size: 18px;
  animation: reb-sparkle-pulse 2.5s ease-in-out infinite;
}

@keyframes reb-sparkle-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(1.2); }
}

.reb-landing-hero-edge {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  background: linear-gradient(to bottom, transparent, var(--bg));
  pointer-events: none;
}

/* ── V2 Stats Band ────────────────────────────────────────────── */
.reb-home-stats {
  position: relative;
  z-index: 2;
  margin-top: -52px;
  padding: 0 24px;
  margin-bottom: 56px;
}
.reb-home-stats-inner {
  max-width: 680px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-light);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.08), 0 0 0 1px var(--border-light);
}
.reb-home-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px 24px;
  background: var(--bg-elevated);
  transition: background 0.3s ease;
}
.reb-home-stat:hover {
  background: var(--bg-secondary);
}
.reb-home-stat-icon {
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  margin-bottom: 16px;
}
.reb-home-stat-icon--projects { background: var(--primary-light); color: var(--primary); }
.reb-home-stat-icon--analyzed { background: #ECFDF5; color: #059669; }
.reb-home-stat-icon--contents { background: var(--ai-light); color: var(--ai); }

.reb-home-stat-value {
  font-size: 36px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  line-height: 1;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.reb-home-stat-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.01em;
}

/* ── V2 Process Timeline ──────────────────────────────────────── */
.reb-process {
  padding: 8px 0 64px;
}
.reb-process-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.reb-process-label {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--text-tertiary);
  margin-bottom: 28px;
}
.reb-process-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: stretch;
  gap: 0;
}
.reb-process-card {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 16px;
  padding: 28px 24px 24px;
  position: relative;
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.5s cubic-bezier(0.16,1,0.3,1);
}
.reb-process-card.reb-visible {
  opacity: 1;
  transform: translateY(0);
}
.reb-process-card:hover {
  box-shadow: 0 12px 40px rgba(0,0,0,0.08);
  border-color: var(--primary-subtle);
}
.reb-process-card.reb-visible:hover {
  transform: translateY(-3px);
}

.reb-process-step-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  margin-bottom: 18px;
  font-size: 15px;
  font-weight: 800;
  position: relative;
}
.reb-process-step-badge svg {
  position: absolute;
  opacity: 0.18;
  right: 4px;
  bottom: 4px;
}
.reb-process-card[data-step="brief"] .reb-process-step-badge {
  background: var(--primary-light);
  color: var(--primary);
}
.reb-process-card[data-step="build"] .reb-process-step-badge {
  background: var(--ai-light);
  color: var(--ai);
}
.reb-process-card[data-step="birth"] .reb-process-step-badge {
  background: var(--success-light);
  color: var(--success);
}

.reb-process-name {
  font-size: 19px;
  font-weight: 780;
  letter-spacing: -0.02em;
  margin-bottom: 2px;
  color: var(--text);
}
.reb-process-name span {
  color: var(--primary);
}
.reb-process-card[data-step="build"] .reb-process-name span { color: var(--ai); }
.reb-process-card[data-step="birth"] .reb-process-name span { color: var(--success); }

.reb-process-sub {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  margin-bottom: 14px;
}
.reb-process-desc {
  font-size: 13.5px;
  line-height: 1.75;
  color: var(--text-secondary);
}

.reb-process-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
}
.reb-process-connector-line {
  width: 36px;
  height: 0;
  border-top: 2px dashed var(--border);
  position: relative;
}
.reb-process-connector-line::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -5px;
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--primary);
  border-top: 2px solid var(--primary);
  transform: rotate(45deg);
  opacity: 0.5;
}

/* ── V2 Section Divider ───────────────────────────────────────── */
.reb-divider {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.reb-divider-line {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-light), transparent);
}

/* ── V2 Project Section ───────────────────────────────────────── */
.reb-projects {
  padding: 48px 0 80px;
}
.reb-projects-wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 24px;
}
.reb-projects-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.reb-projects-title {
  font-size: 22px;
  font-weight: 760;
  letter-spacing: -0.02em;
}
.reb-projects-count {
  font-size: 12px;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-light);
  padding: 3px 11px;
  border-radius: var(--radius-full);
}

/* ── V2 Footer ────────────────────────────────────────────────── */
.reb-footer {
  padding: 48px 24px 40px;
  text-align: center;
  border-top: 1px solid var(--border-light);
  background: var(--bg-secondary);
}
.reb-footer-tagline {
  font-size: 15px;
  color: var(--text-secondary);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
  line-height: 1.6;
}
.reb-footer-tagline strong {
  font-weight: 700;
  color: var(--text);
}
.reb-footer-copy {
  font-size: 11.5px;
  color: var(--text-tertiary);
  opacity: 0.6;
}
.reb-footer-logo {
  font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
  font-weight: 900;
  font-size: 15px;
  letter-spacing: -0.05em;
  color: var(--text-tertiary);
}
.reb-footer-logo span { color: var(--primary); opacity: 0.6; }

/* ── V2 Animations ────────────────────────────────────────────── */
@keyframes reb-fade-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes reb-counter-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.05); }
}

/* ── V2 Responsive ────────────────────────────────────────────── */
@media (max-width: 900px) {
  .reb-landing-hero { padding: 100px 0 60px; min-height: auto; }
  .reb-landing-hero-logo { font-size: 52px; }
  .reb-landing-hero-logo-kr { font-size: 13px; margin-top: 6px; }
  .reb-landing-hero-brand { margin-bottom: 24px; }
  .reb-landing-hero-title { font-size: 24px; margin-bottom: 16px; }
  .reb-landing-hero-desc { font-size: 14px; margin-bottom: 32px; }
  .reb-landing-hero-eyebrow { font-size: 11px; margin-bottom: 24px; padding: 5px 12px; }
  .reb-process-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .reb-process-connector { display: none; }
  .reb-home-stats-inner { grid-template-columns: repeat(3, 1fr); border-radius: 16px; }
  .reb-home-stat { padding: 20px 12px; }
  .reb-home-stat-value { font-size: 28px; }
  /* 모바일 헤더 사이즈는 hero/내부 페이지 모두 동일 — 색상은 .reb-hero-active 에서 분기되더라도
     높이/로고/버튼 크기는 페이지 종류와 무관하게 일관. 이전엔 .reb-hero-active 한정이라
     내부 페이지 헤더만 56px 로 더 컸음. */
  .reb-header {
    padding: 0 16px;
    height: 48px;
  }
  .reb-logo-en { font-size: 18px; }
  .reb-logo-kr { font-size: 8px; }
  .reb-nav .reb-btn-primary { font-size: 12px; padding: 6px 14px; }
}

@media (max-width: 480px) {
  .reb-landing-hero { padding: 80px 0 56px; }
  .reb-landing-hero-content { padding: 0 16px; }
  .reb-landing-hero-logo { font-size: 40px; }
  .reb-landing-hero-logo-kr { font-size: 12px; margin-top: 5px; letter-spacing: 0.15em; }
  .reb-landing-hero-brand { margin-bottom: 20px; }
  .reb-landing-hero-title { font-size: 20px; line-height: 1.5; margin-bottom: 12px; }
  .reb-landing-hero-desc { font-size: 13px; line-height: 1.7; margin-bottom: 28px; max-width: 320px; }
  .reb-landing-hero-cta { padding: 13px 24px; font-size: 14px; border-radius: 12px; }
  .reb-landing-hero-eyebrow { font-size: 10px; margin-bottom: 20px; padding: 4px 10px; gap: 6px; }
  .reb-landing-hero-orb--1 { width: 300px; height: 300px; top: -100px; right: -60px; }
  .reb-landing-hero-orb--2 { width: 200px; height: 200px; }
  .reb-landing-hero-orb--3 { display: none; }
  .reb-home-stats { margin-top: -32px; padding: 0 16px; margin-bottom: 36px; }
  .reb-home-stats-inner { grid-template-columns: repeat(3, 1fr); border-radius: 14px; }
  .reb-home-stat { padding: 14px 8px 12px; }
  .reb-home-stat-icon { width: 30px; height: 30px; margin-bottom: 8px; border-radius: 8px; }
  .reb-home-stat-icon svg { width: 14px; height: 14px; }
  .reb-home-stat-value { font-size: 22px; margin-bottom: 3px; }
  .reb-home-stat-label { font-size: 10px; }
  .reb-process { padding: 0 0 40px; }
  .reb-process-wrap { padding: 0 16px; }
  .reb-process-header { margin-bottom: 24px; }
  .reb-process-title { font-size: 20px; }
  .reb-projects-wrap { padding: 0 16px; }
}


/* ================================================================
   RE:B V2 — Analysis Dashboard Overrides
   ================================================================ */

/* ── Dashboard Header (analysis view only) ────────────────────── */
#view-analysis .reb-analysis-header {
  padding: 36px 0 28px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border-light);
  background: linear-gradient(180deg, var(--bg-secondary) 0%, var(--bg) 100%);
  margin-left: -24px;
  margin-right: -24px;
  padding-left: 24px;
  padding-right: 24px;
}

#view-analysis .reb-analysis-header-top {
  margin-bottom: 16px;
}

/* ── Analysis Header — 의미 계층 분리 (v2) ────────────────────────
   1) header-top: [← 프로젝트 목록] ────── [공유 + ⋯]   (글로벌 nav + 협업/편집)
   2) eyebrow / title / subtitle                       (페이지 정체성)
   3) reb-view-tabs:  AI 인사이트 | 미디어 | 데이터 탐색  (peer 뷰) */
.reb-analysis-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* 우상단에 *2개 이상* 의 액션이 있는 경우만(예: 공유 + ⋯) ghost group card 로 묶음.
   미디어/탐색 view 처럼 공유 단일이면 group card 가 어색하니 적용 안 함. */
.reb-analysis-header-actions:has(.reb-header-menu) {
  gap: 6px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 4px;
}
/* 그룹 안의 secondary 는 ghost 톤으로 — accent(공유) 는 자기 색 유지. */
.reb-analysis-header-actions:has(.reb-header-menu) .reb-btn-secondary.reb-btn--sm:not(.reb-btn--accent):not(.reb-header-menu-trigger) {
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
}
.reb-analysis-header-actions:has(.reb-header-menu) .reb-btn-secondary.reb-btn--sm:not(.reb-btn--accent):not(.reb-header-menu-trigger):hover {
  background: var(--bg-secondary);
}
/* ⋯ 트리거도 그룹 안에서는 ghost 톤 */
.reb-analysis-header-actions:has(.reb-header-menu) .reb-header-menu-trigger {
  border-radius: 8px;
  border-color: transparent;
  background: transparent;
}
.reb-analysis-header-actions:has(.reb-header-menu) .reb-header-menu-trigger:hover {
  background: var(--bg-secondary);
}

/* ── View Tabs (analysis / media / explorer 공통) ───────────────── */
.reb-view-tabs {
  margin: 22px 0 0;
}
.reb-view-tab {
  display: inline-flex; align-items: center; gap: 7px;
}
.reb-view-tab svg { flex: none; opacity: 0.65; transition: opacity var(--transition-fast); }
.reb-view-tab:hover svg { opacity: 0.9; }
.reb-view-tab.is-active svg,
.reb-view-tab[aria-selected="true"] svg { opacity: 1; }

/* ── Header dropdown menu — 자주 안 쓰는 편집 액션을 ⋯ 안에 모음 ──── */
.reb-header-menu {
  position: relative;
  display: inline-flex;
}
.reb-header-menu-trigger {
  width: 32px;
  padding: 0 !important;
  display: inline-flex; align-items: center; justify-content: center;
}
.reb-header-menu-list {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 60;
  min-width: 260px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 6px;
  display: flex; flex-direction: column;
  gap: 2px;
  animation: reb-header-menu-pop 0.14s var(--ease) both;
}
@keyframes reb-header-menu-pop {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.reb-header-menu-item {
  display: flex; align-items: flex-start; gap: 11px;
  width: 100%;
  padding: 10px 12px;
  background: transparent;
  border: none;
  border-radius: 8px;
  text-align: left;
  cursor: pointer;
  color: var(--text-primary);
  transition: background var(--transition-fast);
}
.reb-header-menu-item:hover { background: var(--bg-subtle); }
.reb-header-menu-item svg { flex: none; color: var(--text-secondary); margin-top: 2px; }
.reb-header-menu-item > span { display: flex; flex-direction: column; gap: 2px; }
.reb-header-menu-item strong {
  font-size: 13px; font-weight: 650;
  letter-spacing: -0.005em;
  color: var(--text-primary);
}
.reb-header-menu-item small {
  font-size: 11.5px; font-weight: 500;
  color: var(--text-tertiary);
  line-height: 1.45;
}

@media (max-width: 720px) {
  .reb-view-tabs { margin-top: 18px; }
  .reb-view-tab  { padding: 10px 12px; font-size: 12.5px; }
  .reb-view-tab svg { width: 13px; height: 13px; }
  .reb-header-menu-list { min-width: 240px; }
}

.reb-analysis-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.reb-analysis-eyebrow svg {
  opacity: 0.5;
}

.reb-analysis-title {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 820;
  letter-spacing: -0.035em;
}

.reb-analysis-subtitle {
  font-size: 13.5px;
  color: var(--text-tertiary);
}

/* ── Overview Cards ───────────────────────────────────────────── */
.reb-analysis-overview {
  gap: 12px;
  margin-top: 28px;
  margin-bottom: 40px;
}

.reb-overview-card {
  padding: 20px 20px 18px;
  border-radius: 14px;
  border: 1px solid var(--border-light);
  position: relative;
  overflow: visible;
}
.reb-overview-card::before {
  width: 3px;
  height: 28px;
  top: 50%;
  left: 0;
  right: auto;
  transform: translateY(-50%);
  border-radius: 0 3px 3px 0;
}

.reb-overview-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  margin-bottom: 8px;
}

.reb-overview-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-tertiary);
  margin-bottom: 2px;
}

.reb-overview-value {
  font-size: 30px;
  font-weight: 820;
  letter-spacing: -0.04em;
}

.reb-overview-card:hover {
  box-shadow: 0 8px 24px rgba(0,0,0,0.06);
  transform: translateY(-2px);
}

/* ── Analysis Sections ────────────────────────────────────────── */
.reb-analysis-section {
  margin-bottom: 40px;
}

.reb-analysis-section-title {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.02em;
  padding-left: 14px;
  position: relative;
  margin-bottom: 6px;
}
.reb-analysis-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
}

.reb-analysis-section-desc {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 18px;
  padding-left: 14px;
}

/* ── Chart Cards ──────────────────────────────────────────────── */
.reb-chart-card {
  border-radius: 16px;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.reb-chart-card:hover {
  box-shadow: 0 8px 28px rgba(0,0,0,0.06);
}

.reb-analysis-split {
  gap: 16px;
}

/* ── Executive Summary ────────────────────────────────────────── */
.reb-exec-card {
  border-radius: 16px;
  border: 1px solid var(--border-light);
}

.reb-exec-headline {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.4;
  margin: 0 0 8px;
  padding-bottom: 12px;
  border-bottom: 1px dashed var(--border-light);
}

/* ── Key Insights ─────────────────────────────────────────────── */
.reb-ki-card {
  border-radius: 14px;
}

/* ── Persona Cards ────────────────────────────────────────────── */
.reb-persona-card {
  border-radius: 14px;
}

/* ── Content Themes ───────────────────────────────────────────── */
.reb-theme-card {
  border-radius: 14px;
}

/* ── Competitive Landscape ────────────────────────────────────── */
/* .reb-competitor-card border-radius override — 환원 v5.10 에서 main 룰(12px)이 일관, 제거 */

/* ── Creative Insight ─────────────────────────────────────────── */
.reb-ci-card {
  border-radius: 14px;
}

/* ── Analysis Footer ──────────────────────────────────────────── */
.reb-analysis-footer {
  padding: 28px 0 52px;
  margin-top: 8px;
  border-top: 1px solid var(--border-light);
}

/* ── Dashboard Responsive ─────────────────────────────────────── */
@media (max-width: 768px) {
  .reb-analysis-header {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
  .reb-analysis-header-actions {
    flex-wrap: wrap;
  }
  .reb-overview-value {
    font-size: 24px;
  }
}


/* ================================================================
   RE:B V2 — Media Plan Insights Overrides
   ================================================================ */

/* ── Media Plan Header — match dashboard V2 tone ──────────────── */
#view-media .reb-analysis-header {
  padding: 36px 0 28px;
  margin-bottom: 20px;
  border-bottom: none;
  background: none;
}

#view-media .reb-analysis-title {
  font-size: clamp(26px, 3.2vw, 34px);
  font-weight: 820;
  letter-spacing: -0.035em;
}

#view-media .reb-analysis-subtitle {
  font-size: 13.5px;
}

/* ── Media plan eyebrow ───────────────────────────────────────── */
.reb-mp-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
  margin-bottom: 8px;
}
.reb-mp-eyebrow svg {
  opacity: 0.5;
}

/* ── Unified section styling for media plan ────────────────────── */
#view-media .reb-analysis-section {
  margin-bottom: 40px;
}

#view-media .reb-analysis-section-title {
  font-size: 18px;
  font-weight: 780;
  letter-spacing: -0.02em;
  padding-left: 14px;
  position: relative;
  margin-bottom: 6px;
}
#view-media .reb-analysis-section-title::before {
  content: '';
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 3px;
  border-radius: 2px;
  background: var(--primary);
}

#view-media .reb-analysis-section-desc {
  font-size: 12.5px;
  color: var(--text-tertiary);
  margin-bottom: 18px;
  padding-left: 14px;
}

/* 환원 v5.20: media 페이지 채널 카드 grid 3열 고정 — 4열일 때 카드가 너무 길어져 PPT 가독성 저하.
   analysis 페이지의 .reb-channel-grid (auto-fit) 는 유지, media 만 max 3 columns 로 제한. */
#view-media .reb-channel-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 980px) {
  #view-media .reb-channel-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  #view-media .reb-channel-grid { grid-template-columns: 1fr; }
}

/* ── Campaign Direction card polish ───────────────────────────── */
.reb-mp-direction-card {
  border-radius: 16px;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

.reb-mp-pillar {
  gap: 14px;
  padding: 14px 22px;
}

.reb-mp-pillar-label {
  min-width: 110px;
}

/* ── Media spec tables ────────────────────────────────────────── */
.reb-mp-spec-table th {
  width: 90px;
}

/* ── Chart / strategy cards ───────────────────────────────────── */
#view-media .reb-chart-card {
  border-radius: 16px;
  border: 1px solid var(--border-light);
  box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}

#view-media .reb-strategy-card {
  border-radius: 14px;
}

.reb-mp-summary-card {
  border-radius: 14px;
}

.reb-mp-note-card {
  border-radius: 14px;
}

.reb-mp-tips-card {
  border-radius: 14px;
}

/* ── Media plan footer ────────────────────────────────────────── */
#view-media .reb-analysis-footer {
  padding: 28px 0 52px;
  margin-top: 8px;
  border-top: 1px solid var(--border-light);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 768px) {
  #view-media .reb-analysis-header {
    margin-left: -16px;
    margin-right: -16px;
    padding-left: 16px;
    padding-right: 16px;
  }
}

/* ── AI 어시스턴트 V2 Overrides ───────────────────────────────── */
.reb-chat-header {
  background: linear-gradient(135deg, #f8f9ff 0%, var(--bg-elevated) 100%);
}
.reb-chat-panel {
  border-radius: 16px 0 0 16px;
}
.reb-chat-chip:hover {
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}
#btn-ai-assistant,
.btn-ai-assistant-media {
  background: var(--primary-light);
  color: var(--primary);
  border-color: var(--primary-subtle);
}
#btn-ai-assistant:hover,
.btn-ai-assistant-media:hover {
  background: var(--primary-subtle);
  border-color: var(--primary);
}

@media (max-width: 1024px) {
  .reb-chat-panel {
    border-radius: 16px 16px 0 0;
  }
}

/* ============================================================
   Status Hero — 통합 진행률 + 단계 Stepper (UX v2)
   - 기존 .reb-status-overall(분리된 수집 링) 대체
   - 큰 진행률 = 수집(30%) + AI 분석(70%) 가중 통합값
   ============================================================ */

.reb-status-hero {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 20px;
  padding: 32px 32px 24px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.04);
}

.reb-status-hero-top {
  display: flex;
  align-items: center;
  gap: 32px;
  padding-bottom: 28px;
  border-bottom: 1px dashed var(--border-subtle, #E5E7EB);
  margin-bottom: 24px;
}

.reb-status-hero-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.reb-status-hero-eyebrow {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-tertiary, #6B7280);
  text-transform: uppercase;
}

.reb-status-hero-title {
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-primary, #111827);
  margin: 0;
}

.reb-status-hero-eta {
  font-size: 14px;
  color: var(--text-secondary, #4B5563);
  margin: 4px 0 0;
}
.reb-status-hero-eta--strong {
  font-weight: 600;
  color: var(--primary, #5B5BFF);
}

.reb-status-hero-live {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--text-tertiary, #6B7280);
  margin: 8px 0 0;
}

.reb-pulse-dot--xs {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--primary, #5B5BFF);
  box-shadow: 0 0 0 0 rgba(91, 91, 255, 0.7);
  animation: rebPulseXs 1.6s infinite;
}
@keyframes rebPulseXs {
  0%   { box-shadow: 0 0 0 0 rgba(91,91,255,0.6); }
  70%  { box-shadow: 0 0 0 6px rgba(91,91,255,0); }
  100% { box-shadow: 0 0 0 0 rgba(91,91,255,0); }
}

/* hero 안의 ring fill 은 부드러운 transition (jumpy 한 진행 표시 방지) */
.reb-status-hero .reb-status-ring-fill {
  transition: stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Stepper ──────────────────────────────────────────────── */

.reb-status-stepper {
  display: flex;
  align-items: stretch;
  gap: 16px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.reb-step {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--bg-subtle, #F9FAFB);
  border: 1px solid transparent;
  position: relative;
  transition: background 200ms, border-color 200ms;
}

.reb-step--active {
  background: var(--primary-subtle, #EEF2FF);
  border-color: rgba(91,91,255,0.25);
}

.reb-step--done {
  background: rgba(34, 197, 94, 0.06);
}

.reb-step-marker {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
  background: #fff;
  border: 2px solid var(--border-subtle, #E5E7EB);
  color: var(--text-tertiary, #6B7280);
  transition: all 200ms;
}

.reb-step--active .reb-step-marker {
  background: var(--primary, #5B5BFF);
  border-color: var(--primary, #5B5BFF);
  color: #fff;
  box-shadow: 0 0 0 4px rgba(91,91,255,0.15);
}

.reb-step--done .reb-step-marker {
  background: var(--success, #22C55E);
  border-color: var(--success, #22C55E);
  color: #fff;
}

.reb-step-marker-num {
  display: inline;
}

.reb-step-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.reb-step-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  line-height: 1.3;
}

.reb-step-detail {
  font-size: 12px;
  color: var(--text-secondary, #4B5563);
  line-height: 1.4;
  word-break: keep-all;
}

.reb-step--done .reb-step-detail {
  color: var(--success, #22C55E);
  font-weight: 500;
}

.reb-step-bar {
  margin-top: 8px;
  width: 100%;
  height: 4px;
  background: rgba(91,91,255,0.15);
  border-radius: 2px;
  overflow: hidden;
}

.reb-step-bar-fill {
  height: 100%;
  background: var(--primary, #5B5BFF);
  border-radius: 2px;
  transition: width 600ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (max-width: 768px) {
  .reb-status-hero {
    padding: 24px 20px 20px;
  }
  .reb-status-hero-top {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }
  .reb-status-hero-info {
    align-items: center;
  }
  .reb-status-stepper {
    flex-direction: column;
  }
}

/* ── Collapsed details ────────────────────────────────────── */

.reb-status-collected {
  background: var(--bg-card, #fff);
  border: 1px solid var(--border-subtle, #E5E7EB);
  border-radius: 16px;
  margin-bottom: 20px;
  overflow: hidden;
}

.reb-status-collected[open] .reb-status-collected-chev {
  transform: rotate(180deg);
}

.reb-status-collected-summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  cursor: pointer;
  user-select: none;
  transition: background 150ms;
}
.reb-status-collected-summary::-webkit-details-marker {
  display: none;
}
.reb-status-collected-summary:hover {
  background: var(--bg-subtle, #F9FAFB);
}

.reb-status-collected-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary, #111827);
  flex: 1;
}

.reb-status-collected-meta {
  font-size: 13px;
  color: var(--text-tertiary, #6B7280);
  font-variant-numeric: tabular-nums;
}

.reb-status-collected-chev {
  color: var(--text-tertiary, #6B7280);
  transition: transform 200ms;
}

.reb-status-collected[open] .reb-status-sources {
  padding: 4px 16px 16px;
}

/* ============================================================
   Strategic Insights v2 — Pkg B (Strategic Options Catalog)
   --------------------------------------------------------------
   - Strategic Directions Catalog (3개 후보)
   - Directions Comparison (의사결정 매트릭스)
   - Persona Tension Block (페르소나 카드 내부 expand)
   - Competitive Expand (perceptual map / SOV / differentiation)
   - Shared Evidence Block (.reb-meta-card-evidence — _renderEvidenceBlock 기본 클래스)
     * 이전 Strategic Meta 섹션 제거 후 Key Insights 가 흡수했으나, evidence wrapper
       클래스 이름은 호환성 위해 그대로 둠.
   ============================================================ */

/* .reb-meta-card-evidence + svg — 통일 규칙(.reb-*-evidence 공유) 으로 흡수, 환원 v3.
   .reb-meta-card-evidence-conf 만 conf chip 스타일로 유지 (grid 3번째 열 nowrap 정렬). */
.reb-meta-card-evidence-conf {
  display: inline-block;
  align-self: start;
  padding: 1px 6px;
  border-radius: var(--radius-sm);
  background: var(--bg-elevated);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 9.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border: 1px solid var(--border-light);
  white-space: nowrap;
}
.reb-meta-card-quote {
  font-style: italic;
  color: var(--text-secondary);
}

/* ── Strategic Directions Catalog (3개 후보 카드) ──────────────── */
.reb-strat-directions {
  margin-bottom: 36px;
  animation: sectionEnter 0.5s var(--ease) backwards;
  animation-delay: 0.1s;
}

.reb-strat-directions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 16px;
}
@media (max-width: 1024px) {
  .reb-strat-directions-grid { grid-template-columns: 1fr; }
}

.reb-direction-card {
  position: relative;
  padding: 22px 20px 0;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform var(--transition), box-shadow var(--transition);
  overflow: hidden;
}
.reb-direction-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}

/* Head: name chip 단독 (환원 v3).
   - 번호 원 (.reb-direction-no) 제거: direction 은 alternatives 이지 ranking 이 아님
   - dot (.reb-direction-dot) 제거: name chip 자체가 accent 컬러(border + bg tint + text)로
     식별 기능을 다 하므로 추가 dot 은 redundant. 매트릭스 legend·키워드 chip·point bullet
     색상에서도 cross-reference 작동. */
.reb-direction-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.reb-direction-name {
  font-size: 11.5px;
  font-weight: 720;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--dir-accent) 8%, transparent);
  color: var(--dir-accent);
  border: 1px solid color-mix(in srgb, var(--dir-accent) 14%, transparent);
}

/* Spine — 카드의 빅 헤드라인 */
.reb-direction-spine {
  font-size: 18px;
  font-weight: 760;
  letter-spacing: -0.022em;
  color: var(--text);
  line-height: 1.35;
  min-height: 46px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border-light);
}

/* Core message — 카피 인용 */
/* .reb-direction-message — 환원 v2 에서 제거됨 (core_message blockquote 가
   message_candidates 와 중복되어 스키마·렌더에서 모두 삭제). */

/* Quickbar — 라벨↔텍스트 row 묶음 (식별 메타) */
.reb-direction-quickbar {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--dir-accent) 4%, var(--bg-elevated));
  border: 1px solid color-mix(in srgb, var(--dir-accent) 12%, transparent);
}
.reb-direction-quickbar-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-size: 12.5px;
  line-height: 1.5;
}
.reb-direction-quickbar-label {
  flex-shrink: 0;
  width: 78px;
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--dir-accent);
}
.reb-direction-quickbar-text {
  flex: 1;
  color: var(--text);
  font-weight: 550;
}

/* Keywords chip row (페르소나 chip 패턴) */
.reb-direction-keywords {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reb-direction-detail-label {
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dir-accent);
}
.reb-direction-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.reb-direction-chip {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: var(--dir-chip-bg);
  font-size: 12px;
  font-weight: 550;
  color: var(--dir-chip-color);
  border: 1px solid color-mix(in srgb, var(--dir-accent) 10%, transparent);
}

/* Section block (왜 작동하나 / 위험·트레이드오프) — 항상 표시, 토글 없음.
   환원 v2: 이중 accent (why=초록 / risks=앰버) 와 ◆ ⚠ 글리프 제거.
   카드 안 accent 는 dir-accent 1색만, 위계는 label + bullet 으로 구분. */
.reb-direction-section {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-top: 4px;
}

.reb-direction-section-label {
  font-size: 10px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dir-accent);
}

/* Bullet list — PPT-ready 2 항목 위계 (core 1줄 + rationale/mitigation 1줄).
   첫 항목 (.--core) 은 단정 결론으로 약간 강조, 두 번째 항목은 보완 톤. */
.reb-direction-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reb-direction-point {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text);
}
.reb-direction-point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--dir-accent) 55%, transparent);
}
.reb-direction-point--core {
  font-weight: 620;
  color: var(--text);
}
.reb-direction-point:not(.reb-direction-point--core) {
  color: var(--text-secondary);
}

/* .reb-direction-evidence + svg — 통일 규칙(.reb-*-evidence 공유) 으로 흡수, 환원 v3 */

/* ── Directions Comparison (전략 방향 비교) — 환원 v3 ──────────────
   이전: 단일 박스 안에 매트릭스 + 시나리오 + 가이드 줄글 모두 들어가
         시각 위계 평탄. 환원으로 reb-analysis-section 컨벤션 정합.
   현재: h2 + desc + 2개 독립 카드 (scenarios primary / matrix secondary).
   decision_guide 줄글은 schema·렌더에서 모두 제거. */

/* Unified card (환원 v4) — scenarios + ECharts 매트릭스 한 카드 안 side-by-side.
   환원 v4.1: PPT 캡처 시 좌우 시각 균형 위해 align-items center, scenarios padding ↑. */
.reb-dir-compare-card {
  padding: 22px 24px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 440px;
  gap: 32px;
  align-items: center; /* 좌우 vertical 중심 정렬 — 좌 짧고 우 큰 경우 시각 균형 */
  animation: sectionEnter 0.5s var(--ease) backwards;
  animation-delay: 0.12s;
}
@media (max-width: 1024px) {
  .reb-dir-compare-card { grid-template-columns: 1fr; }
}
.reb-dir-compare-card--no-chart { grid-template-columns: 1fr; }

.reb-dir-compare-card-left {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
.reb-dir-compare-card-right {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

/* Matrix insight caption — 환원 v4.2: AE/매니저 차트 해석 보조 1줄.
   McKinsey/BCG deck 의 차트 하단 "Key Take" 캡션 컨벤션. icon + text inline. */
.reb-dir-compare-matrix-insight {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  padding: 10px 14px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  font-weight: 550;
  line-height: 1.5;
  color: var(--text);
}
.reb-dir-compare-matrix-insight svg {
  flex-shrink: 0;
  margin-top: 3px;
  color: var(--text-tertiary);
}

/* .reb-dir-compare-matrix + SVG 룰 — 환원 v4 에서 모두 제거됨 (ECharts scatter 로 전환).
   ECharts container 는 #chart-dir-compare-matrix 인라인 height 로 사이즈 결정. */

/* .reb-dir-compare-info — 환원 v3 에서 제거됨 (2-card 구조로 wrapper 불필요) */
/* .reb-dir-compare-legend — 환원 v4 에서 제거됨 (ECharts scatter 의 native label
   이 dot 옆 이름을 자동 표시·overlap 회피하므로 별도 legend 불필요) */
/* .reb-dir-compare-legend-* — 환원 v4 에서 제거됨 (ECharts native label 가 legend 역할) */
/* ── Decision Scenarios (시나리오 → 추천 방향 매핑 카드) ────── */
.reb-dir-compare-scenarios {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reb-dir-compare-scenarios-label {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.reb-dir-compare-scenarios-list {
  display: flex;
  flex-direction: column;
}
/* 환원 v4.2: 라운드 박스 + accent left border + bg-elevated 제거 — REB 의 다른 리스트
   패턴 (전략 제안·페르소나 chip·채널)과 일관되게 plain row + 미세 구분선 만. */
.reb-dir-compare-scenario {
  display: grid;
  grid-template-columns: minmax(0, auto) 22px minmax(0, auto) 1fr;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--border-light);
  font-size: 12.5px;
  line-height: 1.45;
}
.reb-dir-compare-scenario:last-child {
  border-bottom: none;
}
.reb-dir-compare-scenario-chip {
  font-weight: 700;
  color: var(--text);
  white-space: nowrap;
}
.reb-dir-compare-scenario-arrow {
  color: var(--text-tertiary);
  flex-shrink: 0;
}
.reb-dir-compare-scenario-rec {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
/* Scenario rec dot: 색상만으로 cross-reference. 환원 v2: 번호 prefix 제거. */
.reb-dir-compare-scenario-rec-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--scn-accent);
  flex-shrink: 0;
}
.reb-dir-compare-scenario-rec-name {
  font-weight: 700;
  color: var(--scn-accent);
  letter-spacing: -0.005em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.reb-dir-compare-scenario-why {
  font-size: 11.5px;
  color: var(--text-secondary);
  line-height: 1.4;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
@media (max-width: 768px) {
  .reb-dir-compare-scenario {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .reb-dir-compare-scenario-arrow { display: none; }
  .reb-dir-compare-scenario-why { text-align: left; white-space: normal; }
}

/* .reb-dir-compare-guide* — 환원 v3 에서 모두 제거됨 (decision_guide 줄글 폐지) */

/* .reb-persona-tension* / .reb-persona-trigger-* / .reb-persona-tension-meta* —
   환원 v5 에서 nested widget 풀어 페르소나 카드 본문으로 통합.
   internal_tension 은 .reb-persona-tension-line (line 3128 부근) 으로,
   cultural / trigger 는 .reb-persona-detail / .reb-persona-tag 일반 chip 그룹으로,
   cultural_context 줄글은 .reb-persona-detail-context 로 환원됨. */

/* ── Competitive Expand (perceptual map / SOV / differentiation) ── */
.reb-comp-expand {
  margin-top: 20px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

/* ── Perceptual Map — PPT-friendly 카테고리 포지셔닝 ─────── */
.reb-perceptual-map {
  padding: 24px 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* 환원 v5.18: title 16.5px (sub-card 표준 — perceptual + diff territory + 다른 환원 섹션 톤 정합) */
.reb-perceptual-map-title {
  font-size: 16.5px;
  font-weight: 720;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

/* 환원 v5.18: 3-column grid 정렬 환원 — center → start (좌측 정렬, 카드 안 자연스럽게 배치),
   gap ↑ for breathing. chart - legend - whitespace 순. */
.reb-perceptual-map-grid {
  display: grid;
  grid-template-columns: minmax(280px, 360px) auto 1fr;
  gap: 24px;
  align-items: start;
  justify-content: start;
}
.reb-perceptual-map-grid--no-chart {
  grid-template-columns: auto 1fr;
  justify-content: start;
}
@media (max-width: 880px) {
  .reb-perceptual-map-grid,
  .reb-perceptual-map-grid--no-chart { grid-template-columns: 1fr; gap: 12px; }
  .reb-perceptual-legend,
  .reb-perceptual-whitespace { width: 100%; max-width: none; }
}

/* Chart frame — 3×3 grid, 적정 크기 캡 */
.reb-perceptual-chart {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) 28px;
  grid-template-rows: 20px minmax(0, 1fr) 20px;
  gap: 6px 4px;
  align-items: center;
  justify-items: center;
  width: 100%;
  max-width: 360px;
  margin: 0;
}
.reb-perceptual-chart-axis {
  font-size: 10.5px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -0.01em;
  white-space: nowrap;
  line-height: 1;
}
.reb-perceptual-chart-axis--top    { grid-column: 2; grid-row: 1; }
.reb-perceptual-chart-axis--bottom { grid-column: 2; grid-row: 3; }
.reb-perceptual-chart-axis--left   { grid-column: 1; grid-row: 2; transform: rotate(-90deg); transform-origin: center; }
.reb-perceptual-chart-axis--right  { grid-column: 3; grid-row: 2; transform: rotate(90deg);  transform-origin: center; }

/* 환원 v5.18: 4/3 → 1/1 정사각 (dot 분포 균형), gray bg → 더 가벼운 톤 */
.reb-perceptual-chart-canvas {
  grid-column: 2;
  grid-row: 2;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: color-mix(in srgb, var(--bg-subtle) 50%, var(--bg-elevated));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 8px;
  position: relative;
}
.reb-perceptual-chart-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: visible;
}

/* 환원 v5.18: legend bg box 제거 — plain list (whitespace bg 와 시각 충돌 해소).
   카드 안 sub-item 위계로 단순. */
.reb-perceptual-legend {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px 0;
  width: fit-content;
  min-width: 110px;
  max-width: 160px;
  align-self: center;
}
/* .reb-perceptual-legend-head* — 환원 v5.8 에서 제거됨 (head 영역 자체 제거,
   legend 가 단순 dot+name list 가 됨) */
.reb-perceptual-legend-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.reb-perceptual-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  min-width: 0;
  cursor: pointer;
  transition: background var(--transition), opacity 160ms ease, transform 180ms ease;
}
.reb-perceptual-legend-item:hover {
  background: var(--bg-elevated);
}
.reb-perceptual-legend-item.is-self {
  background: color-mix(in srgb, #D97706 9%, transparent);
}
/* 환원 v5.8: dot 안 숫자 제거 → 12px solid colored dot (Risk × Reward 매트릭스 legend 패턴 정합) */
.reb-perceptual-legend-dot {
  flex: 0 0 12px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}
.reb-perceptual-legend-name {
  flex: 1;
  font-size: 12px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: anywhere;
  min-width: 0;
}
.reb-perceptual-legend-item.is-self .reb-perceptual-legend-name {
  font-weight: 720;
}
.reb-perceptual-legend-self {
  flex-shrink: 0;
  font-size: 9px;
  font-weight: 720;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #B45309;
  background: color-mix(in srgb, #D97706 14%, transparent);
  padding: 1px 6px;
  border-radius: var(--radius-full);
}

/* ===========================================================================
   Legend ↔ Chart hover sync  (Bloomberg / Linear style cross-highlight)
   - 어느 한쪽 hover 시: 반대편 동일 idx 도 동시에 활성, 나머지는 dim
   - SVG dot 은 transform-box: fill-box 로 자기 중심 기준 스케일
   ========================================================================= */
.reb-perceptual-dot {
  cursor: pointer;
}
.reb-perceptual-dot-circle {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 180ms cubic-bezier(.2,.7,.3,1), filter 180ms ease;
}
/* 1) 어디든 hover 가 일어나면 → 양쪽 전부 dim */
.reb-perceptual-map:has(.reb-perceptual-legend-item:hover) .reb-perceptual-legend-item,
.reb-perceptual-map:has(.reb-perceptual-dot:hover) .reb-perceptual-legend-item {
  opacity: 0.42;
}
.reb-perceptual-map:has(.reb-perceptual-legend-item:hover) .reb-perceptual-dot,
.reb-perceptual-map:has(.reb-perceptual-dot:hover) .reb-perceptual-dot {
  opacity: 0.32;
}

/* 2) 자기 자신 hover 는 dim 에서 빠지고 강조 */
.reb-perceptual-legend-item:hover {
  opacity: 1 !important;
  background: var(--bg-elevated);
  transform: translateX(2px);
}
.reb-perceptual-dot:hover {
  opacity: 1 !important;
}
.reb-perceptual-dot:hover .reb-perceptual-dot-circle {
  transform: scale(1.45);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
}
/* .reb-perceptual-dot:hover .reb-perceptual-dot-num — 환원 v5.8 에서 제거됨 (dot-num 자체 제거) */

/* 3) 크로스 서브트리 sync — idx 0..7 까지 매칭 */
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="0"]:hover) .reb-perceptual-dot[data-brand-idx="0"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="0"]:hover) .reb-perceptual-legend-item[data-brand-idx="0"],
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="1"]:hover) .reb-perceptual-dot[data-brand-idx="1"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="1"]:hover) .reb-perceptual-legend-item[data-brand-idx="1"],
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="2"]:hover) .reb-perceptual-dot[data-brand-idx="2"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="2"]:hover) .reb-perceptual-legend-item[data-brand-idx="2"],
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="3"]:hover) .reb-perceptual-dot[data-brand-idx="3"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="3"]:hover) .reb-perceptual-legend-item[data-brand-idx="3"],
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="4"]:hover) .reb-perceptual-dot[data-brand-idx="4"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="4"]:hover) .reb-perceptual-legend-item[data-brand-idx="4"],
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="5"]:hover) .reb-perceptual-dot[data-brand-idx="5"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="5"]:hover) .reb-perceptual-legend-item[data-brand-idx="5"],
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="6"]:hover) .reb-perceptual-dot[data-brand-idx="6"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="6"]:hover) .reb-perceptual-legend-item[data-brand-idx="6"],
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="7"]:hover) .reb-perceptual-dot[data-brand-idx="7"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="7"]:hover) .reb-perceptual-legend-item[data-brand-idx="7"] {
  opacity: 1 !important;
}

/* 3-b) legend hover → 매칭 dot 까지 동일하게 스케일 + 그림자 */
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="0"]:hover) .reb-perceptual-dot[data-brand-idx="0"] .reb-perceptual-dot-circle,
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="1"]:hover) .reb-perceptual-dot[data-brand-idx="1"] .reb-perceptual-dot-circle,
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="2"]:hover) .reb-perceptual-dot[data-brand-idx="2"] .reb-perceptual-dot-circle,
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="3"]:hover) .reb-perceptual-dot[data-brand-idx="3"] .reb-perceptual-dot-circle,
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="4"]:hover) .reb-perceptual-dot[data-brand-idx="4"] .reb-perceptual-dot-circle,
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="5"]:hover) .reb-perceptual-dot[data-brand-idx="5"] .reb-perceptual-dot-circle,
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="6"]:hover) .reb-perceptual-dot[data-brand-idx="6"] .reb-perceptual-dot-circle,
.reb-perceptual-map:has(.reb-perceptual-legend-item[data-brand-idx="7"]:hover) .reb-perceptual-dot[data-brand-idx="7"] .reb-perceptual-dot-circle {
  transform: scale(1.45);
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28));
}
/* .reb-perceptual-dot-num 관련 cross-highlight 룰 — 환원 v5.8 에서 제거됨
   (dot 안 번호 자체 제거되었으므로). dot-circle 만 scale 으로 강조. */

/* 3-c) dot hover → 매칭 legend item 까지 강조 배경 */
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="0"]:hover) .reb-perceptual-legend-item[data-brand-idx="0"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="1"]:hover) .reb-perceptual-legend-item[data-brand-idx="1"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="2"]:hover) .reb-perceptual-legend-item[data-brand-idx="2"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="3"]:hover) .reb-perceptual-legend-item[data-brand-idx="3"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="4"]:hover) .reb-perceptual-legend-item[data-brand-idx="4"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="5"]:hover) .reb-perceptual-legend-item[data-brand-idx="5"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="6"]:hover) .reb-perceptual-legend-item[data-brand-idx="6"],
.reb-perceptual-map:has(.reb-perceptual-dot[data-brand-idx="7"]:hover) .reb-perceptual-legend-item[data-brand-idx="7"] {
  background: var(--bg-elevated);
  transform: translateX(2px);
}

/* 4) Reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  .reb-perceptual-dot-circle,
  .reb-perceptual-legend-item {
    transition: opacity 100ms linear;
  }
  .reb-perceptual-dot:hover .reb-perceptual-dot-circle,
  .reb-perceptual-legend-item:hover {
    transform: none;
  }
}

/* 환원 v5.18: 한국어 라벨 "기회 영역" 톤 — uppercase / letter-spacing 제거 (Korean text 용),
   bg-subtle box 유지하되 width 자유 (grid 1fr 으로 폭 채움). align-self: center 로 차트·legend 와 vertical 중심 정렬. */
.reb-perceptual-whitespace {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: var(--bg-subtle);
  width: 100%;
  max-width: 100%;
  align-self: center;
}
.reb-perceptual-whitespace-label {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.reb-perceptual-whitespace-text {
  font-size: 12.5px;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}

/* Differentiation Territory — 환원 v5.20: REB 테마 정합 + selective primary 액센트.
   v5.19 의 emerald 신규 스타일(상단 bar/dot/box) 제거 → 기존 REB 카드 구조(perceptual map 톤) 유지,
   chip/bullet 에만 primary 액센트로 PPT 임팩트 확보. */
.reb-diff-territory {
  position: relative;
  padding: 24px 26px 22px;
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  box-shadow: var(--shadow-xs);
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.reb-diff-territory-title {
  font-size: 16.5px;
  font-weight: 720;
  letter-spacing: -0.012em;
  color: var(--text);
  line-height: 1.3;
  margin: 0;
}

/* 환원 v5.20: 17px hero headline — plain text 톤 (박스/border 제거) */
.reb-diff-territory-headline {
  font-size: 17px;
  font-weight: 720;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.015em;
}

/* Proof Points — 한국어 라벨 톤, primary tint chip (REB 테마 정합) */
.reb-diff-territory-proofs-wrap {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.reb-diff-territory-proofs-label {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.reb-diff-territory-proofs {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.reb-diff-territory-proof {
  display: inline-block;
  padding: 4px 11px;
  border-radius: var(--radius-full);
  background: color-mix(in srgb, var(--primary) 8%, transparent);
  font-size: 12px;
  font-weight: 600;
  color: var(--primary);
  border: 1px solid color-mix(in srgb, var(--primary) 22%, transparent);
}

/* 환원 v5.18: defendability bullet 위계 정합 — label 한국어 톤 (uppercase 제거),
   strategic_directions 의 '성공 논리' bullet 패턴과 정합. */
.reb-diff-detail {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.reb-diff-detail-label {
  font-size: 10.5px;
  font-weight: 720;
  letter-spacing: 0.02em;
  color: var(--text-secondary);
}
.reb-diff-detail-points {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.reb-diff-detail-point {
  position: relative;
  padding-left: 14px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-secondary);
}
.reb-diff-detail-point::before {
  content: '';
  position: absolute;
  left: 0;
  top: 8px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--text-tertiary) 55%, transparent);
}
.reb-diff-detail-point--core {
  font-weight: 620;
  color: var(--text);
}
.reb-diff-detail-point--core::before {
  background: color-mix(in srgb, var(--primary) 55%, transparent);
}

/* .reb-diff-territory-evidence + svg — 통일 규칙(.reb-*-evidence 공유) 으로 흡수, 환원 v3 */

/* ============================================================
   STATUS PAGE — v3 (Wide canvas + horizontal timeline + dual progress)
   --------------------------------------------------------------
   - 컨테이너 확장 (740 → 1100px)
   - Hero: subtle radial gradient + 큰 도넛 + 우측 정보 + 하단 stripe progress
   - Stepper: 수평 timeline + connector line + 큰 marker
   - 수집 디테일: grid layout (가로 폭 활용)
   - Strategic Compass / Direction 카탈로그와 시각 일관성
   ============================================================ */

/* 컨테이너 확장 — status 페이지에만 한정 */
#view-status .reb-container--narrow { max-width: 1100px; }

/* ── Status Header ─────────────────────────────────────────── */
#view-status .reb-status-header { margin-bottom: 24px; }
#view-status .reb-status-title {
  font-size: 28px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--text);
  margin: 6px 0 4px;
}
#view-status .reb-status-subtitle {
  font-size: 14px;
  color: var(--text-secondary);
}

/* ── Hero — wide canvas, dual progress visualization ────────── */
#view-status .reb-status-hero {
  position: relative;
  background:
    radial-gradient(110% 140% at 0% 0%, rgba(99, 102, 241, 0.06) 0%, transparent 55%),
    radial-gradient(120% 140% at 100% 100%, rgba(217, 119, 6, 0.05) 0%, transparent 55%),
    var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 36px 40px 32px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
#view-status .reb-status-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 0%, transparent 60%, rgba(255,255,255,0.5) 100%);
  pointer-events: none;
  border-radius: inherit;
}

#view-status .reb-status-hero-top {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 36px;
  align-items: center;
  padding-bottom: 28px;
  border-bottom: 1px dashed var(--border-light);
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}

/* 큰 도넛 */
#view-status .reb-status-ring-wrap {
  width: 160px;
  height: 160px;
  position: relative;
}
#view-status .reb-status-ring {
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  filter: drop-shadow(0 4px 12px rgba(99, 102, 241, 0.12));
}
#view-status .reb-status-ring-bg {
  fill: none;
  stroke: var(--border-light);
  stroke-width: 7;
}
#view-status .reb-status-ring-fill {
  fill: none;
  stroke: url(#statusRingGrad);
  stroke-width: 7;
  stroke-linecap: round;
  stroke-dasharray: 326.73;
  stroke-dashoffset: 326.73;
  transition: stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
}
#view-status .reb-status-ring-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 2px;
}
#view-status .reb-status-ring-pct {
  font-size: 38px;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
#view-status .reb-status-ring-unit {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-tertiary);
}

#view-status .reb-status-hero-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
#view-status .reb-status-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ai);
  text-transform: uppercase;
}
#view-status .reb-status-hero-eyebrow::before {
  content: "✦";
  font-size: 12px;
}
#view-status .reb-status-hero-title {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.3;
  color: var(--text);
  margin: 4px 0 6px;
}
#view-status .reb-status-hero-eta {
  font-size: 14px;
  color: var(--text-secondary);
  margin: 0;
  line-height: 1.5;
}
#view-status .reb-status-hero-eta--strong {
  font-weight: 600;
  color: var(--primary);
}
#view-status .reb-status-hero-live {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 10px 0 0;
  padding: 5px 12px;
  border-radius: var(--radius-full);
  background: var(--primary-light);
  color: var(--primary-hover);
  font-size: 12px;
  font-weight: 600;
  align-self: flex-start;
}

/* ── Stepper — horizontal timeline (NEW) ────────────────────── */
#view-status .reb-status-stepper {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  z-index: 1;
}

#view-status .reb-step {
  position: relative;
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 0 8px;
  background: transparent;
  border: none;
  border-radius: 0;
  text-align: center;
}

/* connector line — 마커 사이 가로선 */
#view-status .reb-step::after {
  content: "";
  position: absolute;
  top: 20px;
  left: calc(50% + 22px);
  right: calc(-50% + 22px);
  height: 2px;
  background: var(--border-light);
  z-index: 0;
}
#view-status .reb-step:last-child::after { display: none; }

#view-status .reb-step--done::after,
#view-status .reb-step--active::after {
  background: linear-gradient(90deg, var(--success) 0%, var(--success) 100%);
}
#view-status .reb-step--active::after {
  background: linear-gradient(90deg, var(--success) 0%, var(--border-light) 100%);
}

/* 큰 마커 */
#view-status .reb-step-marker {
  position: relative;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  background: var(--bg-elevated);
  border: 2px solid var(--border);
  color: var(--text-tertiary);
  transition: all 250ms var(--ease);
  z-index: 1;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}
#view-status .reb-step--active .reb-step-marker {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
  box-shadow:
    0 0 0 6px rgba(99, 102, 241, 0.12),
    0 4px 12px rgba(99, 102, 241, 0.25);
  transform: scale(1.05);
}
#view-status .reb-step--active .reb-step-marker::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  background: rgba(99, 102, 241, 0.18);
  animation: stepPulse 2s infinite;
  z-index: -1;
}
@keyframes stepPulse {
  0%   { transform: scale(0.95); opacity: 0.7; }
  70%  { transform: scale(1.4); opacity: 0; }
  100% { transform: scale(0.95); opacity: 0; }
}

#view-status .reb-step--done .reb-step-marker {
  background: var(--success);
  border-color: var(--success);
  color: #fff;
}
/* done 마커는 숫자 대신 체크 아이콘 */
#view-status .reb-step--done .reb-step-marker-num {
  font-size: 0;
  position: relative;
}
#view-status .reb-step--done .reb-step-marker-num::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 8px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: translate(-50%, -65%) rotate(-45deg);
}

#view-status .reb-step-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  width: 100%;
  min-width: 0;
}

#view-status .reb-step-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--text-secondary);
  line-height: 1.3;
  white-space: nowrap;
}
#view-status .reb-step--active .reb-step-label,
#view-status .reb-step--done .reb-step-label {
  color: var(--text);
}

#view-status .reb-step-detail {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.4;
  word-break: keep-all;
  max-width: 160px;
}
#view-status .reb-step--active .reb-step-detail {
  color: var(--primary-hover);
  font-weight: 500;
}
#view-status .reb-step--done .reb-step-detail {
  color: var(--success);
  font-weight: 500;
}

/* sub-step 진행 바 (analyze-items 단계) */
#view-status .reb-step-bar {
  margin-top: 6px;
  width: 80%;
  max-width: 140px;
  height: 4px;
  background: rgba(99, 102, 241, 0.12);
  border-radius: var(--radius-full);
  overflow: hidden;
}
#view-status .reb-step-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--primary) 0%, var(--primary-hover) 100%);
  border-radius: var(--radius-full);
  transition: width 600ms var(--ease);
  box-shadow: 0 0 8px rgba(99, 102, 241, 0.3);
}

/* ── Status Collected — grid layout for sources ─────────────── */
#view-status .reb-status-collected {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  margin-bottom: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-xs);
}
#view-status .reb-status-collected-summary {
  padding: 18px 24px;
}
#view-status .reb-status-collected-title {
  font-size: 15px;
  font-weight: 700;
}
#view-status .reb-status-collected-meta {
  font-size: 13px;
  color: var(--text-secondary);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
#view-status .reb-status-collected[open] .reb-status-sources {
  padding: 16px 24px 16px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 12px;
  align-items: center;
}

/* grid 안에서 row 가 stretch 될 때 텍스트가 위로 쏠리지 않도록
   info 영역을 flex column + 수직 center 로 강제 (1줄/2줄 카드 혼재 시 정렬) */
#view-status .reb-status-sources .reb-source-status-row {
  min-height: 64px;
}
#view-status .reb-status-sources .reb-source-status-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}

/* ── Status Actions (분석 결과 보기 CTA) ─────────────────────── */
#view-status .reb-status-actions {
  display: flex;
  justify-content: center;
  margin: 32px 0 16px;
}
#view-status .reb-status-actions .reb-btn {
  padding: 14px 32px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 6px 20px rgba(99, 102, 241, 0.25);
  transition: transform var(--transition), box-shadow var(--transition);
}
#view-status .reb-status-actions .reb-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(99, 102, 241, 0.35);
}

/* ── 모바일 반응형 ───────────────────────────────────────────── */
@media (max-width: 768px) {
  #view-status .reb-status-hero { padding: 24px 20px 22px; }
  #view-status .reb-status-hero-top {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 20px;
    justify-items: center;
  }
  #view-status .reb-status-hero-info { align-items: center; }
  #view-status .reb-status-ring-wrap { width: 130px; height: 130px; }
  #view-status .reb-status-ring-pct { font-size: 32px; }
  #view-status .reb-status-hero-title { font-size: 22px; }

  #view-status .reb-status-stepper {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  #view-status .reb-step { flex-direction: row; align-items: flex-start; text-align: left; gap: 14px; padding: 0; }
  #view-status .reb-step::after { display: none; }
  #view-status .reb-step-body { align-items: flex-start; text-align: left; }
  #view-status .reb-step-detail { max-width: none; }
  #view-status .reb-step-bar { margin-left: 0; }

  #view-status .reb-status-collected[open] .reb-status-sources {
    grid-template-columns: 1fr;
  }
}

/* ================================================================
   Modal / Dialog — 표준 컴포넌트
   ================================================================ */
.reb-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--bg-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 1000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s var(--ease);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.reb-modal-overlay.is-open {
  opacity: 1;
  pointer-events: auto;
}

.reb-modal {
  background: var(--bg-elevated);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-xl);
  width: 100%;
  max-width: 520px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transform: translateY(12px) scale(0.98);
  transition: transform 0.25s var(--ease);
}
.reb-modal--lg { max-width: 720px; }
.reb-modal--sm { max-width: 400px; }
/* 데이터 테이블이 들어가는 모달 — 컬럼 다수 + 동작 버튼이 한 줄에 들어가야 함.
   너무 넓으면 폼 모달이 휑해 보이므로 표 전용으로만 사용. */
.reb-modal--xl { max-width: 960px; }

.reb-modal-overlay.is-open .reb-modal {
  transform: translateY(0) scale(1);
}

.reb-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 24px 12px;
}
.reb-modal-title {
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--text);
  margin-bottom: 4px;
}
.reb-modal-subtitle {
  font-size: 13px;
  color: var(--text-secondary);
  line-height: 1.5;
}

.reb-modal-close {
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 0;
  background: transparent;
  color: var(--text-tertiary);
  font-size: 20px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all var(--transition-fast);
  flex-shrink: 0;
}
.reb-modal-close:hover {
  background: var(--bg-subtle);
  color: var(--text);
}

.reb-modal-body {
  padding: 8px 24px 20px;
  overflow-y: auto;
  flex: 1;
  font-size: 14px;
  line-height: 1.65;
  color: var(--text-secondary);
}

.reb-modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 16px 24px 22px;
  border-top: 1px solid var(--border-light);
  background: var(--bg-subtle);
}

/* Destructive variant */
.reb-modal--destructive .reb-modal-title {
  color: var(--error);
}

/* ── _promptModal helper 의 form ─────────────────────────────────
   prompt() / confirm() native dialog 를 대체하는 in-app modal form.
   기존 .reb-modal-body padding 을 그대로 사용하되 form 전용 spacing 만 추가. */
.reb-prompt-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding-top: 14px;
}
.reb-prompt-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.reb-prompt-label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-primary);
  letter-spacing: -0.01em;
}
.reb-prompt-required {
  color: var(--error, #DC2626);
  margin-left: 3px;
  font-weight: 700;
}
.reb-prompt-form .reb-input {
  width: 100%;
}
.reb-prompt-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
}
.reb-prompt-error {
  font-size: 11.5px;
  font-weight: 500;
  color: var(--error, #DC2626);
  line-height: 1.5;
}
.reb-prompt-field.has-error .reb-input {
  border-color: var(--error, #DC2626);
}
.reb-prompt-field.has-error .reb-input:focus {
  outline-color: var(--error, #DC2626);
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12);
}

/* number + "무제한" 체크박스 inline row.
   체크 시 input 이 disabled 되면 자동으로 회색 톤이 적용되도록 함. */
.reb-prompt-unlimited-row {
  display: flex;
  align-items: center;
  gap: 12px;
}
.reb-prompt-unlimited-row .reb-input {
  flex: 1;
  min-width: 0;
}
.reb-prompt-unlimited-row .reb-input:disabled {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.reb-prompt-unlimited-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.reb-prompt-unlimited-toggle input[type="checkbox"] {
  width: 14px;
  height: 14px;
  accent-color: var(--brand-primary, #7C3AED);
  cursor: pointer;
  margin: 0;
}
.reb-prompt-unlimited-toggle:has(input:checked) {
  color: var(--brand-primary, #7C3AED);
}

/* info 필드 — 입력이 아닌 안내 텍스트 박스. 위험 액션 확인에 주로 사용.
   reb-modal--destructive 컨텍스트에선 왼쪽에 빨간 강조선. */
.reb-prompt-info {
  padding: 12px 14px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--text-primary);
  white-space: pre-line;
}
.reb-modal--destructive .reb-prompt-info {
  border-left: 3px solid var(--error, #DC2626);
  background: rgba(220, 38, 38, 0.04);
}

/* admin shares 행 액션 그룹 — 활동/해지·삭제 한 줄로 정렬, wrap 시 우측 정렬 유지 */
.reb-admin-shares-actions {
  display: inline-flex;
  gap: 6px;
  flex-wrap: nowrap;
  justify-content: flex-end;
}

/* ================================================================
   Tooltip — 표준 컴포넌트
   ================================================================ */
.reb-tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.reb-tooltip-content {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: #1A1A1A;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.45;
  padding: 7px 11px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s var(--ease), transform 0.15s var(--ease);
  z-index: 100;
  box-shadow: var(--shadow-md);
}
.reb-tooltip-content::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1A1A1A;
}

.reb-tooltip:hover .reb-tooltip-content,
.reb-tooltip:focus-within .reb-tooltip-content {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

.reb-tooltip--multiline .reb-tooltip-content {
  white-space: normal;
  max-width: 240px;
  text-align: center;
}

/* Position variants */
.reb-tooltip--bottom .reb-tooltip-content {
  bottom: auto;
  top: calc(100% + 8px);
}
.reb-tooltip--bottom .reb-tooltip-content::after {
  top: auto;
  bottom: 100%;
  border-top-color: transparent;
  border-bottom-color: #1A1A1A;
}

/* ================================================================
   DS v1.1 — Tabs / PIN Input / Number Stepper / Data Table / KPI Card
   Auth & sharing 페이지에서 사용. 신규 페이지는 이 컴포넌트만 사용.
   ================================================================ */

/* ── Tabs ──────────────────────────────────────────────────────── */
.reb-tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--border-light);
  position: relative;
  overflow-x: auto;
  scrollbar-width: none;
}
.reb-tabs::-webkit-scrollbar { display: none; }

.reb-tab {
  appearance: none;
  border: none;
  background: transparent;
  font: inherit;
  color: var(--text-secondary);
  padding: 12px 16px;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.005em;
  cursor: pointer;
  position: relative;
  white-space: nowrap;
  transition: color var(--transition-fast);
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.reb-tab:hover { color: var(--text-primary); background: var(--bg-subtle); }
.reb-tab[aria-selected="true"],
.reb-tab.is-active {
  color: var(--primary);
}
.reb-tab[aria-selected="true"]::after,
.reb-tab.is-active::after {
  content: '';
  position: absolute; left: 12px; right: 12px; bottom: -1px;
  height: 2px;
  background: var(--primary);
  border-radius: 2px 2px 0 0;
}
.reb-tab-count {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  font-size: 11px;
  font-weight: 700;
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  border-radius: 999px;
  line-height: 1.45;
}
.reb-tab[aria-selected="true"] .reb-tab-count,
.reb-tab.is-active .reb-tab-count {
  background: var(--primary-light);
  color: var(--primary);
}

.reb-tab-panel { padding-top: 20px; }
.reb-tab-panel[hidden] { display: none; }

/* Variant: secondary (pill-style segment control) */
.reb-tabs--pill {
  border-bottom: none;
  gap: 4px;
  padding: 4px;
  background: var(--bg-subtle);
  border-radius: var(--radius-lg);
  display: inline-flex;
}
.reb-tabs--pill .reb-tab {
  padding: 7px 14px;
  border-radius: var(--radius-md);
  font-size: 13px;
}
.reb-tabs--pill .reb-tab[aria-selected="true"]::after,
.reb-tabs--pill .reb-tab.is-active::after { display: none; }
.reb-tabs--pill .reb-tab[aria-selected="true"],
.reb-tabs--pill .reb-tab.is-active {
  background: var(--bg-elevated);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* ── PIN Input ─────────────────────────────────────────────────── */
.reb-pin {
  display: inline-flex;
  gap: 8px;
}
.reb-pin-cell {
  width: 44px;
  height: 52px;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 22px;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  caret-color: var(--primary);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              background var(--transition-fast);
  text-transform: uppercase;
}
.reb-pin-cell:focus {
  outline: none;
  border-color: var(--primary);
  background: var(--bg-elevated);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.reb-pin-cell:disabled {
  background: var(--bg-subtle);
  color: var(--text-tertiary);
  cursor: not-allowed;
}
.reb-pin--filled .reb-pin-cell { background: var(--primary-light); border-color: var(--primary); }
.reb-pin--error .reb-pin-cell  { border-color: var(--error); }
.reb-pin--error .reb-pin-cell:focus {
  box-shadow: 0 0 0 3px var(--error-light);
}

/* Compact variant */
.reb-pin--sm .reb-pin-cell {
  width: 36px; height: 42px;
  font-size: 18px;
}

/* ── Number Stepper ────────────────────────────────────────────── */
.reb-stepper {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border-medium);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-elevated);
}
.reb-stepper-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  font-size: 16px; font-weight: 700;
  width: 36px; min-height: 36px;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
  display: inline-flex; align-items: center; justify-content: center;
  line-height: 1;
}
.reb-stepper-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
.reb-stepper-btn:active { background: var(--primary-light); color: var(--primary); }
.reb-stepper-btn:disabled { color: var(--text-tertiary); cursor: not-allowed; background: transparent; }

.reb-stepper-input {
  appearance: none;
  -moz-appearance: textfield;
  border: none;
  border-left: 1px solid var(--border-light);
  border-right: 1px solid var(--border-light);
  background: transparent;
  font-family: inherit;
  font-size: 14px;
  font-weight: 700;
  text-align: center;
  color: var(--text-primary);
  width: 64px;
  outline: none;
}
.reb-stepper-input::-webkit-outer-spin-button,
.reb-stepper-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
.reb-stepper:focus-within {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-light);
}
.reb-stepper-suffix {
  /* 우측 모서리는 부모 overflow:hidden 의 mask 로만 잘려서 둥글어 보이려면
     padding 이 충분히 커야 — 좁으면 사각처럼 인지됨. 명시적으로 우측 라운드도 부여해
     mask 의존성을 없앤다 (1px 은 부모 border 두께). */
  padding: 0 12px;
  font-size: 12px;
  color: var(--text-tertiary);
  display: inline-flex; align-items: center;
  border-left: 1px solid var(--border-light);
  background: var(--bg-subtle);
  border-top-right-radius: calc(var(--radius-md) - 1px);
  border-bottom-right-radius: calc(var(--radius-md) - 1px);
}

/* ── Data Table ────────────────────────────────────────────────── */
.reb-table-wrap {
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  background: var(--bg-elevated);
  overflow: hidden;
}
.reb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
  color: var(--text-primary);
}
.reb-table thead th {
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  padding: 11px 16px;
  text-align: left;
  border-bottom: 1px solid var(--border-light);
  white-space: nowrap;
}
.reb-table tbody td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  vertical-align: middle;
}
.reb-table tbody tr:last-child td { border-bottom: none; }
.reb-table tbody tr:hover { background: var(--bg-subtle); }

.reb-table-cell--mono {
  font-family: 'SF Mono', Menlo, monospace;
  font-size: 12.5px;
  color: var(--text-secondary);
}
.reb-table-cell--num {
  font-variant-numeric: tabular-nums;
  text-align: right;
  font-weight: 600;
}
.reb-table-cell--actions {
  text-align: right;
  white-space: nowrap;
}
.reb-table-empty {
  padding: 48px 16px;
  text-align: center;
  color: var(--text-tertiary);
  font-size: 13.5px;
}

/* Density variants */
.reb-table--compact thead th { padding: 8px 12px; font-size: 11.5px; }
.reb-table--compact tbody td { padding: 9px 12px; font-size: 13px; }

/* Toolbar inside table-wrap */
.reb-table-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-elevated);
}
.reb-table-toolbar-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--text-primary);
}
.reb-table-toolbar-meta {
  font-size: 12.5px; color: var(--text-tertiary);
  margin-left: 8px;
  font-weight: 500;
}

/* ── KPI Card ──────────────────────────────────────────────────── */
.reb-kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-xl);
  padding: 22px 24px 20px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 10px;
  min-height: 140px;
  position: relative;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
              transform var(--transition-fast);
}
.reb-kpi:hover {
  border-color: var(--border-medium);
  box-shadow: var(--shadow-md);
  transform: translateY(-1px);
}
.reb-kpi-head {
  display: flex; align-items: center; justify-content: space-between;
}
.reb-kpi-label {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
}
.reb-kpi-icon {
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--primary-light);
  color: var(--primary);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 14px; font-weight: 700;
  flex: none;
}
.reb-kpi-icon svg { width: 15px; height: 15px; display: block; }
.reb-kpi-value {
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text-primary);
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  display: flex; align-items: baseline; gap: 6px;
}
.reb-kpi-unit {
  font-size: 14px; font-weight: 600;
  color: var(--text-tertiary);
}
.reb-kpi-foot {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px;
  color: var(--text-tertiary);
}
.reb-kpi-delta {
  display: inline-flex; align-items: center; gap: 2px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 11.5px;
}
.reb-kpi-delta--up   { color: var(--success); background: var(--success-light); }
.reb-kpi-delta--down { color: var(--error);   background: var(--error-light); }
.reb-kpi-delta--flat { color: var(--text-tertiary); background: var(--bg-subtle); }

/* Variants */
.reb-kpi--primary { border-color: var(--primary-light); background: linear-gradient(135deg, var(--bg-elevated), var(--primary-light) 280%); }
.reb-kpi--primary .reb-kpi-icon { background: var(--primary); color: #fff; }
.reb-kpi--danger  .reb-kpi-icon { background: var(--error-light);   color: var(--error); }
.reb-kpi--ai      .reb-kpi-icon { background: var(--ai-subtle);     color: var(--ai-accent); }

/* Compact density */
.reb-kpi--sm { padding: 16px 18px 14px; min-height: 108px; }
.reb-kpi--sm .reb-kpi-value { font-size: 24px; }

/* ================================================================
   User Menu & Mode Gates — header dropdown + share-mode UI gates
   ================================================================ */

.reb-user-menu {
  position: relative;
  display: inline-flex;
  align-items: center;
  margin-left: 10px;
}
.reb-user-menu[hidden] { display: none; }

/* ── Trigger — avatar-only, ring on hover (GitHub / Linear / Vercel pattern) ─ */
.reb-user-menu-btn {
  appearance: none;
  border: none;
  background: transparent;
  border-radius: 50%;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font: inherit;
  color: var(--text-primary);
  position: relative;
  transition: box-shadow var(--transition-fast), transform var(--transition-fast);
}
.reb-user-menu-btn:hover {
  box-shadow: 0 0 0 3px var(--bg-subtle);
}
.reb-user-menu.is-open .reb-user-menu-btn {
  box-shadow: 0 0 0 3px var(--primary-light);
}

/* hero 영역(어두운 배경) 위 — ring 색 자동 반전 */
body.reb-hero-active .reb-user-menu-btn:hover {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.10);
}
body.reb-hero-active .reb-user-menu.is-open .reb-user-menu-btn {
  box-shadow: 0 0 0 3px rgba(255,255,255,0.18);
}

.reb-user-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), #818CF8);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  /* hero 위에서도 살짝 떠 보이도록 미세한 가장자리 광 */
  box-shadow: 0 1px 2px rgba(0,0,0,0.15);
}
.reb-user-avatar svg {
  width: 15px;
  height: 15px;
  display: block;
}

/* ── Dropdown ─────────────────────────────────────────────────── */
.reb-user-pop {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 224px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 6px;
  z-index: 50;
  opacity: 0; transform: translateY(-4px) scale(0.98);
  pointer-events: none;
  transition: opacity var(--transition-fast), transform var(--transition-fast);
}
.reb-user-menu.is-open .reb-user-pop {
  opacity: 1; transform: translateY(0) scale(1); pointer-events: auto;
}
.reb-user-pop-head {
  padding: 12px 12px 11px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 5px;
}
.reb-user-pop-name {
  font-size: 13.5px;
  font-weight: 650;
  color: var(--text-primary);
  letter-spacing: -0.005em;
}
.reb-user-pop-email {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
  letter-spacing: 0;
}
.reb-user-pop-role {
  display: inline-block;
  margin-top: 8px;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--primary-light);
  color: var(--primary);
  text-transform: uppercase;
  line-height: 1.5;
}
.reb-user-pop-role--admin { background: var(--primary-light); color: var(--primary); }
.reb-user-pop-role--guest { background: var(--bg-subtle); color: var(--text-tertiary); }
.reb-user-pop-role--share { background: #ECFDF5; color: #047857; }

.reb-user-pop-item {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  appearance: none; border: none; background: transparent; width: 100%;
  text-align: left;
  font: inherit;
  line-height: 1.4;
}
.reb-user-pop-item svg { color: var(--text-tertiary); flex: none; }
.reb-user-pop-item:hover { background: var(--bg-subtle); }
.reb-user-pop-item:hover svg { color: var(--text-secondary); }
.reb-user-pop-item--danger { color: var(--error); }
.reb-user-pop-item--danger svg { color: var(--error); opacity: 0.7; }
.reb-user-pop-item--danger:hover { background: var(--error-light); }
.reb-user-pop-item--danger:hover svg { opacity: 1; }
.reb-user-pop-divider {
  height: 1px;
  background: var(--border-light);
  margin: 5px 4px;
}

/* ── Mode-based UI gates ───────────────────────────────────────── */
/* share 모드: 편집/생성 계열 UI 는 모두 숨김. 캡 명세는 data-cap 속성으로. */
body.reb-mode-share [data-cap="project.create"],
body.reb-mode-share [data-cap="project.edit"],
body.reb-mode-share [data-cap="project.delete"],
body.reb-mode-share [data-cap="project.invite"],
body.reb-mode-share [data-cap="project.share"],
body.reb-mode-share [data-cap="users.manage"],
body.reb-mode-share [data-mode-hide~="share"] {
  display: none !important;
}
body.reb-mode-internal [data-mode-hide~="internal"],
body.reb-mode-guest [data-mode-hide~="guest"] {
  display: none !important;
}
/* viewer 권한이면 편집 류 hide (super_admin 은 자동 owner 라 영향 없음) */
body.reb-role-viewer [data-cap="project.edit"],
body.reb-role-viewer [data-cap="project.delete"],
body.reb-role-viewer [data-cap="project.invite"],
body.reb-role-viewer [data-cap="project.share"] {
  display: none !important;
}

/* ── Share-mode banner — 분석 화면 상단에 노출 ─────────────────── */
.reb-share-banner {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin: 0;
  background: linear-gradient(135deg, #ECFDF5, #F0FDF4);
  border-bottom: 1px solid #A7F3D0;
  font-size: 13px;
  color: #065F46;
}
body.reb-mode-share .reb-share-banner { display: flex; }
.reb-share-banner-mark {
  width: 22px; height: 22px;
  flex: none;
  border-radius: 6px;
  background: #10B981;
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 800;
}
.reb-share-banner-text { flex: 1; }
.reb-share-banner-text strong { font-weight: 700; }
.reb-share-banner-meta {
  font-size: 12px; color: #047857;
  font-weight: 600;
}

/* ================================================================
   Share Modal — owner 가 공유 링크 발급 / 관리 / 멤버
   ================================================================ */

.reb-share-form { display: grid; gap: 20px; }
.reb-share-form-row { display: grid; gap: 7px; }
.reb-share-form-label {
  font-size: 12.5px;
  font-weight: 650;
  color: var(--text-secondary);
  letter-spacing: 0.005em;
}
.reb-share-form-hint {
  font-size: 12px;
  color: var(--text-tertiary);
  line-height: 1.45;
}
.reb-share-form-actions {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 10px;
  padding-top: 18px;
  border-top: 1px solid var(--border-light);
}

.reb-share-caps {
  display: grid; gap: 10px;
}
.reb-share-cap {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}
.reb-share-cap:hover {
  border-color: var(--border-medium);
  background: var(--bg-subtle);
}
.reb-share-cap-text strong {
  display: block;
  font-size: 13.5px; font-weight: 650;
  color: var(--text-primary);
  margin-bottom: 2px;
}
.reb-share-cap-text small {
  display: block;
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.5;
}

/* ── Enterprise success result card ──────────────────────────── */
/* ── 링크 발급 완료 카드 (v3 미니멀) ────────────────────────────
   엔터프라이즈 SaaS 패턴 — 음영 박스 적층 제거, 카드 자체는 흰 배경 + 1px border 만.
   성공 표시는 헤더의 작은 dot+텍스트, PIN 강조는 색이 아니라 typography(mono+size)로. */
.reb-share-result {
  margin-top: 18px;
  padding: 22px 24px 18px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  display: flex; flex-direction: column;
  gap: 16px;
  box-shadow: none;
  position: relative;
}

/* ── 헤더 — 작은 dot + 타이틀 한 줄 (배경색 X) ──────────────── */
.reb-share-result-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}
.reb-share-result-mark {
  width: 22px; height: 22px;
  flex: none;
  margin-top: 1px;
  border-radius: 50%;
  background: var(--success);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.reb-share-result-mark svg { width: 13px; height: 13px; display: block; }
.reb-share-result-head-text { flex: 1; min-width: 0; }
.reb-share-result-title {
  font-size: 14.5px; font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  margin-bottom: 3px;
}
.reb-share-result-sub {
  font-size: 12.5px;
  color: var(--text-tertiary);
  line-height: 1.6;
}
.reb-share-result-sub b { color: var(--text-primary); font-weight: 650; }

/* ── 정보 섹션 (URL / PIN) — 음영 박스 없음, 일반 라벨+입력 폼 패턴 ── */
.reb-share-result-section { padding: 0; }
.reb-share-result-section-head {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 7px;
}
.reb-share-result-label {
  font-size: 11.5px; font-weight: 650;
  color: var(--text-secondary);
  letter-spacing: 0;
  text-transform: none;
}
/* 작은 inline pill — uppercase 도 폐기. "한 번만 표시" 정도의 보조 안내. */
.reb-share-result-once {
  display: inline-block;
  padding: 1px 7px;
  font-size: 10.5px; font-weight: 600;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: 999px;
  letter-spacing: 0;
  text-transform: none;
}
.reb-share-result-row {
  display: flex; align-items: stretch; gap: 8px;
}
.reb-share-result-row .reb-share-result-input {
  flex: 1;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12.5px;
  color: var(--text-secondary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
}
.reb-share-result-row .reb-btn { flex: none; }

/* ── PIN — 노란 배경 폐기. 같은 input 컨테이너 + typography(mono+큰글자+자간) 로만 차별화 ── */
.reb-share-result-section--pin {
  background: transparent;
}
.reb-share-result-pinbox {
  display: flex; align-items: stretch; gap: 8px;
}
.reb-share-result-pintext {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.5em;
  padding: 0 0 0 0.5em; /* letter-spacing 좌측 보정으로 중앙 정렬 */
  color: var(--text-primary);
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  user-select: all;
  transition: background var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);
  min-height: 42px;
}
.reb-share-result-pintext:hover {
  border-color: var(--border-medium);
  background: var(--bg-subtle);
}
.reb-share-result-pintext:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}
.reb-share-result-pintext.is-copied {
  background: var(--success-light);
  border-color: var(--success);
  color: var(--success);
}

/* ── 보안 안내 — 박스 폐기, 작은 회색 텍스트 + 자물쇠 한 줄 ──── */
.reb-share-result-tip {
  display: flex; align-items: center; gap: 7px;
  padding: 0;
  margin-top: 2px;
  background: transparent;
  border: none;
  font-size: 11.5px;
  color: var(--text-tertiary);
  line-height: 1.55;
}
.reb-share-result-tip svg { flex: none; color: var(--text-tertiary); width: 12px; height: 12px; }
.reb-share-result-tip b { color: var(--text-secondary); font-weight: 600; }

/* ── 액션 ───────────────────────────────────────────────────── */
.reb-share-result-actions {
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end;
  padding: 16px 0 0;
  margin-top: 4px;
  border-top: 1px solid var(--border-light);
}
/* 매우 좁은 화면 — primary CTA(공유 메시지 복사)는 한 줄 전체 차지, 나머지는 아래 줄. */
@media (max-width: 480px) {
  .reb-share-result-actions { justify-content: stretch; }
  .reb-share-result-actions #share-result-copy-msg { flex: 1 1 100%; justify-content: center; }
}

/* members tab help */
.reb-share-members-help {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--bg-subtle);
  border-radius: var(--radius-md);
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.6;
}
.reb-share-members-help strong {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 6px;
}
.reb-share-members-help ul {
  margin: 0; padding-left: 18px;
}
.reb-share-members-help li { margin-bottom: 3px; }
.reb-share-members-help li b { color: var(--text-primary); font-weight: 700; }

/* table inside modal — tighter */
.reb-modal .reb-table-wrap { width: 100%; }
.reb-modal .reb-table thead th { font-size: 11px; padding: 9px 14px; }
.reb-modal .reb-table tbody td { padding: 12px 14px; font-size: 13px; }
.reb-share-link-caps {
  display: inline-flex; flex-wrap: wrap; gap: 5px;
}

/* ── 링크 관리 — list-of-cards 패턴 ─────────────────────────────
   표 컬럼 폭 끼어맞춤이 행마다 wrap 을 다르게 만드는 문제를 해소.
   각 카드가 [타이틀행 + 메타라인] 두 단으로 일관된 시각 무게. */
.reb-share-list {
  display: flex; flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}
.reb-share-list-empty {
  padding: 28px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  border: 1px dashed var(--border-light);
  border-radius: var(--radius-md);
}

/* ── tag variants (chip 상태 표시) ────────────────────────────── */
.reb-tag--ok      { background: rgba(5, 150, 105, 0.10); color: #047857; }
.reb-tag--danger  { background: rgba(220, 38, 38, 0.10); color: #B91C1C; }
.reb-tag--muted   { background: var(--bg-subtle); color: var(--text-tertiary); }
.reb-tag--xs {
  padding: 2px 7px;
  font-size: 10.5px;
  font-weight: 600;
  border-radius: 4px;
}

/* ── chip filter (상태 토글 그룹) ──────────────────────────────── */
.reb-chip-filter {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border: 1px solid var(--border-light);
  background: var(--bg-elevated);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  cursor: pointer;
  transition: all .12s ease;
}
.reb-chip-filter:hover {
  border-color: var(--brand-primary, #7C3AED);
  color: var(--brand-primary, #7C3AED);
}
.reb-chip-filter.is-active {
  background: var(--brand-primary, #7C3AED);
  border-color: var(--brand-primary, #7C3AED);
  color: #fff;
}
.reb-admin-shares-filters {
  display: inline-flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* ── admin → 공유 링크 목록 셀 ───────────────────────────────── */
.reb-admin-shares-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 13px;
  color: var(--text-primary);
}
.reb-admin-shares-label-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 280px;
}
.reb-admin-shares-pin {
  font-size: 11px;
  opacity: 0.7;
}
.reb-admin-shares-project {
  font-size: 11.5px;
  color: var(--text-tertiary);
  margin-top: 2px;
}
.reb-admin-shares-caps {
  display: inline-flex;
  gap: 4px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.reb-admin-shares-owner {
  font-size: 12.5px;
  color: var(--text-secondary);
}

/* ── 공유 링크 활동 상세 ────────────────────────────────────────────────
   목록과 swap 되는 in-place view. 모달 안에 또 모달을 띄우면 UX 가 깨져서
   같은 패널 안에서 push/pop 패턴으로 구성. */
.reb-share-activity-loading,
.reb-share-act-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--text-tertiary);
}
.reb-share-act-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 0 16px;
  border-bottom: 1px solid var(--border-light);
  margin-bottom: 16px;
}
.reb-share-act-title {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  flex: 1;
}
.reb-share-act-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
/* KPI 4 grid — 모바일은 2x2 */
.reb-share-act-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 640px) {
  .reb-share-act-kpi-grid { grid-template-columns: repeat(2, 1fr); }
}
.reb-share-act-kpi {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  min-width: 0;
}
.reb-share-act-kpi-label {
  font-size: 11px;
  color: var(--text-tertiary);
  margin-bottom: 6px;
  letter-spacing: -0.01em;
}
.reb-share-act-kpi-value {
  font-size: 18px;
  font-weight: 700;
  color: var(--text-primary);
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reb-share-act-kpi-value.reb-share-act-kpi-ts {
  font-size: 13px;
  font-weight: 600;
}
.reb-share-act-kpi-unit {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-tertiary);
  margin-left: 2px;
}
.reb-share-act-kpi-sep,
.reb-share-act-kpi-limit {
  color: var(--text-tertiary);
  font-weight: 500;
}
.reb-share-act-kpi-muted {
  color: var(--text-tertiary);
  font-size: 13px;
  font-weight: 500;
}

/* 대화 timeline */
.reb-share-act-section-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-secondary);
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.reb-share-act-section-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: 9px;
  font-size: 10.5px;
  font-weight: 600;
  background: var(--bg-subtle);
  color: var(--text-tertiary);
}
.reb-share-act-chat {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.reb-share-act-msg {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.reb-share-act-msg-time {
  font-size: 11px;
  font-weight: 600;
  color: var(--text-tertiary);
  letter-spacing: 0.02em;
}
.reb-share-act-msg-q,
.reb-share-act-msg-a {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}
.reb-share-act-msg-role {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  font-size: 11px;
  font-weight: 700;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.reb-share-act-msg-role--a {
  background: var(--brand-soft, rgba(124, 58, 237, 0.12));
  color: var(--brand-primary, #7C3AED);
}
.reb-share-act-msg-body {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  line-height: 1.55;
  color: var(--text-primary);
  white-space: pre-wrap;
  word-break: break-word;
}
.reb-share-act-msg-q .reb-share-act-msg-body {
  font-weight: 500;
}
.reb-share-act-msg-a .reb-share-act-msg-body {
  color: var(--text-secondary);
}

/* Rich answer (markdown + 차트 + evidence + followups) — 채팅 UI 와 동일한 컴포넌트를
   재사용하지만 어드민 맥락에서는 약간 더 컴팩트하게 보이도록 spacing 미세 조정. */
.reb-share-act-msg-body--rich .reb-chat-answer {
  font-size: 13px;
  line-height: 1.6;
  margin-bottom: 8px;
}
.reb-share-act-msg-body--rich .reb-chat-answer strong { font-weight: 700; color: var(--text-primary); }
.reb-share-act-msg-body--rich .reb-chat-answer ul { margin: 6px 0 6px 18px; padding: 0; }
.reb-share-act-msg-body--rich .reb-chat-answer li { margin: 2px 0; }
.reb-share-act-msg-body--rich .reb-chat-viz {
  margin: 8px 0 4px;
  padding: 10px 12px 8px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  max-width: 560px;
}
/* 어드민은 "확인용" — 한 화면에 여러 대화의 차트를 빠르게 스캔.
   row 를 grid 로 재구성해 [label | bar | value] 를 한 줄에 inline 배치.
   row 당 높이 ~50px → ~18px (약 65% 압축). 차트 본연의 시각 정보(상대 비교)는 유지. */
.reb-share-act-msg-body--rich .reb-chat-viz-title {
  font-size: 11.5px;
  font-weight: 700;
  margin-bottom: 6px;
  color: var(--text-secondary);
  text-transform: none;
  letter-spacing: -0.01em;
}
.reb-share-act-msg-body--rich .reb-chat-viz-bar-row {
  display: grid;
  grid-template-columns: minmax(70px, 1fr) 3fr auto;
  gap: 10px;
  align-items: center;
  padding: 3px 0;
}
.reb-share-act-msg-body--rich .reb-chat-viz-bar-row + .reb-chat-viz-bar-row {
  border-top: 0;
}
/* bar-top 은 단순 wrapper — 그 자식(label, val)을 row(grid) 의 직속 child 로 만들어서
   grid column 에 직접 배치 가능하게. */
.reb-share-act-msg-body--rich .reb-chat-viz-bar-top {
  display: contents;
}
.reb-share-act-msg-body--rich .reb-chat-viz-bar-label {
  grid-column: 1;
  font-size: 11.5px;
  font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.reb-share-act-msg-body--rich .reb-chat-viz-bar-track {
  grid-column: 2;
  height: 6px;
  border-radius: 4px;
}
.reb-share-act-msg-body--rich .reb-chat-viz-bar-fill {
  height: 6px;
  border-radius: 4px;
}
.reb-share-act-msg-body--rich .reb-chat-viz-bar-val {
  grid-column: 3;
  font-size: 11.5px;
  font-weight: 700;
  color: var(--text-secondary);
  min-width: 36px;
  text-align: right;
}
.reb-share-act-msg-body--rich .reb-chat-viz--donut .reb-chat-viz-donut-ring {
  width: 64px;
  height: 64px;
}
.reb-share-act-msg-body--rich .reb-chat-viz--table table {
  font-size: 11px;
}
.reb-share-act-msg-body--rich .reb-chat-viz--table th,
.reb-share-act-msg-body--rich .reb-chat-viz--table td {
  padding: 5px 7px;
}
.reb-share-act-msg-body--rich .reb-chat-evidence-wrap {
  margin-top: 8px;
  max-width: 560px;
}

.reb-share-list-item {
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  padding: 14px 16px;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}
.reb-share-list-item:hover {
  border-color: var(--border);
  box-shadow: var(--shadow-sm);
}
.reb-share-list-item--revoked {
  background: var(--bg-subtle);
  opacity: 0.72;
}
.reb-share-list-item--revoked:hover { opacity: 0.92; }

.reb-share-list-head {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  margin-bottom: 8px;
}
.reb-share-list-title {
  display: flex; align-items: center; gap: 7px;
  flex: 1; min-width: 0;
}
.reb-share-list-label {
  font-size: 14px; font-weight: 650;
  color: var(--text-primary);
  letter-spacing: -0.005em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reb-share-list-status {
  flex: none;
  background: var(--bg-subtle) !important;
  color: var(--text-tertiary) !important;
  border: 1px solid var(--border-light);
}

.reb-share-list-actions {
  display: inline-flex; gap: 6px; flex: none;
  align-items: center;
}
/* 카드 액션 버튼 — 작은 secondary 버튼 3개가 한 줄에 들어가는 컨텍스트.
   - svg 크기 명시 (셀렉터 단위로 size 가 안 잡히던 문제 해결)
   - flex 정렬을 명시해 텍스트/아이콘 baseline 어긋남 제거
   - line-height 1 로 button 박스 내부 vertical centering 안정화 */
.reb-share-list-actions .reb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  line-height: 1;
  padding: 6px 10px;
  min-height: 28px;
}
.reb-share-list-actions .reb-btn svg {
  width: 12px; height: 12px;
  flex: none;
  display: block;
}

.reb-share-list-meta {
  display: flex; flex-wrap: wrap;
  align-items: center;
  row-gap: 6px;
  font-size: 12.5px;
  color: var(--text-secondary);
  line-height: 1.5;
}
.reb-share-list-meta > * { display: inline-flex; align-items: center; }
.reb-share-list-meta .reb-share-list-caps {
  display: inline-flex; flex-wrap: wrap; gap: 4px;
  margin-right: 2px;
}
.reb-share-list-sep {
  color: var(--text-tertiary);
  padding: 0 8px;
  user-select: none;
}
/* revoked 카드의 메타는 더 dim */
.reb-share-list-item--revoked .reb-share-list-meta { color: var(--text-tertiary); }
/* 권한 칩 — 의미별 색 톤 (분석/미디어/데이터/AI 채팅) */
.reb-cap-tag {
  display: inline-flex; align-items: center;
  height: 22px;
  padding: 0 9px;
  font-size: 11.5px; font-weight: 600;
  line-height: 1;
  border-radius: 999px;
  background: var(--bg-subtle);
  color: var(--text-secondary);
  border: 1px solid var(--border-light);
  white-space: nowrap;
}
.reb-cap-tag--media    { background: #EFF6FF; color: #1D4ED8; border-color: #BFDBFE; }
.reb-cap-tag--explorer { background: #F5F3FF; color: #6D28D9; border-color: #DDD6FE; }
.reb-cap-tag--chat     { background: var(--ai-subtle); color: var(--ai-accent, var(--ai)); border-color: var(--ai-border); }
/* default 분석 칩 — 모든 링크 공통이라 미세한 톤만 */
.reb-cap-tag--base     { background: var(--bg-subtle); color: var(--text-secondary); border-color: var(--border-light); }

/* 라벨 셀 안의 PIN 자물쇠 — 권한이 아니라 "보안 조건" 임을 시각으로 분리 */
.reb-share-label {
  display: inline-flex; align-items: center; gap: 6px;
}
.reb-share-pin-lock {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px;
  color: var(--text-tertiary);
  flex: none;
}
.reb-share-pin-lock svg { width: 13px; height: 13px; display: block; }
.reb-share-pin-lock[data-on="true"] { color: var(--ai-accent, var(--ai)); }

/* 표 셀 안의 "—" 같은 무값 표현 — 시각적으로 살짝 죽여 데이터에 집중. */
.reb-text-muted { color: var(--text-tertiary); }

/* (구) 공유 링크 관리 표 — list-of-cards 패턴으로 교체되면서 더 이상 사용 안 됨.
   .reb-share-list-* 컴포넌트로 이동. 셀렉터는 미사용이라 삭제. */

/* ── 멤버 초대 inline combobox 패널 ────────────────────────────
   prompt() 두 번 띄우던 흐름을 폐기하고, 멤버 탭 안에서 자동완성으로 가입자만 선택.
   소속/조직 검색 UX 의 표준 패턴 (검색 input + 결과 dropdown + 선택 잠금 + 역할 select + 추가). */
.reb-member-invite {
  display: flex; align-items: stretch; gap: 8px;
  margin: 12px 0 14px;
  padding: 12px;
  background: var(--bg-subtle);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  flex-wrap: wrap;
}
.reb-member-invite > .reb-combobox { flex: 1 1 280px; min-width: 240px; position: relative; }
.reb-member-invite-role { flex: 0 0 200px; max-width: 200px; }

.reb-combobox { position: relative; }
.reb-combobox-field {
  position: relative;
  display: flex; align-items: stretch;
}
.reb-combobox-field .reb-combobox-input {
  width: 100%;
  padding-left: 32px;
  padding-right: 30px;
}
.reb-combobox-field .reb-combobox-input[readonly] {
  background: var(--bg-elevated);
  color: var(--text-primary);
  cursor: default;
}
.reb-combobox-icon {
  position: absolute;
  left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--text-tertiary);
  pointer-events: none;
}
.reb-combobox-clear {
  position: absolute;
  right: 8px; top: 50%; transform: translateY(-50%);
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border: none; background: var(--bg-subtle);
  color: var(--text-tertiary);
  border-radius: 50%;
  font-size: 14px; line-height: 1;
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}
.reb-combobox-clear:hover { background: var(--border); color: var(--text-primary); }

/* dropdown 결과 패널 */
.reb-combobox-pop {
  position: absolute;
  top: calc(100% + 4px); left: 0; right: 0;
  z-index: 10;
  max-height: 280px;
  overflow-y: auto;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 4px;
}
.reb-combobox-item {
  display: flex; align-items: center; gap: 10px;
  width: 100%;
  padding: 8px 10px;
  border: none;
  background: transparent;
  text-align: left;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast);
}
.reb-combobox-item:hover,
.reb-combobox-item.is-active {
  background: var(--primary-light);
}
.reb-combobox-item-avatar {
  flex: none;
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--primary);
  color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700;
  letter-spacing: 0;
}
.reb-combobox-item-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 1px;
}
.reb-combobox-item-name {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reb-combobox-item-email {
  font-size: 11.5px;
  color: var(--text-secondary);
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.reb-combobox-item-role {
  flex: none;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-tertiary);
  padding: 2px 7px;
  background: var(--bg-subtle);
  border-radius: 999px;
  border: 1px solid var(--border-light);
}
.reb-combobox-empty {
  display: flex; flex-direction: column; gap: 4px;
  padding: 14px 12px;
  font-size: 12.5px;
  color: var(--text-secondary);
  text-align: center;
}
.reb-combobox-empty-hint {
  font-size: 11.5px;
  color: var(--text-tertiary);
}

/* Destructive modifier — 기본은 보조 톤(시각 노이즈 최소화)을 유지하고,
   hover/active 에서만 위험색을 드러내는 절제된 destructive 패턴.
   "완전 삭제" 처럼 비가역 작업에 사용. */
.reb-btn-secondary.reb-btn--danger {
  color: var(--error);
  border-color: var(--border-light);
}
.reb-btn-secondary.reb-btn--danger:hover {
  color: #fff;
  background: var(--error);
  border-color: var(--error);
}
.reb-btn-secondary.reb-btn--danger:focus-visible {
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

/* ================================================================
   Admin Dashboard — KPI strip + settings form
   ================================================================ */

.reb-admin-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 14px;
  margin-top: 14px;
  align-items: stretch;
}
.reb-admin-kpis > .reb-kpi { height: 100%; }

/* KPI 카드 중 클릭으로 액션 이동이 가능한 케이스 — hover 시 살짝 들림 + 커서.
   "가입 대기" KPI 가 0 이상일 때 admin 이 즉시 해당 섹션으로 점프하는 단축키 역할. */
.reb-kpi--clickable { cursor: pointer; transition: transform var(--transition-fast), box-shadow var(--transition-fast); }
.reb-kpi--clickable:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}

/* "가입 대기 N 명" 이 1 이상이면 reb-kpi--alert 클래스가 JS 로 토글 — 색으로 시선 끌기. */
.reb-kpi--alert {
  background: linear-gradient(135deg, #FFFBEB, var(--bg-elevated));
  border-color: #FDE68A;
}
.reb-kpi--alert .reb-kpi-icon { background: #FEF3C7; color: #B45309; }
.reb-kpi--alert .reb-kpi-value { color: #92400E; }

/* ================================================================
   Admin Dashboard — 가입 승인 대기 (v3, modern approval inbox)
   --------------------------------------------------------------
   시니어 UX 검토 반영:
     · alert 톤 폐기 — 일상 inbox 작업의 차분한 톤
     · 카드 status 칩 제거 — 섹션이 곧 상태
     · 라벨 아이콘 제거 — 정보 가치 없는 장식
     · 정보 위계: 이름 → 본인 발화(사유) → 메타라인 → 권한 → 결정
     · grant 박스 폐기 → 액션 인접 inline
   ================================================================ */
.reb-admin-pending {
  margin: 0 0 22px;
  padding: 0;
  background: transparent;
  border: none;
}
.reb-admin-pending-head {
  display: flex; align-items: baseline; gap: 10px;
  margin-bottom: 12px;
}
.reb-admin-pending-title {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.005em;
}
.reb-admin-pending-count {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--primary, #4F46E5); color: #fff;
  font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.reb-admin-pending-sub {
  font-size: 12.5px; color: var(--text-tertiary); line-height: 1.5;
}

.reb-admin-pending-list { display: grid; gap: 10px; }

/* 카드 — 결정의 단위. hover 시 살짝 떠올라 actionable 임을 시사 */
.reb-admin-pending-card {
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 18px 20px;
  background: var(--bg-elevated);
  border: 1px solid var(--border-light);
  border-radius: var(--radius-md);
  transition: border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.reb-admin-pending-card:hover {
  border-color: var(--border-medium);
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 6px 18px rgba(15, 23, 42, 0.05);
}

/* (1) 헤더 — 큰 이름 + 메타라인 한 줄 (이메일 · 소속 · 시간) */
.reb-admin-pending-card-head {
  display: flex; flex-direction: column; gap: 4px;
  min-width: 0;
}
.reb-admin-pending-name {
  font-size: 16px; font-weight: 700; color: var(--text-primary);
  letter-spacing: -0.012em;
  line-height: 1.3;
}

/* 영문명 secondary — 한글명 옆에 한 톤 낮춰 표시. 사용자 표 / 가입 승인 카드 공용.
   font-weight 와 색을 한 단계 낮춰 한글명이 primary 임을 유지하면서도 영문 호칭 식별 가능. */
.reb-admin-user-name-en {
  margin-left: 6px;
  font-weight: 500;
  color: var(--text-tertiary);
  letter-spacing: 0;
}
.reb-admin-pending-name .reb-admin-user-name-en {
  font-size: 13.5px;
  margin-left: 8px;
  vertical-align: 1px;
}
.reb-admin-pending-meta {
  display: flex; flex-wrap: wrap; align-items: center;
  gap: 0 8px;
  font-size: 12.5px; color: var(--text-tertiary);
  line-height: 1.6;
  min-width: 0;
}
.reb-admin-pending-meta-email {
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 12px;
  color: var(--text-secondary);
  word-break: break-all;
}
.reb-admin-pending-meta-sep {
  color: var(--border-medium);
  user-select: none;
}

/* (2) 가입 사유 — 본인 발화. 결정의 핵심 정보이므로 살짝 시각적 우대 */
.reb-admin-pending-reason {
  display: flex; flex-direction: column; gap: 6px;
}
.reb-admin-pending-reason-label {
  font-size: 11px; font-weight: 700; color: var(--text-tertiary);
  letter-spacing: 0.04em; text-transform: uppercase;
}
.reb-admin-pending-reason-text {
  margin: 0;
  padding: 2px 0 2px 12px;
  border-left: 2px solid var(--primary, #4F46E5);
  font-size: 13.5px; color: var(--text-primary);
  line-height: 1.65;
  white-space: pre-wrap; word-break: break-word;
  font-style: normal;
}
.reb-admin-pending-reason--empty .reb-admin-pending-reason-empty {
  font-size: 13px; color: var(--text-tertiary);
  line-height: 1.5;
}

/* (3) 푸터 — divider 위. 좌: 권한 inline / 우: 액션 */
.reb-admin-pending-foot {
  display: flex; align-items: center;
  gap: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--border-light);
}
.reb-admin-pending-grant-inline {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: 8px 12px;
  flex: 1;
  min-width: 0;
}
.reb-admin-pending-foot-label {
  font-size: 12px; font-weight: 650; color: var(--text-tertiary);
  white-space: nowrap;
}
.reb-admin-pending-grant-select {
  padding: 6px 28px 6px 10px;
  height: 30px;
  font-size: 12.5px;
  line-height: 1.2;
  min-width: 240px;
  max-width: 320px;
  border-radius: var(--radius-sm);
  background-position: right 8px center;
}
.reb-admin-pending-quota-hint {
  font-size: 12px; color: var(--text-tertiary);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.reb-admin-pending-quota-hint b {
  color: var(--text-secondary);
  font-weight: 600;
}

/* (4) Actions — 컴팩트, 우측 정렬. 거절은 ghost. */
.reb-admin-pending-actions {
  display: inline-flex; gap: 6px;
  align-items: center;
  flex: none;
}
.reb-admin-pending-actions .reb-btn {
  white-space: nowrap;
  justify-content: center;
}
.reb-admin-pending-actions .reb-btn-ghost {
  color: var(--text-tertiary);
}
.reb-admin-pending-actions .reb-btn-ghost:hover {
  color: var(--danger, #DC2626);
  background: var(--bg-subtle);
}

@media (max-width: 720px) {
  .reb-admin-pending-card { padding: 16px; gap: 12px; }
  .reb-admin-pending-foot {
    flex-direction: column; align-items: stretch;
    gap: 12px;
  }
  .reb-admin-pending-grant-inline {
    flex-direction: column; align-items: stretch;
    gap: 4px;
  }
  .reb-admin-pending-grant-select {
    width: 100%; max-width: none; min-width: 0;
  }
  .reb-admin-pending-quota-hint { white-space: normal; }
  .reb-admin-pending-actions {
    justify-content: flex-end;
  }
  .reb-admin-pending-actions .reb-btn { min-width: 84px; }
}

/* user 행 상태 칩 */
.reb-user-status {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px;
  font-size: 11px; font-weight: 650;
  border-radius: 999px;
  letter-spacing: 0.01em;
}
.reb-user-status--active   { background: var(--success-light); color: var(--success); }
.reb-user-status--pending  { background: #FEF3C7;             color: #92400E; }
.reb-user-status--disabled { background: var(--bg-subtle);    color: var(--text-tertiary); }

/* admin 탭 — analysis 헤더 다음 충분한 호흡 */
#view-admin .reb-tabs { margin-top: 28px; }
#view-admin .reb-tab-panel { margin-top: 18px; }

.reb-admin-settings-form {
  display: grid; gap: 18px; padding-top: 8px;
}
.reb-admin-setting-row {
  display: grid; gap: 8px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border-light);
}
.reb-admin-setting-row:last-of-type { border-bottom: none; padding-bottom: 0; }
/* stepper 는 grid item 의 기본 stretch 로 cell 너비(1fr)를 다 먹어 우측에 빈 흰색 박스가 드러남.
   콘텐츠 폭만큼만 차지하도록 justify-self 로 잘라줌. */
.reb-admin-setting-row > .reb-stepper { justify-self: start; }

/* 한 row 안에 stepper 2개를 가로로 묶는 컨테이너 (예: 일일/월간 한도).
   stepper 들이 각자 자기 폭으로 좌측에 나란히 정렬되도록 flex. */
.reb-stepper-cluster {
  display: inline-flex; flex-wrap: wrap;
  gap: 10px 14px;
}
.reb-admin-setting-row > .reb-stepper-cluster { justify-self: start; }

/* ── Data Table 마감 정리 — admin / share modal 공통 ──────────── */
.reb-table thead th { vertical-align: middle; }
.reb-table tbody td { vertical-align: middle; }
.reb-table-cell--num   { text-align: right; font-variant-numeric: tabular-nums; }
.reb-table-cell--mono  { font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 12.5px; color: var(--text-secondary); }
.reb-table-cell--actions {
  text-align: right;
  white-space: nowrap;
}
.reb-table-cell--actions .reb-btn { margin-left: 6px; }
.reb-table-cell--actions .reb-btn:first-child { margin-left: 0; }
.reb-table th.reb-table-cell--num,
.reb-table th.reb-table-cell--actions { text-align: right; }

/* 인라인 select (역할 변경) — row height 맞춤 */
.reb-table .reb-input[data-user-role],
.reb-table .reb-input[data-member-role] {
  padding: 5px 28px 5px 10px !important;
  font-size: 12.5px !important;
  height: 30px;
  line-height: 1.2;
  min-width: 130px;
  border-radius: var(--radius-sm);
  background-position: right 8px center;
}

/* "나" 표식 — tag 대신 텍스트로 더 절제 */
.reb-table-me {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  font-size: 10.5px;
  font-weight: 650;
  color: var(--text-tertiary);
  background: var(--bg-subtle);
  border-radius: 4px;
  letter-spacing: 0.02em;
  vertical-align: 1px;
}

/* 동작 컬럼 안의 작은 secondary 버튼들 — 미세 정돈 */
.reb-table-cell--actions .reb-btn-secondary {
  padding: 5px 11px;
  font-size: 12px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  gap: 5px;
}
.reb-table-cell--actions .reb-btn-secondary svg { width: 12px; height: 12px; }

/* secondary 버튼에 미세한 brand accent — 헤더의 "공유" 같이
   여러 secondary 사이에서 한 단계만 위로 띄우고 싶을 때. */
.reb-btn-secondary.reb-btn--accent {
  border-color: var(--primary-light);
  background: linear-gradient(135deg, var(--bg-elevated), var(--primary-light) 320%);
  color: var(--primary-hover);
}
.reb-btn-secondary.reb-btn--accent:hover {
  border-color: var(--primary);
  background: var(--primary-light);
  color: var(--primary-hover);
}
.reb-btn-secondary.reb-btn--accent svg { color: var(--primary); }

/* 한도 셀의 "일/월" 표기 — 시각적으로 묶기 */
.reb-quota-cell {
  display: inline-flex; align-items: baseline; gap: 8px;
  font-variant-numeric: tabular-nums;
}
.reb-quota-cell .reb-quota-num { font-weight: 600; color: var(--text-primary); }
.reb-quota-cell .reb-quota-sep { color: var(--border-medium); font-weight: 400; }
.reb-quota-cell .reb-quota-lbl {
  font-size: 10.5px; font-weight: 650; letter-spacing: 0.04em;
  color: var(--text-tertiary); text-transform: uppercase;
}