/* ═══════════════════════════════════════════════════════════════
   OpenSurvey Dataspace AI — MOCKUP ENGINE CSS (master snapshot)
   출처: index.html(Hero) 스타일 블록 중 .frame 이후 전부
   = 브라우저 셸 · .app · 레일 · 사이드바 · 챗 · 캔버스 · 홈/컴포저
     · 아티팩트 패널 · 설문 에디터 · 표/차트 · AI 심볼 · 스켈레톤 등.
   제외: Hero 크롬(.stage/.frame-wrap/.page-*/.hero-tabs)·base64 배경.
   토큰/리셋은 tokens.css 에 분리. index.html 은 건드리지 않음(스냅샷).
═══════════════════════════════════════════════════════════════ */

.frame {
  position: relative; z-index: 2;
  width: 100%;
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.90);
  box-shadow:
    0 0 0 1px rgba(180,196,230,0.4),
    0 2px 1px rgba(255,255,255,0.8) inset,
    0 48px 120px rgba(100,120,160,0.22),
    0 16px 40px rgba(100,120,160,0.16),
    0 4px 8px rgba(100,120,160,0.10);
  display: flex;
  flex-direction: column;
}

/* ═══════════════════════════════════════════════
   BROWSER CHROME
═══════════════════════════════════════════════ */
.browser-chrome {
  display: none;   /* 상태표시줄(트래픽 라이트·주소창) 제거 — 의미 없음 */
  height: 38px;
  background: rgba(255,255,255,0.55);
  backdrop-filter: blur(20px) saturate(1.4);
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  border-bottom: 1px solid rgba(255,255,255,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  gap: 0;
  flex-shrink: 0;
  position: relative;
}
.bc-controls {
  display: flex; gap: 6px; align-items: center;
  position: absolute; left: 14px;
}
.bc-btn {
  width: 11px; height: 11px; border-radius: 50%;
}
.bc-close  { background: #FF5F57; }
.bc-min    { background: #FEBC2E; }
.bc-max    { background: #28C840; }
.bc-urlbar {
  width: 260px;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(255,255,255,0.8);
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-radius: 7px;
  height: 24px;
  display: flex; align-items: center; justify-content: center;
  gap: 5px;
  font-size: 11px; color: #6B7280;
  font-family: var(--font);
}
.bc-spacer { display: none; }

/* ═══════════════════════════════════════════════
   APP SHELL
═══════════════════════════════════════════════ */
.app {
  display: grid;
  grid-template-columns: 52px 200px 1fr 0px;   /* 디폴트: 레일 닫힘(아이콘만) */
  grid-template-rows: 1fr;
  grid-template-areas:
    "rail sidebar canvas artifact";
  height: 740px;
  position: relative;   /* 다운로드 토스트 등 오버레이 앵커 */
  background: transparent;   /* 패널 블러로 히어로 배경 은은히 비침 */
  transition: grid-template-columns 560ms cubic-bezier(0.32, 0.72, 0, 1);
}
/* 레일 호버 → 펼침 */
.app:has(.rail:hover) {
  grid-template-columns: 200px 200px 1fr 0px;
}
/* 아티팩트 열림 */
.app.artifact-open {
  grid-template-columns: 52px 200px 1fr 42%;
}
.app.artifact-open:has(.rail:hover) {
  grid-template-columns: 200px 200px 1fr 42%;
}
/* 모바일: 시나리오(아티팩트) 패널 닫고, 사이드 시나리오 목록 접힘(레일 아이콘만) — 챗 풀폭 */
@media (max-width: 820px) {
  .app, .app.artifact-open {
    grid-template-columns: 52px 0px 1fr 0px !important;
  }
  .app:has(.rail:hover), .app.artifact-open:has(.rail:hover), .app.rail-open, .app.artifact-open.rail-open {
    grid-template-columns: 200px 0px 1fr 0px !important;   /* 호버/햄버거 → 데스크탑처럼 레일 펼침 */
  }
  .app .sidebar { display: none !important; }
  .app.artifact-open .artifact-panel { display: none !important; }
  .app.artifact-open .chat-inner, .app.artifact-open .chat-input-area { padding-left: 16px !important; padding-right: 16px !important; }
}

/* ═══════════════════════════════════════════════
   TOPBAR
═══════════════════════════════════════════════ */
.icon-btn {
  width: 32px; height: 32px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--t-fast), color var(--t-fast);
}
.icon-btn:hover { background: var(--bg-hover); color: var(--text-primary); }
.icon-btn svg { width: 16px; height: 16px; }
.avatar-btn {
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  background: var(--blue-light);
  color: var(--blue);
  font-size: 12px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}

/* ═══════════════════════════════════════════════
   SIDEBAR
═══════════════════════════════════════════════ */
/* ── 레일 — 평소 아이콘만(52px), 호버 시 우측으로 확장(218px) ── */
.rail {
  grid-area: rail;
  background: rgba(255,255,255,0.96);   /* 거의 불투명 — backdrop-filter 제거로 깜박임 해소 */
  /* backdrop-filter(blur) 제거: 레일 호버 시 grid-template-columns 폭 애니메이션 중 매 프레임 backdrop이 재계산되며 깜박임 발생 → 근접 불투명 배경으로 대체 */
  border-right: 1px solid rgba(0,0,0,0.05);
  display: flex; flex-direction: column;
  padding: 10px 0;
  gap: 2px;
  overflow: hidden;
}
.rail-row {
  display: flex; align-items: center; gap: 10px;
  height: 34px;
  margin: 0 8px; padding: 0 9px;
  border-radius: 8px;
  flex-shrink: 0;
  color: var(--text-tertiary);
  font-size: 12.5px; font-weight: 500;
  white-space: nowrap;
  cursor: default;
  text-align: left;
}
.rail-row i { font-size: 16px; width: 16px; flex-shrink: 0; display: flex; justify-content: center; }
.rail-row svg { width: 16px; height: 16px; flex-shrink: 0; }
.rail-row.active {
  background: rgba(255,255,255,0.8);   /* 선택·호버 동일 화이트 하이라이트 */
  color: var(--blue);               /* 포인트는 메인 컬러 하나만 */
  cursor: pointer;
}
/* 나머지 메뉴: 호버 피드백만, 클릭 액션 없음 */
.rail-row:not(.active):hover { background: rgba(255,255,255,0.4); color: var(--text-secondary); transition: background var(--t-fast); }
.rail { user-select: none; }
.rail-label {
  flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  color: var(--text-secondary);
  opacity: 0; transition: opacity 150ms ease;   /* 디폴트: 숨김(레일 닫힘) */
}
.rail-row.active .rail-label { color: var(--text-primary); font-weight: 600; }
.rail-side {
  font-size: 11px; font-weight: 500; color: var(--text-tertiary);
  display: flex; align-items: center; gap: 1px;
  opacity: 0; transition: opacity 150ms ease;
}
.rail-side i { font-size: 11px; width: auto; }
/* 레일 호버 시에만 라벨 표시 */
.rail:hover .rail-label, .rail:hover .rail-side { opacity: 1; }

/* 스페이스 헤더 — 디폴트 펼침, 아티팩트 열림 시 접힘 */
.rail-space {
  display: flex; align-items: center; gap: 6px;
  height: 0; opacity: 0; overflow: hidden;
  margin: 0 12px;
  transition: height 200ms ease, opacity 150ms ease, margin 200ms ease;
}
.rail:hover .rail-space { height: 44px; opacity: 1; margin: 0 12px 6px; }
.rail-space-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rail-space-name { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail-space-tier { font-size: 10px; font-weight: 500; color: var(--text-tertiary); white-space: nowrap; }
.rail-space > i { font-size: 14px; color: var(--text-tertiary); flex-shrink: 0; }

.rail-spacer { flex: 1; }
.rail-profile { padding: 0 5px; }
.rail-avatar {
  width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0,0,0,0.4); color: #fff;
  font-size: 9px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── 시나리오 패널 — 데모 내비 전용 칼럼 ── */
.sidebar {
  grid-area: sidebar;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border-right: 1px solid rgba(255,255,255,0.5);
  display: flex; flex-direction: column;
  overflow: hidden;
  padding: 10px 0 8px;
}
.gnb-history { flex: 1; overflow-y: auto; padding: 10px 0 6px; background: transparent; }
.gnb-history::-webkit-scrollbar { width: 4px; }

/* 워크스페이스 헤더 — 기존 레일(rail-space) 디자인과 동일 스펙 */
.ws-head { padding: 16px 16px 0; }
.ws-name { font-size: 13px; font-weight: 600; color: var(--text-primary); letter-spacing: -0.2px; }
.ws-plan { font-size: 10px; font-weight: 500; color: var(--text-tertiary); margin-top: 2px; }
.ws-divider { height: 1px; background: var(--border); margin: 14px 0 0; }
.sc-divider { height: 1px; background: var(--border); margin: 12px 16px 0; }   /* 탭 그룹 구분 bar */
.sc-group-label { font-size: 10.5px; font-weight: 600; letter-spacing: -0.1px; color: var(--text-tertiary); padding: 0 18px; margin: 12px 0 7px; }
.sc-group-label:first-child { margin-top: 4px; }   /* 첫 그룹은 헤더 divider 바로 아래 */

/* 시나리오 리스트 — 원래 텍스트 위계·컬러 (DESIGN-SYSTEM 준수) */
.chat-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px;
  margin: 0 8px 5px;
  font-size: 12.5px;
  color: rgba(0,0,0,0.66);         /* 미선택: 블랙 66% (조금 진하게) */
  cursor: pointer;
  gap: 8px;
  transition: color var(--t-fast), background var(--t-fast), box-shadow var(--t-fast);
}
.chat-item:hover { color: #000; }   /* 호버 = 선택과 동일(블랙) */
.chat-item.active {
  background: #fff;                /* 선택 = 화이트 박스 (레일 활성과 동일, 그림자 없음) */
  color: #000;
  font-weight: 600;
  border-radius: 9px;
}
.chat-item-label {
  flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.4;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;   /* 한 줄 — 한눈에 스캔 */
}
.chat-item-more {
  width: 22px; height: 22px;
  border-radius: var(--r-xs);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-tertiary);
  opacity: 0; transition: opacity var(--t-fast), background var(--t-fast);
  flex-shrink: 0;
}
.chat-item:hover .chat-item-more { opacity: 1; }
.chat-item-more:hover { background: var(--border); color: var(--text-primary); }
.chat-item-more svg { width: 13px; height: 13px; }

.sidebar-progress {
  margin: 12px 14px 0;
  height: 3px; border-radius: 2px;
  background: var(--border);
  overflow: hidden;
}
.sidebar-progress-bar {
  height: 100%; width: 40%;
  background: var(--blue);
  border-radius: 2px;
  animation: shimmer 1.8s ease-in-out infinite;
}
@keyframes shimmer {
  0%,100% { opacity: 0.5 } 50% { opacity: 1 }
}
/* 아티팩트 생성중 스켈레톤 — 생성 과정 동안 우측 패널에 표시 */
.av-skel { padding: 4px 2px; }
.skel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.skel-title { height: 18px; border-radius: 6px; width: 60%; }
.skel-badge { height: 18px; width: 66px; border-radius: 6px; margin-left: auto; }
.skel-sec { height: 12px; width: 34%; border-radius: 5px; margin: 22px 0 12px; }
.skel-line { height: 11px; border-radius: 5px; margin-bottom: 9px; }
.skel-card { border: 1px solid var(--border); border-radius: 12px; padding: 14px; margin-bottom: 12px; }
.skel-chip { height: 24px; border-radius: 7px; display: inline-block; margin: 0 6px 6px 0; vertical-align: top; }
.skel-blk { background: linear-gradient(100deg, #E1E4EA 25%, #EFF1F5 50%, #E1E4EA 75%); background-size: 200% 100%; animation: skelSlide 1.4s ease-in-out infinite; }
@keyframes skelSlide { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
/* 파일 카드 연동 모션 — 스켈레톤으로 그려지다 완성 */
.file-chip.fc-skel { pointer-events: none; }
.fc-skel-ico { width: 32px; height: 32px; border-radius: 7px; flex-shrink: 0; display: block; }
.fc-skel-l1 { display: block; height: 13px; width: 58%; border-radius: 5px; margin-bottom: 7px; }
.fc-skel-l2 { display: block; height: 10px; width: 38%; border-radius: 5px; }
.fc-pop { animation: fcPop .34s cubic-bezier(.34,1.4,.5,1) both; }
@keyframes fcPop { from { transform: scale(.96); opacity: .4; } to { transform: none; opacity: 1; } }

/* ═══════════════════════════════════════════════
   CANVAS
═══════════════════════════════════════════════ */
.canvas {
  grid-area: canvas;
  display: flex; flex-direction: column;
  background: var(--bg-canvas);
  overflow: hidden;
}

/* — Screens — */
.screen { display: none; flex: 1; flex-direction: column; overflow: hidden; }
.screen.active { display: flex; }

/* ═══════════════════════════════════════════════
   HOME SCREEN
═══════════════════════════════════════════════ */
.home-screen {
  align-items: center; justify-content: center;
  gap: 0; padding: 40px 32px;
  background: var(--bg-canvas);
}
.home-greeting {
  width: 100%;
  display: flex; align-items: center; justify-content: center; gap: 12px;
  text-align: center;
  font-size: 22px; font-weight: 600;   /* KR/Heading-26 */
  line-height: 34px;
  color: var(--text-primary);
  margin-bottom: 20px;
  text-align: center;
  letter-spacing: -1px;
}
/* 플로팅 컴포저 — 회색 카드 없이 뎁스만으로 */
.home-composer-card {
  width: 100%; max-width: 760px;
}
.ai-ind.home-hex {
  width: 30px; height: 30px;
  display: inline-block;
  margin: 0;
  flex-shrink: 0;
}
.home-input-wrap {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-canvas);
  padding: 14px 16px 12px;
  /* 레이어드 섀도우 + 가장 깊은 층에 옅은 블루 틴트(브랜드 글로우) */
  box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 6px 24px rgba(0,0,0,.06), 0 18px 48px rgba(71,129,255,.07);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  position: relative;
}
.home-input-wrap:focus-within {
  border-color: var(--border-strong);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 10px 32px rgba(0,0,0,.08), 0 24px 56px rgba(71,129,255,.09);
}
.home-input {
  width: 100%; border: none; outline: none; resize: none;
  font-size: 15px; line-height: 24px;
  color: var(--text-primary);
  background: transparent;
  min-height: 24px;
}
.home-input::placeholder { color: var(--text-tertiary); }
.home-input-footer {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 8px;
}
.composer-attach {
  width: 30px; height: 30px;
  border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary);
  transition: background var(--t-fast);
}
.composer-attach:hover { background: var(--bg-hover); }
.send-btn {
  align-self: center;
  width: 28px; height: 28px;
  border-radius: 50%;                 /* 원형 — 정제된 전송 버튼 */
  background: #0050FF;                 /* 기본: 브랜드 블루 */
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  transition: opacity var(--t-fast);
  flex-shrink: 0;
}
.send-btn:hover { opacity: 0.9; }                              /* 호버/클릭: 오퍼시티 −10%만 (은은하게) */
.send-btn:active { opacity: 0.9; }
.send-btn.idle { background: #0050FF; color: #fff; }            /* idle도 브랜드 블루 디폴트 */
.send-btn.idle:hover { opacity: 0.9; }
.send-btn svg { width: 12px; height: 12px; fill: none; }

/* ── 추천 질문 칩 — 컬러 서클 아이콘 + 대시 커넥터 (제품 컴포저) ── */
.home-suggest {
  display: flex; gap: 7px; margin-top: 24px;
  flex-wrap: wrap; align-items: center; justify-content: center;
}
.suggest-label { font-size: 12px; font-weight: 500; color: var(--text-tertiary); margin-right: 6px; }
.chip-dash { width: 12px; height: 2px; background: var(--border-strong); flex-shrink: 0; }
.home-chip {
  display: flex; align-items: center; gap: 7px;
  height: 32px;
  padding: 0 14px 0 6px;
  border: 1px solid var(--border);
  border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 500;
  color: var(--text-primary);
  background: var(--bg-canvas);
  cursor: pointer;
  transition: border-color var(--t-fast), transform var(--t-fast), box-shadow var(--t-fast);
}
.home-chip:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(0,0,0,.07);
}
.chip-icon {
  width: 20px; height: 20px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; flex-shrink: 0;
  background: #F0F2F4;            /* 모노톤 — 컬러는 인풋에만 */
  color: var(--text-secondary);
}

/* ═══════════════════════════════════════════════
   CHAT SCREEN
═══════════════════════════════════════════════ */
.chat-screen { overflow: hidden; position: relative; }
.chat-screen::before {
  content: ''; position: absolute; left: 0; right: 0; top: 0; height: 26px; z-index: 3;
  background: linear-gradient(var(--bg-canvas), rgba(255,255,255,0));
  pointer-events: none;
}

.chat-scroll {
  flex: 1; overflow-y: auto;
  padding: 20px 0;
  /* scroll-behavior smooth 제거 — 터미널식 즉시 한 줄 스크롤(스르륵 글라이드 방지) */
}
.chat-scroll::-webkit-scrollbar { width: 4px; }
.chat-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

.chat-inner { max-width: 820px; margin: 0 auto; padding: 0 48px; }
.app.artifact-open .chat-inner, .app.artifact-open .chat-input-area { padding-left: 32px; padding-right: 32px; }

/* User message */
.msg-user {
  display: flex; justify-content: flex-end;
  margin-bottom: 22px;
  margin-top: 31px;
}
.user-bubble {
  background: #F1F6FF;            /* 유저 버블: 연한 블루 (Figma) */
  color: #003BDD;
  padding: 12px 16px;
  border-radius: 13px;            /* 균일 라운드, 꼬리 없음 */
  font-size: 14px; line-height: 22px;   /* KR/Body-14 */
  max-width: 72%;
  letter-spacing: -0.4px;
}
/* 유저 메시지에 첨부된 파일(질문과 함께 올라온 데이터) — 우측 정렬 */
.user-stack { display:flex; flex-direction:column; align-items:flex-end; gap:9px; max-width:72%; }
.user-stack .user-bubble { max-width:100%; }
.user-attach {
  display:inline-flex; align-items:center; gap:11px;
  background:#fff; border:1px solid var(--border); border-radius:13px;
  padding:10px 13px; box-shadow:0 1px 3px rgba(0,0,0,0.05); max-width:100%;
  animation: fileDrop .52s cubic-bezier(.34,1.4,.5,1) both; transform-origin:100% 0;
}
.user-attach-ico { width:32px; height:32px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.user-attach-ico .ftype-ic { width:30px; height:30px; display:block; }
.user-attach-info { display:flex; flex-direction:column; min-width:0; }
.user-attach-name { font-size:13px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.user-attach-sub { font-size:11.5px; color:var(--text-tertiary); letter-spacing:-0.2px; margin-top:1px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* AI message */
.msg-ai { margin-bottom: 10px; padding-left: 24px; width: 80%; }
.msg-persona + .msg-ai { margin-top: 28px; }   /* 인터뷰 답변 → AI(요약) 턴 간격 */
.app.artifact-open .msg-ai { width: 100%; }
/* 직접 입력 CTA 메시지: 아바타-텍스트 같은 줄(줄바꿈 없이 가로 배치) */
.msg-ai.cta-msg { display: flex; align-items: flex-start; gap: 9px; padding-left: 0; }
.msg-ai.cta-msg .ai-header { margin: 0; }
.msg-ai.cta-msg .ai-prose { margin: 0; flex: 1; min-width: 0; }

.ai-header {
  display: flex; align-items: center; gap: 3px;
  margin-bottom: 10px;
  margin-left: -24px;   /* 아바타는 좌측 거터로 */
}
.ai-avatar {
  width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ai-avatar svg { width: 100%; height: 100%; display: block; }
/* 챗 아바타 헥사곤은 인디케이터/정적 로고 공통으로 ~25% 축소(레일·홈은 원래 크기 유지) */
.ai-avatar .ai-hex,
.ai-avatar > .ai-ind { transform: scale(0.75); transform-origin: center; }
/* 생성중(애니메이션) → 완료(정적 로고) 리니어 스무스 크로스페이드 */
.ai-avatar.gen { position: relative; }
.ai-avatar.gen > .ai-ind, .ai-avatar.gen > .ai-hex { position: absolute; inset: 0; transition: opacity 520ms linear; }
.ai-avatar.gen > .ai-hex { opacity: 0; }
.ai-avatar.gen.settled > .ai-ind { opacity: 0; }
.ai-avatar.gen.settled > .ai-hex { opacity: 1; }
/* 챗 아바타 기준 내용 인덴트 — padding 기반(우측 넘침 방지) */
.ai-ind {
  display: inline-block;
  width: 100%; height: 100%;
  pointer-events: none;
  background: url(dataspace-hex.svg) center/contain no-repeat;  /* 정적 브랜드 헥사곤(SVG·경량·crisp) */
}
.ai-ind.ind-live { background: none; }
.ai-hex { display:inline-block; width:100%; height:100%; pointer-events:none; background:url(dataspace-hex.svg) center/contain no-repeat; }
.ai-ind canvas { display: block; width: 100% !important; height: 100% !important; }
.rail-row .ai-ind { width: 18px; height: 18px; flex-shrink: 0; }
/* 레일 브랜드 헥사곤도 ~25% 축소(레이아웃 박스는 유지, 글리프만 축소해 다른 레일 아이콘과 균형) */
.rail-row .ai-ind, .rail .ai-ind { transform: scale(0.75); transform-origin: center; }
.thinking-toggle {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-secondary);
  cursor: pointer;
  padding: 2px 6px; border-radius: var(--r-xs);
  transition: color var(--t-fast), background var(--t-fast);
}
.thinking-toggle:hover { color: var(--text-secondary); background: var(--bg-hover); }
.thinking-toggle svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Prose */
.ai-prose { font-size: 14px; line-height: 24px; color: var(--text-primary); letter-spacing: -0.3px; }   /* 챗 본문 14/400 */
.ai-prose h2 {
  font-size: 13px; font-weight: 700;
  margin: 14px 0 6px;
  letter-spacing: -0.2px;
}
.ai-prose h2:first-child { margin-top: 0; }
.ai-prose p { margin-bottom: 10px; }
.ai-prose ul, .ai-prose ol {
  padding-left: 20px; margin-bottom: 12px;
}
.ai-prose li { margin-bottom: 4px; line-height: 23px; font-size: 14px; }
.ai-prose strong { font-weight: 600; }
.ai-prose h3 {
  font-size: 13px; font-weight: 600;
  margin: 10px 0 4px;
}

/* Citation badge */
.cite {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 5px;
  background: rgba(0,0,0,0.05);
  color: var(--text-tertiary);
  font-size: 11px; font-weight: 500;
  margin: 0 2px; vertical-align: middle; line-height: 1;
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.cite:hover {
  background: rgba(71,129,255,0.12);
  color: var(--blue);
}

/* Sources */
.sources-section { margin-top: 20px; }
.sources-label {
  font-size: 13px; font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 8px;
}
.source-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  margin-bottom: 4px;
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
  background: var(--bg-canvas);
}
.source-row:hover { background: var(--bg-hover); border-color: var(--border-strong); }
.source-num {
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  background: var(--bg-hover);
  color: var(--text-secondary);
  font-size: 11px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.source-icon {
  width: 22px; height: 22px;
  border-radius: 5px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.source-icon.survey { background: #EEF3FF; }
.source-icon.doc    { background: #F3F0FF; }
.source-icon.web    { background: #ECFDF5; }
.source-title { flex: 1; font-size: 12px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.source-type { font-size: 11px; color: var(--text-tertiary); white-space: nowrap; flex-shrink: 0; }
.source-link {
  color: #9CA3AF;
  flex-shrink: 0;
  opacity: 1;
  transition: color 120ms ease;
}
.source-row:hover .source-link { color: #4781FF; }
.source-link svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.5; display: block; }

.sources-more {
  display: flex; align-items: center; justify-content: center; gap: 4px;
  font-size: 11.5px; color: var(--text-tertiary);
  padding: 6px;
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  margin-top: 1px;
}
.sources-more:hover { background: var(--bg-hover); color: var(--text-primary); }
.sources-more svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 1.5; }

/* Reactions — ChatGPT 스타일: 흐릿하게 있다가 hover 시 선명 */
.reaction-row {
  display: flex; align-items: center; gap: 0;
  margin: 8px 0 4px; padding: 0;
}
.react-btn {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px;
  border-radius: 6px;
  color: #C4C9D4;
  transition: background 120ms ease, color 120ms ease;
}
.react-btn:hover {
  background: var(--bg-hover);
  color: var(--text-secondary);
}
.react-btn svg {
  width: 14px; height: 14px;
  fill: none; stroke: currentColor;
  stroke-width: 1.5;
}

/* Follow-up suggestions */
.followup-list {
  border-top: 1px solid #F3F4F6;
  margin-top: 6px;
}
.followup-item {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid #F3F4F6;
  cursor: pointer;
  border-radius: var(--r-xs);
  transition: color 120ms ease;
}
.followup-item:hover { color: var(--text-primary); }
.followup-item:hover .followup-text { color: var(--text-primary); }
.followup-item:hover .followup-arrow { opacity: 1; color: var(--blue); }
.followup-plus {
  width: 15px; height: 15px;
  border-radius: 4px;
  border: 1px solid #E5E7EB;
  display: flex; align-items: center; justify-content: center;
  color: #C4C9D4; flex-shrink: 0;
}
.followup-plus svg { width: 9px; height: 9px; stroke: currentColor; stroke-width: 2; fill: none; }
.followup-text {
  flex: 1; font-size: 12px;
  color: var(--text-secondary);
  transition: color 120ms ease;
}
.followup-arrow {
  color: var(--text-tertiary); opacity: 0;
  transition: opacity 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.followup-arrow svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; display: block; }

/* Global: 모든 UI 아이콘 SVG — thin & round */
.icon-btn svg, .react-btn svg, .followup-arrow svg, .thinking-toggle svg,
.source-link svg, .sources-more svg, .sidebar-new-btn svg,
.followup-plus svg, .artifact-close svg {
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Phosphor 아이콘 기본 스타일 */
.ph, .ph-light, .ph-thin, .ph-bold, .ph-fill, .ph-duotone {
  font-style: normal;
  line-height: 1;
  vertical-align: middle;
}
/* react-btn, icon-btn 내 i 태그 */
.react-btn i, .icon-btn i, .followup-arrow i, .thinking-toggle i,
.source-link i, .sources-more i, .sidebar-new-btn i, .topbar-menu i {
  display: flex;
}

/* Chart card */
.chart-card {
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 22px 24px;
  margin: 4px 0 16px;
  background: var(--bg-canvas);
  box-shadow: var(--shadow-sm);
}
.chart-title {
  font-size: 14px; font-weight: 700;
  color: var(--text-primary);
  margin-bottom: 14px;
  letter-spacing: -0.2px;
  line-height: 20px;
}
.chart-legend {
  display: flex; gap: 16px; margin-bottom: 18px;
}
.legend-item {
  display: flex; align-items: center; gap: 5px;
  font-size: 12px; color: var(--text-secondary);
}
.legend-dot {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
.bar-chart { display: flex; flex-direction: column; gap: 11px; }
.bar-row { display: flex; align-items: center; gap: 12px; }
.bar-label { width: 100px; text-align: right; font-size: 12px; color: var(--text-secondary); flex-shrink: 0; white-space: nowrap; }
.bar-tracks { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.bar-track { height: 18px; border-radius: var(--r-xs); position: relative; display: flex; align-items: center; }
.bar-fill {
  height: 100%; border-radius: var(--r-xs);
  position: relative; min-width: 2px;
  transition: width 0.6s cubic-bezier(0.4,0,0.2,1);
}
.bar-fill.blue  { background: var(--chart-blue); }
.bar-fill.green { background: var(--chart-green); }
.bar-val {
  font-size: 11px; font-weight: 600; color: white;
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  white-space: nowrap;
}
.chart-axis {
  display: flex; justify-content: space-between;
  padding-left: 112px;
  margin-top: 10px;
  font-size: 11px; color: var(--text-tertiary);
  border-top: 1px solid var(--border);
  padding-top: 8px;
}
.chart-axis-label { text-align: center; font-size: 11px; color: var(--text-tertiary); margin-top: 4px; padding-left: 112px; }

/* Input bar */
.chat-input-area {
  width: 100%; max-width: 820px; margin: 0 auto;
  padding: 10px 48px 14px 48px;
  background: var(--bg-canvas);
  flex-shrink: 0;
  position: relative;
}
.chat-input-area::before {
  content: ''; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  background: linear-gradient(rgba(255,255,255,0), var(--bg-canvas));
  pointer-events: none;
}
.chat-input-wrap {
  position: relative; overflow: hidden; isolation: isolate;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--bg-input);
  box-shadow: var(--shadow-sm);
  display: flex; align-items: center; gap: 8px;
  padding: 9px 9px 9px 18px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
}
/* Dataspace AI 입력창 = 로고 모티프(블루)의 은은한 오로라 */
.chat-input-wrap::before { content:''; position:absolute; inset:13px -32%; z-index:-1; pointer-events:none; filter:blur(10px); opacity:.34;
  background:
    radial-gradient(30% 70% at 10% 30%, rgba(107,184,255,.30), transparent 70%),
    radial-gradient(34% 80% at 92% 60%, rgba(122,133,255,.26), transparent 72%),
    radial-gradient(40% 90% at 55% 112%, rgba(92,138,255,.20), transparent 70%);
  animation:pcAurora 19s ease-in-out infinite alternate; will-change:transform; }
.chat-input-wrap:focus-within::before { opacity:.6; }
@media (prefers-reduced-motion: reduce){ .chat-input-wrap::before { animation:none; } }
.chat-input-wrap:focus-within {
  border-color: var(--border-strong);
  background: var(--bg-canvas);
  box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08);   /* 컬러 링 대신 뎁스 */
}
.chat-input {
  flex: 1; border: none; outline: none; resize: none;
  font-size: 14px; line-height: 22px;
  color: var(--text-primary); background: transparent;
  max-height: 96px; min-height: 22px;
}
.chat-input::placeholder { color: var(--text-tertiary); }
.chat-input-footer-note {
  text-align: center; font-size: 11px; color: var(--text-tertiary);
  margin-top: 6px; line-height: 16px;
}
.chat-input-footer-note a { color: var(--text-tertiary); text-decoration: underline; text-underline-offset: 2px; }

/* File attach row */
/* ── System notice ── */
.system-notice {
  display: flex; align-items: center; gap: 6px;
  padding: 18px 24px 0;
  font-size: 11.5px;
  color: var(--text-tertiary);
  font-weight: 500;
}
.system-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: #34A853;
  flex-shrink: 0;
}

/* ── File attach ── */
.file-attach-row {
  padding: 20px 24px 4px;
}
.file-chip {
  display: flex; align-items: center; gap: 11px;
  padding: 10px 13px;
  background: #ffffff;
  border: 1px solid var(--border);
  border-radius: 13px;
  font-size: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: box-shadow var(--t-fast);
  cursor: default;
  width: 100%; max-width: 360px;
}
.file-chip:hover {
  box-shadow: 0 2px 8px rgba(0,0,0,0.09);
}
.file-attach-row .file-chip {
  animation: fileDrop .52s cubic-bezier(.34,1.4,.5,1) both, fileDropRing .8s ease-out both;
  transform-origin: 50% 0;
}
.file-chip-icon.ftype { background:none; }
.file-chip-icon .ftype-ic { width:30px; height:30px; display:block; }
.pd-file-ico .ftype-ic, .cc-data-icon .ftype-ic { width:24px; height:24px; display:block; }
.file-chip-icon {
  width: 32px; height: 32px;
  background: #E6F4EA;
  border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.file-chip-info { flex: 1; min-width: 0; }
.file-name {
  display: block;
  color: var(--text-primary);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: -0.3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-sub {
  display: block;
  color: var(--text-tertiary);
  font-size: 11.5px;
  letter-spacing: -0.2px;
  margin-top: 1px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.file-meta {
  display: none;
  font-size: 11px;
  font-weight: 600;
  background: #E0EAFF;
  color: var(--blue);
  padding: 2px 7px;
  border-radius: 99px;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ═══ ARTIFACT PANEL ═══ */
.artifact-panel {
  grid-area: artifact;
  background: var(--bg-canvas);        /* 흰색 배경 */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  width: 100%;
  padding: 12px 14px 14px 6px;
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 360ms ease, transform 560ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
  z-index: 5;
  will-change: transform, opacity;
}
.artifact-inner {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  background: var(--bg-canvas);
  border: 1px solid var(--border);
  border-radius: 13px;
  overflow: hidden;
  box-shadow: none;
}
.app.artifact-open .artifact-panel {
  opacity: 1;
  transform: translateX(0);
  pointer-events: all;
}

.artifact-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 14px;
  height: 40px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.artifact-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: 0.02em;
}
.artifact-actions { display:flex; align-items:center; gap:8px; }
.artifact-edit {
  font-size: 11.5px; font-weight: 600; color:#fff; background: var(--blue-deep);
  border: none; border-radius: 7px; padding: 5px 11px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 4px; transition: background var(--t-fast), transform .12s ease;
}
.artifact-edit:hover { background:#0042D6; }
.artifact-edit.pressing { transform: scale(.95); }
.artifact-edit[hidden] { display:none; }
.artifact-close {
  width: 24px; height: 24px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 4px;
  color: var(--text-tertiary);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
}
.artifact-close:hover { background: var(--bg-hover); color: var(--text-primary); }

.artifact-stats {
  display: flex;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.artifact-stat {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10px 0;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: all var(--t-fast);
  gap: 2px;
}
.artifact-stat:hover { background: var(--bg-hover); }
.artifact-stat.active { border-bottom-color: var(--blue); }
.artifact-stat-num {
  font-size: 16px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1;
}
.artifact-stat.active .artifact-stat-num { color: var(--blue); }
.artifact-stat-label {
  font-size: 10px;
  color: var(--text-tertiary);
  font-weight: 500;
}

.artifact-views { flex: 1; overflow: hidden; position: relative; }
.artifact-view {
  position: absolute; inset: 0;
  overflow-y: auto;
  padding: 16px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 160ms ease;
}
.artifact-view.active {
  opacity: 1;
  pointer-events: all;
}

.artifact-dataset {
  background: #F9FAFB;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.artifact-dataset-icon {
  width: 32px; height: 32px;
  background: var(--blue-light);
  border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.artifact-dataset-info { flex: 1; }
.artifact-dataset-name { font-size: 12px; font-weight: 600; color: var(--text-primary); }
.artifact-dataset-meta { font-size: 11px; color: var(--text-secondary); margin-top: 1px; }

.artifact-result-card {
  background: #F9FAFB;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.artifact-result-card:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(71,129,255,0.08);
}
.artifact-result-card-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 4px;
}
.artifact-result-card-meta {
  font-size: 11px;
  color: var(--text-secondary);
}

.artifact-chart-wrap {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px;
}
.artifact-chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-primary);
  margin-bottom: 12px;
}
.artifact-bar-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;   /* 막대 20 : 갭 6 ≈ 0.3 비율 */
  cursor: pointer;
}
.artifact-bar-row:hover .artifact-bar-fill { filter: brightness(0.9); }
.artifact-bar-label {
  font-size: 10px;
  color: var(--text-secondary);
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  line-height: 1.3;
}
.artifact-bar-track {
  flex: 1;
  height: 20px;
  background: transparent;
  border-radius: 2px;
  overflow: hidden;
}
.artifact-bar-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 500ms cubic-bezier(.4,0,.2,1);
}
.artifact-bar-val {
  font-size: 10px;
  color: var(--text-secondary);
  width: 28px;
  flex-shrink: 0;
}

/* ═══ SCENARIO ENGINE ADDITIONS ═══ */
/* sidebar scenario status */
.chat-item { display: flex; align-items: center; gap: 8px; }
.sc-status { flex-shrink: 0; display: flex; align-items: center; justify-content: center; }
.sc-spinner { display: none; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--blue-light); border-top-color: var(--blue); animation: sc-spin .8s linear infinite; }
.sc-done { display: none; font-size: 12px; color: var(--text-tertiary); }
.chat-item-sub { display: inline-flex; align-items: center; gap: 5px; margin-top: 6px; max-width: 100%;
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 500; letter-spacing: -0.2px;
  color: rgba(0,0,0,0.5);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
@keyframes sc-spin { 100% { transform: rotate(360deg); } }

/* chat: enter animation + system + teammate */
.msg-enter { animation: msgUp .4s cubic-bezier(.4,0,.2,1) both; }
/* walk: 결과 카드 부드러운 페이드·슬라이드 인 */
.walk-in { animation: walkIn .36s cubic-bezier(.32,.72,0,1) both; }
@keyframes walkIn { from { opacity:0; transform: translateY(9px); } to { opacity:1; transform:none; } }
/* 패널 문서가 문단 단위로 순차 생성되는 느낌 (스트리밍) */
@keyframes docStream { from { opacity:0; transform: translateY(7px); } to { opacity:1; transform:none; } }
.walk-hidden { display: none !important; }   /* walk: 등장 전 공간 차지 안 함 → 등장 시 챗이 위로 */
@keyframes msgUp { 0% { opacity: 0; } 100% { opacity: 1; } }   /* 슬라이드 없이 페이드만 — 챗 인라인은 '스윽 올라옴' 금지 */
/* 첫 챗 버블: 입력창 위치(아래)에서 상단으로 자연스럽게 올라옴 */
@keyframes bubbleRise { 0% { opacity:0; transform: translateY(210px) scale(.97); } 100% { opacity:1; transform: none; } }
.msg-rise { animation: bubbleRise 1.05s cubic-bezier(.22,.61,.36,1) both !important; }
/* 파일 칩: 살짝 위에서 떨어져 자리잡는 드래그&드롭 업로드 느낌 */
@keyframes fileDrop {
  0%   { opacity: 0; transform: translateY(-13px) scale(1.05) rotate(-1.4deg); }
  55%  { opacity: 1; transform: translateY(3px)  scale(1.0)  rotate(0.3deg); }
  100% { opacity: 1; transform: translateY(0)    scale(1)    rotate(0); }
}
@keyframes fileDropRing {
  0%   { box-shadow: 0 0 0 3px rgba(71,129,255,0.20), 0 1px 3px rgba(0,0,0,0.05); }
  100% { box-shadow: 0 0 0 0 rgba(71,129,255,0),    0 1px 3px rgba(0,0,0,0.05); }
}
.msg-system { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--text-tertiary); font-weight: 500; margin: 14px 0 4px; }
.msg-system .system-dot { display: none; }
.msg-user.teammate { justify-content: flex-start; }
.tm-wrap { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; max-width: 72%; }
.tm-name { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-tertiary); padding-left: 2px; }
.tm-avatar { width: 17px; height: 17px; border-radius: 50%; background: #7C3AED; color: #fff; font-size: 9px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.user-bubble.teammate { background: var(--bg-canvas); color: var(--text-primary); border: 1px solid var(--border); border-radius: 13px; }
.ai-source-line { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 11px; color: var(--text-tertiary); }
.ai-source-line .system-dot { background: var(--blue); }
.ai-prose table.mini { border-collapse: collapse; width: 100%; font-size: 13px; margin: 8px 0; letter-spacing:-0.3px; }
.ai-prose table.mini th { text-align: right; color: var(--text-secondary); border-bottom: 1px solid var(--border); padding: 9px 10px; font-weight: 600; white-space:nowrap; }
.ai-prose table.mini th:first-child, .ai-prose table.mini td:first-child { text-align:left; color:var(--text-primary); }
.ai-prose table.mini td { text-align:right; border-bottom: 1px solid #F3F3F3; padding: 10px 10px; color:var(--gray-10); }
.ai-prose table.mini tbody tr:hover { background:var(--bg-page); }

/* chat choices */
.chat-choices { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; }
.choice-btn { padding: 11px 14px; border: 1px solid var(--border); border-radius: 10px; font-size: 12.5px; color: var(--text-secondary); background: var(--bg-canvas); text-align: left; transition: all var(--t-fast); }
.choice-btn:hover { border-color: var(--border-strong); }
.choice-btn.selected { border-color: var(--blue); background: var(--bg-active); color: var(--blue); font-weight: 600; }

/* artifact body + preview animation */
.artifact-body { flex: 1; overflow-y: auto; padding: 16px; }
.artifact-body::-webkit-scrollbar { width: 4px; }
.artifact-body::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.av { animation: avUp .35s cubic-bezier(.4,0,.2,1) both; }
@keyframes avUp { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: translateY(0); } }
.av-label { font-size: 10px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.av-filter-chip { font-size: 10px; font-weight: 600; color: var(--blue); background: var(--blue-light); padding: 3px 8px; border-radius: 20px; text-transform: none; letter-spacing: 0; }

/* av: upload */
.av-upload { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 20px 0; }
.av-up-icon { width: 48px; height: 48px; border-radius: 13px; background: var(--blue-light); display: flex; align-items: center; justify-content: center; }
.av-up-name { font-size: 13px; font-weight: 600; color: var(--text-primary); }
.av-up-meta { font-size: 11px; color: var(--text-tertiary); }
.av-up-bar { width: 100%; height: 5px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.av-up-fill { height: 100%; background: linear-gradient(90deg,#4781FF,#22C0E0); border-radius: 3px; animation: avLoad 1.1s forwards; }
@keyframes avLoad { 0% { width: 0; } 100% { width: 100%; } }
.av-up-status { font-size: 11px; color: var(--chart-green); font-weight: 500; }

/* av: insights */
.av-ins { display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--blue-faint); border: 1px solid var(--border); border-radius: 13px; margin-bottom: 7px; font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.av-ins.hl { border-color: var(--blue); background: var(--bg-active); }
.av-ins strong { color: var(--text-primary); font-weight: 700; }
.av-ins-num { font-size: 18px; font-weight: 700; color: var(--blue-deep); flex-shrink: 0; min-width: 42px; }
.av-ins-desc em { font-style: normal; color: var(--text-tertiary); font-size: 11px; }
.av-src { display: flex; align-items: center; gap: 6px; margin-top: 12px; }
.av-src-pill { font-size: 9px; font-weight: 700; color: var(--blue); background: var(--blue-light); padding: 2px 7px; border-radius: 6px; }
.av-src-text { font-size: 10px; color: var(--text-tertiary); }

/* av: overview */
.av-ov-cards { display: flex; gap: 8px; }
.av-ov-card { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 6px; background: var(--blue-faint); border: 1px solid var(--border); border-radius: 13px; }
.av-ov-card.hl { border-color: var(--blue); background: var(--bg-active); }
.av-ov-ico { width: 28px; height: 28px; border-radius: 7px; background: var(--blue-light); display: flex; align-items: center; justify-content: center; }
.av-ov-label { font-size: 10px; color: var(--text-tertiary); }
.av-ov-count { font-size: 20px; font-weight: 700; color: var(--blue-deep); }

/* av: dataset list */
.av-ds { display: flex; align-items: center; gap: 9px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 13px; margin-bottom: 7px; font-size: 12px; color: var(--text-secondary); }
.av-ds.active { border-color: var(--blue); background: var(--bg-active); color: var(--text-primary); font-weight: 500; }
.av-ds-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); flex-shrink: 0; }
.av-ds-dot.off { background: var(--border-strong); }
.av-ds-badge { margin-left: auto; font-size: 9px; font-weight: 600; color: var(--blue); background: var(--blue-light); padding: 2px 7px; border-radius: 6px; }
.av-ds-badge.muted { color: var(--text-tertiary); background: var(--bg-hover); }

/* av: crosstab */
.av-ct { border-collapse: collapse; width: 100%; font-size: 11.5px; }
.av-ct th { text-align: left; color: var(--text-secondary); border-bottom: 1px solid var(--border); padding: 7px 6px; font-weight: 600; letter-spacing: -0.3px; }
.av-ct td { border-bottom: 1px solid var(--border); padding: 8px 6px; color: var(--gray-10); }
.av-ct tr:last-child td { border-bottom: none; }
.av-ct .hl td { color: var(--text-primary); font-weight: 600; }
.av-ct td:first-child, .av-ct th:first-child { color: var(--text-primary); }
.av-up2 { color: var(--chart-green); font-weight: 600; }
.av-dn { color: #EF4444; font-weight: 600; }

/* av: collaborate */
.av-cl-head { display: flex; align-items: center; gap: 7px; font-size: 11px; color: var(--text-secondary); margin-bottom: 14px; }
.av-cl-share { color: var(--blue); font-weight: 700; }
.av-cl-online { width: 6px; height: 6px; border-radius: 50%; background: var(--chart-green); margin-left: auto; }
.av-cl-row { display: flex; gap: 8px; margin-bottom: 10px; align-items: flex-start; }
.av-cl-av { width: 22px; height: 22px; border-radius: 50%; background: #7C3AED; color: #fff; font-size: 10px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.av-cl-av.ai { background: var(--blue); }
.av-cl-name { font-size: 10px; color: var(--text-tertiary); margin-bottom: 2px; }
.av-cl-msg { font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.av-cl-msg strong { color: var(--text-primary); }
.av-cl-row.ai .av-cl-msg { background: #F9FAFB; border: 1px solid var(--border); border-radius: 9px; padding: 8px 11px; }

/* av: brief */
.av-brief-title { font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.av-brief-row { display: flex; gap: 9px; padding: 9px 0; border-bottom: 1px solid var(--bg-hover); font-size: 12px; color: var(--text-secondary); line-height: 1.45; }
.av-brief-key { width: 52px; flex-shrink: 0; font-size: 10px; font-weight: 600; color: var(--text-tertiary); padding-top: 1px; }

/* av: survey */
.av-sv-head { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; color: var(--text-primary); margin-bottom: 12px; }
.av-sv-count { font-size: 10px; font-weight: 600; color: var(--blue); background: var(--blue-light); padding: 2px 8px; border-radius: 20px; }
.av-sv-q { padding: 9px 11px; background: #F9FAFB; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 6px; font-size: 11.5px; color: var(--text-secondary); }
.av-sv-time { margin-top: 12px; font-size: 11px; color: var(--text-tertiary); }
.av-sv-time strong { color: var(--chart-green); }

/* av: nextstep */
.av-ns-btn { padding: 11px 12px; background: #F9FAFB; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 7px; font-size: 12px; color: var(--text-secondary); }
.av-ns-btn.sel { border-color: var(--blue); background: var(--bg-active); color: var(--text-primary); font-weight: 600; }

/* av: prompt waiting */
.av-wait { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 40px 0; text-align: center; }
.av-wait-dots { display: flex; gap: 5px; }
.av-wait-dots span { width: 7px; height: 7px; border-radius: 50%; background: var(--blue); animation: avBlink 1.2s infinite; }
.av-wait-dots span:nth-child(2) { animation-delay: .2s; }
.av-wait-dots span:nth-child(3) { animation-delay: .4s; }
@keyframes avBlink { 0%,100% { opacity: .25; } 50% { opacity: 1; } }
.av-wait-text { font-size: 12px; color: var(--text-tertiary); }

/* ── input typing caret ── */
.chat-input.is-typing { caret-color: var(--blue); }
.chat-input-wrap:has(.is-typing) { border-color: var(--border-strong); box-shadow: 0 2px 4px rgba(0,0,0,.05), 0 8px 24px rgba(0,0,0,.08); background: var(--bg-canvas); }

/* ── Figma 챗 카드 (DX 시연 컴포넌트: 프로젝트 선택/생성 과정/설문 데이터) ── */
.cc-stack { display:flex; flex-direction:column; gap:8px; margin-bottom:12px; }
.cc-card { background:#fff; border:1px solid var(--border); border-radius:13px; padding:14px 16px; width:100%; }
.msg-ai > .cc-card { margin-bottom:12px; }
.cc-head { display:flex; align-items:center; gap:8px; }
.cc-title { font-size:14px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; line-height:1.45; }
.cc-sub { font-size:12.5px; color:var(--text-secondary); margin-top:3px; line-height:1.55; letter-spacing:-0.2px; }
.cc-bullets { margin:6px 0 0; padding-left:0; list-style:none; }   /* 불릿 제거 */
.cc-bullets li { font-size:12px; color:#717D98; line-height:1.6; letter-spacing:-0.2px; margin-bottom:2px; list-style:none; }
.cc-proc-bullets li { position:relative; padding-left:14px; }   /* 생성 과정 불릿: • 도트 */
.cc-proc-bullets li::before { content:'•'; position:absolute; left:3px; color:#9AA7C2; }
.cc-spinner { width:13px; height:13px; border-radius:50%; border:2px solid var(--blue-light); border-top-color:var(--blue); animation:sc-spin .8s linear infinite; flex-shrink:0; }
/* 생성 과정 카드 — 보더 없이 (하나씩 천천히 등장) */
.cc-proc-stack { gap:3px; }
.cc-proc { border:none !important; background:transparent !important; box-shadow:none !important; padding:8px 2px; }
.cc-btn-row { display:flex; gap:8px; margin-top:12px; }
.btn-blue { display:inline-flex; align-items:center; justify-content:center; background:var(--blue); color:#fff; font-size:12px; font-weight:600; height:30px; padding:0 14px; border-radius:8px; letter-spacing:-0.2px; transition:opacity var(--t-fast); text-decoration:none; cursor:pointer; }
.btn-blue:hover { opacity:0.9; }                                    /* 호버/클릭: 오퍼시티 −10%만 */
.btn-blue:active, .btn-blue.pressing { background:var(--blue) !important; opacity:0.9; }
.btn-blue.soft { background:var(--blue); color:#fff; }   /* 디폴트: 메인 블루 */
.btn-blue.soft:hover { opacity:0.9; color:#fff; }
.btn-blue-outline { display:inline-flex; align-items:center; justify-content:center; background:#fff; border:1px solid #8FB2FF; color:var(--blue); font-size:12px; font-weight:600; height:30px; padding:0 13px; border-radius:8px; letter-spacing:-0.2px; transition:background var(--t-fast); cursor:pointer; }
.btn-blue-outline:hover { background:var(--blue-soft); }
.cc-data { background:#F1F6FF; border:none; border-radius:13px; padding:10px 12px; display:flex; align-items:center; gap:10px; width:100%; cursor:pointer; transition:background var(--t-fast), box-shadow var(--t-fast); }
.cc-data:hover { background:#E7EFFF; }
.cc-data.pressing { background:#E7EFFF !important; }
.cc-data-icon { width:32px; height:32px; border-radius:7px; background:#EEF3FF; display:flex; align-items:center; justify-content:center; font-size:15px; flex-shrink:0; }
.cc-data-icon.svg { background:none; } .cc-data-icon.svg svg { width:26px; height:26px; display:block; }
.cc-data-info { flex:1; min-width:0; display:flex; flex-direction:column; }
.cc-data-title { font-size:13px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-data-meta { font-size:11.5px; color:var(--text-tertiary); letter-spacing:-0.2px; margin-top:1px; }
.cc-data-arrow { font-size:14px; color:var(--blue-deep); flex-shrink:0; }
.cc-data:hover .cc-data-arrow { color:var(--blue-deep); }
.cc-done-arrow { font-size:15px; color:#BDBDBD; flex:none; }   /* 흰 카드 > 셰브론 — 보더 그레이, flex 자식이라 세로 중앙 */

/* ── 프로젝트 데이터 테이블 (아티팩트 — Figma 685:4833) ── */
.pd-sec { display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--text-primary); margin-bottom:10px; }
.pd-toolbar { display:flex; gap:6px; margin-bottom:10px; }
.pd-search { flex:1; min-width:0; display:flex; align-items:center; gap:6px; height:28px; border:1px solid var(--border); border-radius:7px; padding:0 10px; font-size:11.5px; color:var(--text-tertiary); background:#fff; white-space:nowrap; overflow:hidden; }
.pd-filter { display:flex; align-items:center; gap:4px; height:28px; border:1px solid var(--border); border-radius:7px; padding:0 9px; font-size:11.5px; color:var(--text-secondary); background:#fff; white-space:nowrap; flex-shrink:0; }
.pd-row { display:flex; align-items:center; gap:8px; padding:9px 0; border-bottom:1px solid #F3F3F3; }
.pd-row.head { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:6px 0; font-size:11px; color:var(--text-secondary); font-weight:600; }
.pd-cell-main { flex:1; min-width:0; display:flex; align-items:center; gap:9px; }
.pd-file-ico { width:26px; height:26px; border-radius:6px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; font-size:13px; flex-shrink:0; }
.pd-file-ico.xls { background:#D6F0E8; }
.pd-file-ico.svg { background:none; } .pd-file-ico.svg svg { width:22px; height:22px; display:block; }
.pd-name { font-size:12.5px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; letter-spacing:-0.3px; }
.pd-meta { font-size:11px; color:var(--text-tertiary); margin-top:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pd-ai-btn { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border-radius:6px; color:#fff; font-size:11px; font-weight:600; white-space:nowrap; flex-shrink:0;
  background: radial-gradient(120% 220% at 72% 0%, #75BCFF 0%, #6893FF 28%, #707CFF 54%, #426DFF 75%, #2B65FF 86%, #145EFF 96%); }
.pd-ai-btn img { width:12px; height:12px; display:block; }
.pd-ai-btn-svg { height:24px; width:auto; display:block; flex-shrink:0; }
.pd-badge { display:inline-flex; align-items:center; gap:2px; height:22px; padding:0 8px; border-radius:6px; font-size:11px; font-weight:500; color:rgba(1,14,45,0.7); white-space:nowrap; flex-shrink:0; }
.pd-badge.blue { background:var(--blue-light); }
.pd-badge.gray { background:rgba(96,110,144,0.1); }
.pd-row.clickable { cursor:pointer; transition:background var(--t-fast); border-radius:8px; }
.pd-row.clickable:hover { background:#F9F9F9; }
.pd-act { display:inline-flex; align-items:center; gap:4px; height:24px; padding:0 9px; border:1px solid #D3D7DF; border-radius:6px; font-size:11px; font-weight:500; color:var(--text-secondary); white-space:nowrap; flex-shrink:0; background:#fff; }

/* ── 생성 완료 카드 (Figma 657:6556 — 문서 미리보기 + 더 보기) ── */
.cc-done { display:flex; align-items:center; gap:11px; padding:13px 16px; }   /* 아이콘 + (제목·부제목) + 화살표 한 줄 정렬 (데이터 카드와 동일) */
.cc-done-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.cc-check { font-size:15px; color:var(--blue); flex-shrink:0; }
.cc-hr { height:1px; background:var(--border); margin:14px 0; }
.cc-doc-title { font-size:22px; font-weight:600; color:var(--text-primary); line-height:1.54; letter-spacing:-0.4px; margin-bottom:22px; }
.cc-doc-sec { font-size:13.5px; font-weight:600; color:var(--text-secondary); letter-spacing:-0.3px; margin:20px 0 7px; }
.cc-doc-sec-first { margin-top:12px; }
/* 챗 카드 본문은 더 가볍고 작게 (패널 문서는 별도) */
.cc-card .cc-doc-sec { font-size:12.5px; font-weight:500; }
.cc-card .cc-doc-ul li { font-size:12px; }
.cc-doc-ul { margin:0; padding-left:16px; }
.cc-doc-ul li { font-size:13px; color:var(--text-secondary); line-height:1.7; letter-spacing:-0.2px; margin-bottom:5px; }
.cc-doc-ul li strong { font-weight:600; color:var(--text-primary); }
.cc-fade { position:absolute; left:1px; right:1px; bottom:0; height:48px; background:linear-gradient(rgba(255,255,255,0) 0%, #fff 70%); pointer-events:none; }
.cc-more { position:absolute; bottom:8px; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; justify-content:center; gap:3px; padding:5px 12px; border-radius:8px; font-size:11px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:background var(--t-fast); }
.cc-more:hover { background:rgba(0,0,0,0.06); }
.cc-done.clickable { cursor:pointer; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.cc-done.clickable:hover { border-color:var(--border-strong); box-shadow:0 4px 16px rgba(13,13,13,.06); }

/* 자동 시연 버튼 눌림 효과 */
.pressing { background: rgba(0,0,0,0.06) !important; border-radius: 8px; transition: background 160ms ease; }

/* 브리프 완료 카드 — 미리보기 버튼 우측 */
.cc-briefcard .cc-head { width:100%; }
.cc-head-out { width:100%; margin-bottom:10px; }
.cc-briefcard { display:block; position:relative; border-radius:13px; border:1px solid var(--border); box-shadow:none; padding:14px 20px 16px; overflow:hidden; }   /* 세로 스택(cc-done flex 덮어씀) — 하단 페이드가 본문에 겹쳐 '더 있다' 암시 */
.cc-briefcard .cc-doc-title-sm { font-size:15px; font-weight:600; color:var(--text-primary); margin:0 0 4px; letter-spacing:-0.3px; }   /* 문서 타이틀 위계 ↑ */
.cc-brief-preview { margin-left:auto; flex-shrink:0; display:inline-flex; align-items:center; gap:2px; background:none; border:none; padding:4px 4px; font-size:12px; font-weight:500; color:var(--text-secondary); cursor:pointer; transition:color var(--t-fast); }
.cc-brief-preview:hover { color:var(--blue); }
.cc-brief-preview i { color:inherit; }
/* 오픈서베이 출처 아이콘 */
.fig-src-ico.os { background:none; padding:0; }
.fig-src-ico.os svg { width:18px; height:18px; display:block; }
/* 인라인 아티팩트 느낌 — 챗 안에서 카드 위아래 분할 */
.cc-card, .cc-stack, .co-card, .cc-data { margin:14px 0; scroll-margin-top:18px; }
.cc-stack > .cc-card, .cc-stack > .cc-data { margin:0; }   /* 스택 내부는 flex gap(8px)로 균일하게 */
/* 카드는 메시지 컬럼을 채움(폭 제어는 .msg-ai 단위) */
.msg-ai > .cc-card, .msg-ai > .cc-stack, .msg-ai > .cc-data, .msg-ai > .co-card, .msg-ai > .cc-briefcard { width:100%; }
.msg-ai > .cc-card:first-of-type, .msg-ai > .cc-stack:first-of-type { margin-top:6px; }
.cc-brief-intro { font-size:13px; color:var(--text-secondary); margin-bottom:10px; line-height:1.6; letter-spacing:-0.2px; }

/* 문서 썸네일 peek (미리보기 강조) */
.cc-peek { margin-top:12px; display:flex; align-items:center; gap:11px; padding:11px 13px; border:1px solid var(--border); border-radius:10px; background:#FAFBFD; cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); }
.cc-peek:hover { border-color:var(--blue); background:var(--blue-soft); }
.cc-peek-page { width:34px; height:40px; background:#fff; border:1px solid var(--border); border-radius:5px; padding:6px 5px; display:flex; flex-direction:column; gap:3.5px; flex-shrink:0; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.cc-peek-line { height:3px; border-radius:2px; background:#DCE0E8; }
.cc-peek-line.w70{ width:70%; } .cc-peek-line.w100{ width:100%; } .cc-peek-line.w85{ width:85%; } .cc-peek-line.w60{ width:60%; }
.cc-peek-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.cc-peek-cap { font-size:13px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; }
.cc-peek-sub { font-size:11.5px; color:var(--text-tertiary); letter-spacing:-0.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cc-peek-arrow { font-size:13px; color:var(--text-tertiary); flex-shrink:0; }
.cc-peek:hover .cc-peek-arrow { color:var(--blue); }
.cc-doc-title-sm { font-size:12px; font-weight:500; color:var(--text-secondary); margin:0; }   /* 제목 아래 위계 — 작게 (info 블록 gap으로 간격) */

/* 꼬리물기 라벨 + 추천 태그 */
.cc-follow-label { display:flex; align-items:center; gap:5px; font-size:11.5px; font-weight:600; color:var(--text-tertiary); margin:2px 0 7px; padding-left:2px; }
.cc-follow-label i { color:var(--blue); font-size:13px; }
.cc-rec { font-size:10px; font-weight:600; color:var(--blue); background:#fff; border:1px solid #CCDCFF; border-radius:999px; padding:1px 7px; flex-shrink:0; margin-left:auto; }

/* 꼬리물기 질문 칩 (우리 강점) */
.cc-follow { display:flex; flex-direction:column; align-items:flex-start; gap:3px; margin-top:18px; padding-top:18px; width:100%; }
.cc-follow.show-bar { border-top:1px solid var(--border); }
.cc-follow-chip { display:inline-flex; align-items:center; gap:6px; text-align:left; width:auto; max-width:100%; padding:6px 9px; border:none; border-radius:8px; background:none; font-size:12.5px; font-weight:500; color:var(--text-primary); letter-spacing:-0.2px; cursor:pointer; transition:background var(--t-fast); }
.cc-follow-chip span { flex:0 1 auto; min-width:0; }
.cc-follow-chip .cc-fi { font-size:14px; color:var(--text-tertiary); flex-shrink:0; }
.cc-follow-chip .cc-fa { font-size:11px; color:var(--blue); flex-shrink:0; }
.cc-follow-chip:hover { background:rgba(0,0,0,0.06); }
.cc-follow-chip.is-tapped { background:rgba(0,0,0,0.06); }
.cc-follow-chip:active { background:rgba(0,0,0,0.06); }
.cc-follow-chip:hover .cc-fa { color:var(--text-secondary); }

/* 순차 리빌 (생성되는 듯) */
@keyframes itemUp { from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.rv-hide { display:none !important; }   /* 자리 차지 없이 숨김 — 생성 전 빈(하얀) 공간 방지 */
.rv-defer { display:none !important; }
.rv-in { animation: itemUp .38s ease both; }
/* 생성 중 라인 끝 깜빡이는 커서 (Claude처럼 한 줄씩 생성되는 느낌) */
.rv-typing::after { content:none; }   /* 스트리밍 커서 깜박임 제거 */
@keyframes caretBlink { 0%,49%{opacity:.9;} 50%,100%{opacity:0;} }
/* ChatGPT/Claude식 텍스트 생성: 숨긴 단어 토큰은 자리도 차지하지 않다가 하나씩 흘러나옴 */
.tok-hide { display:none; }
@keyframes streamFade { from{opacity:0;} to{opacity:1;} }

/* 클릭 affordance — 모든 인터랙티브 요소 */
.file-chip.clickable { cursor:pointer; transition:box-shadow var(--t-fast), opacity var(--t-fast); }
.file-chip.clickable:hover { box-shadow:0 4px 14px rgba(0,0,0,.11); }   /* 블루 대신 은은한 드롭섀도우 */
.choice-btn { cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); }
.choice-btn:hover { border-color:var(--blue); background:var(--bg-active); }
.co-option:hover:not(.selected) { border-color:var(--border-strong); box-shadow:0 4px 16px rgba(13,13,13,.06); }

/* 풀 설문 문서 (메인 뷰) */
.bd-p { font-size:13px; color:var(--text-secondary); line-height:1.75; letter-spacing:-0.2px; margin:4px 0 10px; }
.sd-title { font-size:22px; font-weight:600; color:var(--text-primary); letter-spacing:-0.4px; line-height:1.54; }
.sd-meta { font-size:11.5px; font-weight:500; color:var(--text-tertiary); margin:5px 0 2px; }
.sd-sec { font-size:13.5px; font-weight:600; color:var(--blue); letter-spacing:-0.3px; margin:24px 0 8px; }
.sd-secnote { font-size:11px; color:#717D98; background:#F9F9F9; border-left:2px solid #CCDCFF; border-radius:0 6px 6px 0; padding:6px 9px; margin-bottom:6px; line-height:1.5; }
.sd-q { border-top:1px solid var(--border); padding:20px 14px 18px; cursor:pointer; border-radius:0; background:transparent; transition:background .22s ease, border-color .22s ease; }
/* 클릭(편집 진입): 쉐도우 없이 블루 fill + 보더로 선택 강조 */
.sd-q.sd-q-sel { background:var(--blue-soft); border:1px solid var(--blue); border-radius:6px; }   /* R값 반으로(12→6) */
.sd-q.sd-q-tap { animation: sdTap .22s cubic-bezier(.4,0,.2,1); }
@keyframes sdTap { 40% { transform: scale(.974); } }
/* 선택 문항 아래 '설문 편집' CTA (가운데, gap 5px) */
.sd-edit-cta { display:flex; flex-direction:column; align-items:center; gap:5px; margin:5px 0 0; }
.sd-edit-cta button { display:inline-flex; justify-content:center; align-items:center; gap:10px; padding:3px 8px 2px; font-weight:600; font-size:8px; line-height:1.35; color:#FFFFFF; background:#89AAF3; border:none; border-radius:2.95px; cursor:pointer; transition:background .15s ease; }
.sd-edit-cta button.pressing { background:#527FE2; }   /* 클릭: 진한 블루 */
.sd-qn { font-weight:700; color:var(--text-primary); margin-right:7px; letter-spacing:-0.3px; }
.sd-qq { font-size:15px; font-weight:600; color:var(--text-primary); line-height:1.5; letter-spacing:-0.3px; }
.sd-qtype { display:inline-block; font-size:9px; font-weight:600; color:var(--text-tertiary); background:var(--bg-hover); border-radius:4px; padding:1px 6px; letter-spacing:0; margin-left:7px; vertical-align:middle; white-space:nowrap; }
.sd-opts { list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:0; }   /* 타이틀↔보기 옵션 간격 */
.sd-opt { display:flex; align-items:center; gap:9px; padding:3px 0; font-size:13px; color:var(--text-secondary); line-height:1.45; }
.sd-opt-mark { width:13px; height:13px; flex-shrink:0; border:1.5px solid #C9CDD5; background:#fff; }
.sd-opt-mark.radio { border-radius:50%; }
.sd-opt-mark.check { border-radius:4px; }
.sd-scale { display:flex; gap:4px; margin:12px 0 2px; }   /* 타이틀↔척도 간격 */
.sd-sc { flex:1; display:flex; flex-direction:column; align-items:center; gap:3px; font-size:9px; color:var(--text-tertiary); text-align:center; line-height:1.2; }
.sd-radio { width:12px; height:12px; border-radius:50%; border:1.5px solid var(--border-strong); }
.sd-textbox { font-size:11px; color:var(--text-tertiary); border:1px dashed var(--border-strong); border-radius:6px; padding:8px 10px; margin-top:12px; }
.sd-ref { font-size:10.5px; color:var(--text-tertiary); margin-top:6px; }
.sd-logic { font-size:10.5px; color:var(--text-tertiary); background:#F7F7F7; border-left:2px solid var(--border-strong); border-radius:0 6px 6px 0; padding:5px 8px; margin-top:6px; line-height:1.45; }
.sd-end { font-size:12px; color:var(--text-secondary); padding:10px 0; }

/* ── 수집 대상 선택 카드 (Figma CollectGroup/SelectOption) ── */
/* 수집 채널 — 보더없는 리스트 (슬릭) */
.co-card { display:flex; flex-direction:column; gap:8px; width:100%; margin:14px 0 8px; }   /* 분리된 카드 + 간격 (앱 카드 규칙 동일) */
.co-option { display:flex; gap:12px; align-items:center; padding:12px 16px; background:#fff; border:1px solid var(--border); border-radius:13px; cursor:pointer; transition:background var(--t-fast), border-color var(--t-fast), box-shadow var(--t-fast); }
.co-option.selected { background:var(--blue-soft); border-color:transparent; }
.co-ico { font-size:19px; color:var(--text-tertiary); flex:none; transition:color var(--t-fast); }
.co-option.selected .co-ico { color:var(--blue-deep); }
.co-body { flex:1; min-width:0; }
.co-head { display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:3px; }
.co-title { font-size:14px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; }
.co-meta { font-size:12px; font-weight:500; color:var(--text-tertiary); letter-spacing:-0.2px; }
.co-rec { font-size:10.5px; font-weight:700; color:var(--blue-deep); background:#fff; border:1px solid #BBD0FF; border-radius:5px; padding:1px 6px; letter-spacing:-0.2px; }
.co-desc { font-size:12.5px; color:var(--text-secondary); line-height:1.55; letter-spacing:-0.2px; }
.co-radio { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--border-strong); flex:none; }
.co-radio.on { border-color:var(--blue-deep); background:radial-gradient(circle, var(--blue-deep) 0 4.5px, #fff 4.5px); }
.co-start { width:100%; height:40px; border-radius:11px; background:#0050FF; color:#fff; border:none; font-size:14px; font-weight:600; display:flex; align-items:center; justify-content:center; letter-spacing:-0.3px; cursor:pointer; transition:opacity var(--t-fast); margin:0 0 2px; }
.msg-ai > .co-start { width:100%; }
.co-start:hover, .co-start:active { opacity:0.9; color:#fff; }   /* 호버/클릭: 오퍼시티 −10% */

/* ── 설문 미리보기 문서 (아티팩트) ── */
.sv-sec { font-size:11px; font-weight:700; color:var(--text-secondary); letter-spacing:.04em; margin:16px 0 8px; }
.sv-sec:first-child { margin-top:0; }
.sv-divider { height:1px; background:var(--border); margin:14px 0; }
.cc-doc-title + .sv-divider { display:none; }   /* 패널 제목 바로 아래 bar 제거 */
/* 패널 문서는 실제 산출물 — 챗 카드보다 가독성 우선(섹션 진하게, 본문 또렷하게) */
.artifact-body .cc-doc-sec { color:var(--text-primary); }
.artifact-body .cc-doc-ul li { color:#3D3D3D; }
.artifact-body .bd-p { color:#3D3D3D; }
.sv-q { font-size:12.5px; color:var(--text-primary); line-height:1.55; letter-spacing:-0.2px; margin-bottom:6px; }
.sv-q strong { font-weight:700; }
.sv-opts { font-size:12px; color:var(--text-secondary); line-height:1.7; margin-bottom:8px; letter-spacing:-0.2px; }
.sv-logic { color:var(--blue); font-size:11px; }
.sv-quote { border-left:2px solid #CCDCFF; background:#F9F9F9; border-radius:0 8px 8px 0; padding:7px 10px; font-size:11.5px; color:#717D98; line-height:1.55; margin:8px 0 4px; letter-spacing:-0.2px; }
.sv-table { border-collapse:collapse; width:100%; font-size:11px; margin:6px 0 8px; }
.sv-table th { color:var(--text-secondary); font-weight:600; border-bottom:1px solid var(--border); padding:5px 4px; text-align:center; white-space:nowrap; }
.sv-table th:first-child, .sv-table td:first-child { text-align:left; }
.sv-table td { padding:6px 4px; text-align:center; color:var(--text-secondary); border-bottom:1px solid #F3F3F3; }
.sv-radio { display:inline-block; width:9px; height:9px; border-radius:50%; border:1.5px solid var(--border-strong); }
.sv-cap { font-size:10.5px; color:var(--text-tertiary); margin:2px 0 8px; }

/* 데모 안내 링크 (유저 직접 질문 응답) */
.demo-link { color: var(--blue-deep); font-weight: 600; }
.demo-link:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ── CTA hint (Cursor 방식) ── */
.cta-hint {
  text-align: center; font-size: 12px; color: var(--text-tertiary);
  margin-top: 10px; line-height: 16px;
}
.cta-hint.show { }
.cta-hint #cta-hook { color: var(--text-primary); }
.cta-hint a { color: var(--blue-deep); font-weight: 600; text-decoration: none; white-space: nowrap; display: inline-block; }
.cta-hint a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ── significance markers ── */
.ai-prose table.mini td.sig { color: var(--red); font-weight: 700; white-space: nowrap; }
.av-ct td.av-sig { color: #DD4040; font-weight: 600; white-space: nowrap; }
.av-ct tr.hl td { color: var(--text-primary); }
.av-sig-badge {
  font-size: 9px; font-weight: 700; color: #DD4040; background: #FFEDD5;
  padding: 2px 7px; border-radius: 6px; text-transform: none; letter-spacing: 0; margin-left: 6px;
}

/* ── inline / end CTA card ── */
.end-cta { margin-top: 10px; }
.cta-btn {
  display: inline-flex; align-items: center; gap: 4px;
  background: var(--blue); color: #fff; font-size: 12.5px; font-weight: 600;
  padding: 8px 16px; border-radius: var(--r-pill); text-decoration: none;
  transition: opacity var(--t-fast);
}
.cta-btn:hover, .cta-btn:active { opacity: 0.9; }   /* 호버/클릭: 오퍼시티 −10%만 */
.cta-btn.lg { font-size: 14px; padding: 11px 22px; margin-top: 4px; }
.end-cta-card {
  margin: 18px 0 8px; padding: 24px 20px; text-align: center;
  background: var(--blue-soft);
  border: none; border-radius: 16px;
}
.end-cta-title { font-size: 15px; font-weight: 700; color: var(--text-primary); letter-spacing: -0.2px; }
.end-cta-sub { font-size: 12.5px; color: var(--text-secondary); margin: 6px 0 14px; }

/* ── real-scenario artifact bits (media1-3 이식) ── */
.av-hi { color:var(--red); font-weight:700; }
.av-lo { color:var(--blue-deep); font-weight:700; }
.av-sig-note { font-size:10px; color:var(--text-tertiary); margin-top:8px; }
.av-proj { display:flex; gap:10px; align-items:center; padding:12px; background:#F9F9F9; border:1px solid var(--border); border-radius:12px; }
.av-proj-ic { width:34px; height:34px; border-radius:8px; background:var(--blue-light); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.av-proj-t { font-size:12px; font-weight:600; color:var(--text-primary); }
.av-proj-s { font-size:11px; color:var(--text-tertiary); margin-top:2px; }
.av-proj-meta { font-size:10px; color:var(--text-tertiary); margin-top:10px; }
.av-doc-h { font-size:14px; font-weight:600; color:var(--text-primary); letter-spacing:-0.4px; margin-bottom:12px; display:flex; align-items:center; gap:6px; }   /* Subtitle-14 */
.av-doc-badge { font-size:9px; font-weight:600; color:var(--blue); background:var(--blue-light); padding:2px 7px; border-radius:4px; }
.av-doc-sec { font-size:10px; font-weight:700; color:var(--text-secondary); margin:14px 0 5px; text-transform:uppercase; letter-spacing:.05em; }
.av-doc-li { font-size:13px; color:var(--gray-10); padding:3px 0; line-height:18px; letter-spacing:-0.3px; }   /* Body-13 */

/* ── Figma 출처 인용 (Chat / Data) — 제품 컴포넌트 1:1 ── */
.fig-sources { margin-top:18px; display:flex; flex-direction:column; gap:4px; width:100%; }
.fig-src-label { font-size:11px; font-weight:500; color:var(--text-tertiary); letter-spacing:-0.3px; margin-bottom:4px; }
.fig-src-row { display:flex; align-items:center; gap:7px; }
.fig-src-num { flex-shrink:0; min-width:22px; height:20px; padding:2px 6px; display:inline-flex; align-items:center; justify-content:center;
  background:rgba(0,0,0,0.05); border-radius:6px; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:11.5px; color:var(--text-tertiary); opacity:0.7; }
.fig-src-card { flex:1; min-width:0; display:flex; align-items:center; gap:7px; padding:6px 10px;
  background:rgba(159,163,173,0.07); border-radius:13px; transition:background var(--t-fast); }
.fig-src-card { cursor:pointer; }
.fig-src-card:hover { background:rgba(0,0,0,0.06); }
.fig-src-card:active { background:rgba(0,0,0,0.09); }
.fig-src-row.src-selected .fig-src-card { background:var(--blue-soft); box-shadow:inset 0 0 0 1.5px var(--blue-light); }
.fig-src-row.src-selected .fig-src-num { opacity:1; color:var(--blue-deep); background:var(--blue-light); }
.fig-src-ico { width:18px; height:18px; flex-shrink:0; border-radius:5px; display:flex; align-items:center; justify-content:center; font-size:10px; }
.fig-src-ico.survey { background:var(--blue-light); } .fig-src-ico.report { background:#FCE7D4; }
.fig-src-ico.trend { background:#D9F9FC; } .fig-src-ico.doc { background:var(--green-bg); }
.fig-src-title { flex:1; min-width:0; font-size:11.5px; font-weight:400; color:var(--text-primary); letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fig-src-type { flex-shrink:0; font-size:10.5px; color:var(--text-tertiary); opacity:0.7; font-family:ui-monospace,'SF Mono',Menlo,monospace; letter-spacing:0; }
.fig-src-go { flex-shrink:0; color:var(--text-tertiary); font-size:12px; opacity:0.7; }
.fig-src-link { width:28px; height:28px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:6px; color:var(--text-tertiary); transition:color var(--t-fast); }
.fig-src-card:hover .fig-src-link { color:var(--blue); }

/* ── 제품형 패널 카드 정밀화 (Figma 카드/그림자) ── */
.artifact-body { padding:36px; }
.artifact-title { font-size:11px; font-weight:600; color:var(--text-secondary); letter-spacing:-0.3px; }
.av-ins { background:#fff; border:1px solid var(--border); box-shadow:var(--shadow-sm); }
.av-ins.hl { border-color:var(--blue); background:#fff; box-shadow:0 0 0 1px var(--blue), var(--shadow-md); }
.av-ov-card { background:#fff; box-shadow:var(--shadow-sm); }
.av-ov-card.hl { border-color:var(--blue); box-shadow:0 0 0 1px var(--blue), var(--shadow-md); }
.av-ds.active { box-shadow:0 0 0 1px var(--blue); }

/* ── 채팅 인라인 분석 블록 (제품 답변 안 테이블) ── */
.chat-block { margin:16px 0 6px; }
.cb-meta { font-size:13px; color:var(--text-secondary); margin-bottom:12px; letter-spacing:-0.3px; line-height:20px; }
.cb-meta strong { color:var(--text-primary); font-weight:600; }
.cb-bullets { margin:2px 0 14px; padding-left:18px; }
.cb-bullets li { font-size:13.5px; color:var(--text-primary); line-height:22px; margin-bottom:3px; letter-spacing:-0.3px; }
.cb-bullets strong { font-weight:600; }
.cb-callout { background:#F9F9F9; border-radius:12px; padding:12px 16px; font-size:13px; color:var(--text-secondary); line-height:20px; margin-bottom:14px; letter-spacing:-0.3px; }
.cb-callout strong { color:var(--text-primary); font-weight:600; }
.cb-table { border-collapse:collapse; width:100%; font-size:13px; margin:4px 0; }
.cb-table th { text-align:right; color:var(--text-secondary); font-weight:600; padding:7px 12px; border-bottom:1px solid var(--border); white-space:nowrap; letter-spacing:-0.3px; line-height:1.35; vertical-align:bottom; }
.cb-table th:first-child, .cb-table td:first-child { text-align:left; color:var(--text-primary); }
.cb-table td { text-align:right; padding:6px 12px; border-bottom:1px solid var(--border); color:var(--gray-10); letter-spacing:-0.3px; }
.cb-table td strong { color:var(--text-primary); font-weight:700; }
.cb-table tbody tr:hover { background:var(--bg-page); }
.cb-hi { color:var(--red); font-weight:700; }
.cb-lo { color:var(--blue-deep); font-weight:700; }
.cb-note { font-size:12px; color:var(--text-secondary); margin-top:10px; line-height:1.55; letter-spacing:-0.2px; }
.cb-note strong { color:var(--text-primary); font-weight:600; }
.cb-note .leg-hi { color:var(--red); font-weight:600; } .cb-note .leg-lo { color:var(--blue-deep); font-weight:600; }
/* 제품형 크로스탭(모노톤): 컬러 없이 ▲/▼ 유의 마커만 */
.cb-mk { font-size:9px; color:var(--text-tertiary); margin-left:2px; vertical-align:middle; }
.cb-mk.up { color:#EC7669; } .cb-mk.dn { color:#4893FF; }
.cb-table tr.cb-grp td { border-top:1px solid var(--border); }
.cb-table td.cb-gap { color:var(--text-secondary); }
/* TOP3 순위 행 — 배경 하이라이트 없이 랭크 배지만 */
.cb-table tr.cb-rank:hover td { background:var(--bg-page); }
.cb-rk { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:50%; background:var(--blue); color:#fff; font-size:10px; font-weight:700; margin-right:8px; vertical-align:middle; }
/* 챗 인라인 차트는 보더 박스(카드)로 — 메타+차트를 감싸고, 노트는 박스 밖 */
.cb-card { border:1px solid var(--border); border-radius:var(--r-sm); padding:15px 18px 7px; background:transparent; margin:2px 0; }
.cb-card .cb-meta { margin-bottom:4px; }
.cb-card .cb-chart { margin:6px 0 12px; }
/* ── 인라인 막대 차트 — 단색·직각·그리드 스케일(ChatGPT식 데이터 차트) ── */
.cb-chart { position:relative; margin:24px 0 20px; padding:8px 0 30px; }
.cb-grid { position:absolute; top:8px; bottom:30px; left:165px; right:56px; pointer-events:none; z-index:0; }
.cb-grid i { position:absolute; top:0; bottom:0; width:1px; background:#EEF1F6; }
.cb-grid i:first-child { background:#E2E6EC; }   /* 0 기준선 살짝 진하게 */
.cb-axis { position:absolute; left:165px; right:56px; bottom:6px; height:14px; pointer-events:none; }
.cb-axis span { position:absolute; transform:translateX(-50%); font-size:10px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.cb-bar-row { display:grid; grid-template-columns:17px 128px 1fr 46px; align-items:center; gap:10px; padding:3px 0; position:relative; z-index:1; }   /* 막대 20 : 갭 6 ≈ 0.3 비율 */
.cb-bar-rank { display:inline-flex; align-items:center; justify-content:center; width:17px; height:17px; border-radius:4px; background:#ECF1FA; color:var(--blue); font-size:10px; font-weight:700; }
.cb-bar-row.is-top .cb-bar-rank { background:var(--blue); color:#fff; }
.cb-bar-label { font-size:12.5px; color:var(--text-primary); letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-bar-track { height:13px; background:transparent; position:relative; }
.cb-bar-fill { height:100%; border-radius:2px; background:var(--chart-3); transition:width 680ms cubic-bezier(.4,0,.2,1); }   /* 색은 카테고리 인덱스로 인라인 지정 */
.cb-bar-val { text-align:right; font-size:13px; font-weight:700; color:var(--text-primary); letter-spacing:-0.3px; font-variant-numeric:tabular-nums; }

/* ── 클릭형 파일칩 → 사이드 패널 오픈 (제품 미리보기 동작) ── */
.file-chip.clickable { cursor:pointer; }
.file-chip.clickable:hover { box-shadow:0 4px 14px rgba(0,0,0,.11); }   /* 블루 대신 은은한 드롭섀도우 */
.file-open { display:inline-flex; align-items:center; gap:4px; flex-shrink:0; margin-left:2px;
  font-size:11px; font-weight:600; color:var(--blue); background:var(--blue-soft);
  border:1px solid var(--blue-light); border-radius:6px; padding:5px 9px; transition:background var(--t-fast); }
.file-open:hover { background:var(--blue-light); }
.file-open i { display:flex; }
/* ════ 신규: 페르소나 탐색 (검색 세그먼트 · 합성 소비자 카드/패널) ════ */
/* 검색 세그먼트 블록 (좌측 채팅 인라인) */
.ps-search { margin:12px 0 4px; display:flex; flex-direction:column; gap:8px; }
.ps-seg { display:flex; gap:11px; align-items:flex-start; padding:13px 15px; background:#fff; border:1px solid var(--border); border-radius:13px; }
.ps-seg-rank { width:20px; height:20px; border-radius:6px; background:#F2EBFA; color:#813BC6; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top:1px; }
.ps-seg.b .ps-seg-rank { background:#E0F2F4; color:#0C8C99; }

.ps-seg-body { flex:1; min-width:0; display:flex; flex-direction:column; gap:1px; }
.ps-seg-head { display:flex; align-items:baseline; gap:7px; flex-wrap:wrap; }
.ps-seg-tag { font-size:13px; font-weight:700; color:#813BC6; }
.ps-seg.b .ps-seg-tag { color:#0C8C99; }
.ps-seg-name { font-size:13px; font-weight:600; color:#000; letter-spacing:-0.3px; line-height:20px; }
.ps-seg-meta { display:inline-flex; align-items:center; gap:7px; }
.ps-seg-sep { font-size:11px; font-weight:300; color:var(--border-strong); flex-shrink:0; }
.ps-seg-size { font-size:13px; font-weight:700; color:#000; letter-spacing:-0.3px; }
.ps-seg-size em { font-style:normal; font-weight:700; color:var(--text-tertiary); font-size:13px; margin-left:4px; }
.ps-seg-desc { font-size:13px; color:#3D3D3D; line-height:1.55; letter-spacing:-0.2px; }
.ps-seg-note { display:flex; align-items:flex-start; gap:6px; font-size:11.5px; font-weight:500; color:var(--text-secondary); background:var(--bg-page); border-radius:9px; padding:9px 11px; line-height:1.5; }
.ps-seg-note i { color:var(--text-tertiary); font-size:13px; margin-top:1px; flex-shrink:0; }

/* 합성 소비자 카드 (좌측 채팅) */
.pc-wrap { display:flex; flex-direction:column; gap:10px; margin:12px 0 4px; }
/* 합성 소비자 카드 (Figma spec) — 아바타(40 원형 라디얼) + 이름 + 태그|크기 펄 + 인용. 버튼 없음·카드 전체 클릭 */
.pc-card { position:relative; overflow:hidden; isolation:isolate; display:flex; flex-direction:row; align-items:flex-start; gap:11px; padding:17px 18px; background:#fff; border:1px solid var(--border); border-radius:14px; cursor:pointer; transition:border-color var(--t-fast), box-shadow var(--t-fast); }
.pc-card:hover, .pc-card:active, .pc-card.pressing { border-color:var(--border-strong); box-shadow:0 4px 16px rgba(13,13,13,.06); }   /* 완료/브리프 카드와 동일: 보더 강조 + 드롭섀도우 */
/* AI 생성 합성 소비자 = Dataspace 로고 모티프(블루 #6BB8FF·#7A85FF·#5C8AFF) + 페르소나 컬러를 은은하게 일렁이는 오로라로 (Siri/ElevenLabs 톤) */
.pc-card::before { content:''; position:absolute; inset:-35%; z-index:0; pointer-events:none; filter:blur(15px); opacity:.85;
  background:
    radial-gradient(38% 48% at 16% 18%, rgba(122,133,255,.34), transparent 70%),
    radial-gradient(42% 52% at 86% 26%, rgba(107,184,255,.32), transparent 72%),
    radial-gradient(48% 58% at 64% 92%, rgba(92,138,255,.26), transparent 70%);
  animation:pcAurora 17s ease-in-out infinite alternate; will-change:transform; }
.pc-card::before { opacity:.6; }
.pc-card.a::before {   /* 김도윤 — 퍼플 + 로고 블루 */
  background:
    radial-gradient(38% 48% at 16% 18%, rgba(126,48,203,.32), transparent 70%),
    radial-gradient(42% 52% at 86% 26%, rgba(122,133,255,.32), transparent 72%),
    radial-gradient(48% 58% at 64% 92%, rgba(107,184,255,.26), transparent 70%); }
.pc-card.b::before {   /* 박준영 — 틸 + 로고 블루 */
  background:
    radial-gradient(38% 48% at 16% 18%, rgba(14,156,170,.32), transparent 70%),
    radial-gradient(42% 52% at 86% 26%, rgba(92,138,255,.30), transparent 72%),
    radial-gradient(48% 58% at 64% 92%, rgba(107,184,255,.26), transparent 70%); }
.pc-card:hover::before { opacity:.78; }
.pc-card > .pc-av, .pc-card > .pc-body { position:relative; z-index:1; }
@keyframes pcAurora {
  0%   { transform:translate3d(-4%,-3%,0) scale(1.06) rotate(0deg); }
  50%  { transform:translate3d(3%,2%,0)   scale(1.16) rotate(7deg); }
  100% { transform:translate3d(-2%,4%,0)  scale(1.09) rotate(-6deg); }
}
@media (prefers-reduced-motion: reduce){ .pc-card::before { animation:none; } }
.pc-av { width:27px; height:27px; border-radius:50%; color:#F9F6FC; font-size:11px; font-weight:700; line-height:1; letter-spacing:-0.5px; display:flex; align-items:center; justify-content:center; flex-shrink:0;
  background:var(--avc); background-size:185% 185%; animation:avFlow 6.5s ease-in-out infinite; }   /* 그라디언트가 계속 흐르듯 움직임 */
@keyframes avFlow { 0%{ background-position:12% 8%; } 50%{ background-position:88% 92%; } 100%{ background-position:12% 8%; } }
@media (prefers-reduced-motion: reduce){ .pc-av { animation:none; } }
.pc-av.sm { width:24px; height:24px; font-size:11px; }   /* 인터뷰 헤더용 작은 아바타 */
.pc-body { display:flex; flex-direction:column; align-items:flex-start; gap:8px; min-width:0; flex:1; }
.pc-name { font-size:14px; font-weight:600; color:#000; letter-spacing:-0.4px; line-height:20px; }
/* '합성 소비자' 인포 배지 — 중립(페르소나 컬러와 충돌 X), 이름 뒤 */
.pc-vtag { display:inline-block; margin-left:7px; vertical-align:middle; font-size:10.5px; font-weight:600; color:var(--text-tertiary); background:var(--bg-page); border:1px solid var(--border); border-radius:5px; padding:1.5px 6px; letter-spacing:-0.2px; line-height:1.35; }
.pp-vtag { font-size:11.5px; margin-left:9px; padding:2px 7px; }
.pc-meta { display:inline-flex; align-items:center; gap:7px; max-width:100%; }
.pc-tag { font-size:12px; font-weight:600; color:#813BC6; letter-spacing:-0.4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pc-sep { font-size:11px; font-weight:300; color:var(--border-strong); flex-shrink:0; }
.pc-size { font-size:11.5px; font-weight:500; color:var(--text-tertiary); letter-spacing:-0.3px; flex-shrink:0; }
.pc-quote { font-size:13px; font-weight:400; line-height:21px; letter-spacing:-0.3px; color:#3D3D3D; }
/* 세그 B = 틸 */

.pc-card.b .pc-tag { color:#0C8C99; }

/* 합성 소비자 대화 버블 (좌측 채팅) */
.msg-persona { margin:10px 0; }
.pb-head { display:flex; align-items:center; gap:8px; margin-bottom:7px; }
.pb-name { font-size:13px; font-weight:700; color:var(--text-primary); letter-spacing:-0.3px; }
.pb-bubble { position:relative; overflow:hidden; isolation:isolate; display:inline-block; max-width:88%; font-size:14px; color:var(--text-primary); line-height:1.6; letter-spacing:-0.2px; background:#EEF3FF; border-radius:4px var(--r-md) var(--r-md) var(--r-md); padding:11px 14px; }
.msg-persona.hn .pb-bubble { background:#F4EFFC; color:#813BC6; }   /* 세그A 퍼플 */
.msg-persona.jh .pb-bubble { background:#E8F5F6; color:#0C8C99; }   /* 세그B 틸 */
/* 챗 버블에도 은은한 오로라 (AI 합성 소비자) */
.pb-bubble::before { content:''; position:absolute; inset:-45%; z-index:-1; pointer-events:none; filter:blur(14px); opacity:.55; animation:pcAurora 15s ease-in-out infinite alternate; will-change:transform; }
.msg-persona.hn .pb-bubble::before { background:
    radial-gradient(40% 60% at 14% 18%, rgba(126,48,203,.24), transparent 70%),
    radial-gradient(46% 64% at 90% 84%, rgba(122,133,255,.22), transparent 72%); }
.msg-persona.jh .pb-bubble::before { background:
    radial-gradient(40% 60% at 14% 18%, rgba(14,156,170,.24), transparent 70%),
    radial-gradient(46% 64% at 90% 84%, rgba(92,138,255,.20), transparent 72%); }
@media (prefers-reduced-motion: reduce){ .pb-bubble::before { animation:none; } }

/* 페르소나 상세 패널 (우측) */
/* 페르소나 아티팩트 = 패널 프레임 전체에 깔리는 은은한 오로라 (스크롤과 무관, 뷰포트 고정) */
.artifact-inner { position:relative; isolation:isolate; }
.artifact-inner:has(.av.pp)::before { content:''; position:absolute; inset:-12%; z-index:-1; pointer-events:none; filter:blur(48px); opacity:.5;
  background:
    radial-gradient(30% 24% at 12% 6%, rgba(126,48,203,.30), transparent 72%),
    radial-gradient(34% 28% at 90% 16%, rgba(122,133,255,.26), transparent 74%),
    radial-gradient(42% 30% at 52% 96%, rgba(107,184,255,.22), transparent 72%);
  animation:pcAurora 22s ease-in-out infinite alternate; will-change:transform; }
.artifact-inner:has(.av.pp.jh)::before {   /* 박준영 — 틸 + 로고 블루 */
  background:
    radial-gradient(30% 24% at 12% 6%, rgba(14,156,170,.30), transparent 72%),
    radial-gradient(34% 28% at 90% 16%, rgba(92,138,255,.26), transparent 74%),
    radial-gradient(42% 30% at 52% 96%, rgba(107,184,255,.22), transparent 72%); }
@media (prefers-reduced-motion: reduce){ .artifact-inner::before { animation:none; } }
.pp-head { display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.pp-head .pc-av { width:37px; height:37px; font-size:14px; }
.pp-id { display:flex; flex-direction:column; gap:3px; min-width:0; }
.pp-name { font-size:20px; font-weight:600; color:var(--text-primary); letter-spacing:-0.4px; line-height:1.3; }
.pp-tag { font-size:12px; font-weight:600; color:#813BC6; letter-spacing:-0.3px; }
.pp.jh .pp-tag { color:#0C8C99; }
.pp-quote { font-size:13px; color:#3D3D3D; line-height:1.75; letter-spacing:-0.2px; padding:0 0 0 13px; border-left:3px solid #813BC6; margin-bottom:22px; }
.pp.jh .pp-quote, .pp.jh .pp-think { border-left-color:#0E9CAA; }
.pp-bullets { margin:0 0 22px; padding-left:17px; }
.pp-bullets li { font-size:13px; color:#3D3D3D; line-height:1.7; }
.pp-attr { width:100%; border-collapse:separate; border-spacing:0; margin:0 0 22px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.pp-attr th { width:40%; text-align:left; vertical-align:top; font-size:13px; font-weight:600; color:var(--text-secondary); padding:9px 12px; background:#FAFAFB; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.pp-attr tr:last-child th, .pp-attr tr:last-child td { border-bottom:none; }

.pp-attr td { font-size:13px; color:#3D3D3D; padding:9px 12px; border-bottom:1px solid var(--border); line-height:1.5; }
.pp-sec { font-size:13.5px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; margin:32px 0 11px; }
.pp-think { font-size:13px; color:#3D3D3D; line-height:1.75; letter-spacing:-0.2px; padding:0 0 0 13px; border-left:3px solid #813BC6; margin-bottom:4px; }
.pp-evnote { font-size:12px; color:var(--text-secondary); line-height:1.6; margin-bottom:12px; }
.pp-ev { width:100%; border-collapse:separate; border-spacing:0; font-size:12.5px; border:1px solid var(--border); border-radius:8px; overflow:hidden; }
.pp-ev thead th { text-align:left; vertical-align:bottom; font-size:11.5px; font-weight:600; color:var(--text-secondary); padding:9px 10px; background:#FAFAFB; border-bottom:1px solid var(--border); border-right:1px solid var(--border); line-height:1.4; }

.pp-ev tbody th { text-align:left; font-size:12.5px; font-weight:600; color:var(--text-primary); padding:9px 10px; background:#FCFCFD; border-bottom:1px solid var(--border); border-right:1px solid var(--border); white-space:nowrap; }
.pp-ev td { font-size:12.5px; color:#3D3D3D; padding:9px 10px; border-bottom:1px solid var(--border); border-right:1px solid var(--border); }
.pp-ev th:last-child, .pp-ev td:last-child { border-right:none; }
.pp-ev tbody tr:last-child th, .pp-ev tbody tr:last-child td { border-bottom:none; }

/* ════ 신규: Proof Seeker 보고서 패널 ════ */
.rp .cc-doc-title { font-size:26px; font-weight:700; line-height:1.36; letter-spacing:-0.6px; margin-bottom:5px; }
.rp-meta { font-size:11.5px; color:var(--text-tertiary); margin:0 0 2px; }
.rp .sv-divider { margin:14px 0 4px; }
/* 섹션 라벨 — 블루 소형 라벨(에디토리얼 위계) */
.rp .cc-doc-sec { font-size:18px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; margin:38px 0 18px; padding-top:26px; border-top:1px solid var(--border); }
.rp .cc-doc-sec-first { margin-top:16px; padding-top:0; border-top:none; }
/* 인사이트 헤드라인 — 본문(13)보다 확실히 큰 16/700, 그룹 사이 큰 여백(구분선 없이 위계) */
.rp-head { font-size:14px; font-weight:600; color:var(--text-primary); letter-spacing:-0.4px; line-height:1.5; margin:30px 0 10px; }
.rp-head + .rp-chart { margin-top:8px; }
/* 문항 넘버 — 회색 모노스페이스(출처 번호 UI와 동일) */
.rp-tag { display:inline-block; font-family:ui-monospace,'SF Mono',Menlo,monospace; font-size:10.5px; font-weight:500; color:var(--text-tertiary); background:rgba(0,0,0,0.05); opacity:0.85; padding:1px 6px; border-radius:6px; margin-left:5px; vertical-align:middle; }
/* 출처 = 보고서 안의 '참고 데이터' 레퍼런스 목록처럼(카드 박스 X, 얇은 구분선으로 묶인 문서 텍스트) */
.rp-src { display:flex; align-items:center; gap:9px; padding:6px 2px; background:none; border-radius:0; margin:0; border-bottom:1px solid var(--border); }
.rp-src:first-of-type { border-top:1px solid var(--border); }
.rp-src:hover { background:none; }
.rp-src .fig-src-ico.os svg { width:15px; height:15px; }
.rp-src-name { font-size:13px; font-weight:500; color:var(--text-secondary); letter-spacing:-0.2px; }
/* 다운로드 토스트 (브라우저 다운로드 알림 스타일) */
.dl-toast { position:absolute; right:22px; bottom:22px; z-index:80; display:flex; align-items:center; gap:11px; width:322px; max-width:48%; padding:12px 14px; background:#fff; border:1px solid var(--border); border-radius:13px; box-shadow:0 22px 56px rgba(13,13,13,.30), 0 6px 16px rgba(13,13,13,.16); transform:translateY(18px); opacity:0; transition:transform .36s cubic-bezier(.4,0,.2,1), opacity .36s ease; }
.dl-toast.show { transform:translateY(0); opacity:1; }
.dl-ico { width:30px; height:30px; flex-shrink:0; display:flex; }
.dl-ico svg { width:100%; height:100%; }
.dl-body { flex:1; min-width:0; }
.dl-name { font-size:12.5px; font-weight:600; color:var(--text-primary); letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dl-status { font-size:11px; color:var(--text-tertiary); margin-top:2px; display:flex; align-items:center; gap:4px; }
.dl-check { color:#22A565; font-size:13px; }
.dl-bar { margin-top:6px; height:3px; border-radius:3px; background:var(--bg-hover); overflow:hidden; }
.dl-bar > i { display:block; height:100%; width:6%; border-radius:3px; background:var(--blue); transition:width 1.5s cubic-bezier(.32,.72,0,1); }
.dl-toast.done .dl-bar { opacity:0; transition:opacity .3s ease; }
.dl-folder { font-size:18px; color:var(--text-tertiary); flex-shrink:0; }
.rp-src-spec { font-size:11px; color:var(--text-tertiary); margin-left:auto; }
.rp-src-go { font-size:13px; color:var(--text-tertiary); flex-shrink:0; }
.rp-chart { margin:14px 0 6px; padding:16px 18px; background:transparent; border:1px solid var(--border); border-radius:var(--r-sm); }
.rp-chart-cap { font-size:11px; font-weight:600; color:var(--text-tertiary); margin-bottom:16px; letter-spacing:-0.2px; }
.rp-plot { position:relative; padding:4px 0 28px; }
.rp-grid { position:absolute; top:4px; bottom:28px; left:108px; right:58px; pointer-events:none; z-index:0; }
.rp-grid i { position:absolute; top:0; bottom:0; width:1px; background:#EEF1F6; }
.rp-grid i:first-child { background:#E2E6EC; }
.rp-axis { position:absolute; left:108px; right:58px; bottom:6px; height:14px; pointer-events:none; }
.rp-axis span { position:absolute; transform:translateX(-50%); font-size:10px; color:var(--text-tertiary); font-variant-numeric:tabular-nums; white-space:nowrap; }
.rp-bar-row { display:grid; grid-template-columns:96px 1fr 46px; align-items:center; gap:12px; padding:3px 0; position:relative; z-index:1; }
.rp-bar-lab { font-size:11.5px; color:var(--text-secondary); letter-spacing:-0.3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rp-bar-track { height:13px; background:transparent; position:relative; }
.rp-bar-fill { height:100%; border-radius:2px; background:var(--chart-3); transition:width 600ms cubic-bezier(.32,.72,0,1); }
.rp-bar-val { text-align:right; font-size:12.5px; font-weight:700; color:var(--text-primary); font-variant-numeric:tabular-nums; }

/* ═══════════════════════════════════════════════
   설문 편집 — 아티팩트 프레임이 1칼럼으로 확장되는 화면
   (우측 아티팩트 영역에서 좌측으로 자라나는 grow 인터랙션)
═══════════════════════════════════════════════ */
.ed-screen{
  position:absolute; left:66px; top:12px; right:14px; bottom:14px; z-index:50;   /* rail(52px) + 좌측 14px 패딩만큼 띄움(상·우·하 인셋과 동일) */
  background:var(--bg-canvas);
  display:flex; flex-direction:column; overflow:hidden;
  border:1px solid var(--border); border-radius:13px;   /* 아티팩트 프레임과 동일 */
  clip-path:inset(0 0 0 56% round 13px); opacity:0; pointer-events:none;   /* 닫힘: 우측 아티팩트 폭만 노출 */
  transition:clip-path .56s cubic-bezier(.32,.72,0,1), opacity .2s ease, left .46s cubic-bezier(.32,.72,0,1);
}
.ed-screen.open{ clip-path:inset(0 0 0 0 round 13px); opacity:1; pointer-events:auto; }   /* 열림: 아티팩트가 칼럼으로 확장 */
/* 편집 중: rail(52px)만 남기고 시나리오 사이드바는 접음(편집창 위·아래 여백에서 안 비치게) — rail로 두 창 전환 */
.app.editing{ grid-template-columns:52px 0px 1fr 42%; }
/* 편집 중 rail 펼침 — 호버 또는 햄버거 클릭(sticky) 둘 다 */
.app.editing:has(.rail:hover), .app.editing.rail-open, .app.editing.rail-open:has(.rail:hover){ grid-template-columns:200px 0px 1fr 42%; }
/* 일반(챗) 모드 — 햄버거 클릭 sticky 펼침 (호버 펼침은 기존 .app:has(.rail:hover) 규칙이 처리) */
.app.rail-open{ grid-template-columns:200px 200px 1fr 0px; }
.app.rail-open.artifact-open{ grid-template-columns:200px 200px 1fr 42%; }
.app.rail-open .rail-label, .app.rail-open .rail-side{ opacity:1; }
.app.rail-open .rail-space{ height:44px; opacity:1; margin:0 12px 6px; }
/* 편집 중 rail 펼치면(호버/클릭) 편집창이 우측으로 밀리며 반응형 축소 (.ed-screen은 .app의 형제) */
.app.editing:has(.rail:hover) ~ .ed-screen, .app.editing.rail-open ~ .ed-screen{ left:214px; }
/* 상단 바 */
.ed-bar{ display:flex; align-items:center; gap:14px; height:48px; padding:0 14px; border-bottom:1px solid var(--border); background:var(--bg-canvas); flex:none; }
.ed-bar-l{ display:flex; align-items:center; gap:10px; min-width:0; flex:1; }
.ed-back{ color:var(--text-secondary); display:flex; font-size:16px; cursor:pointer; border-radius:6px; padding:2px; transition:background .15s, color .15s; }
.ed-back:hover{ background:var(--bg-hover); color:var(--text-primary); }
.ed-doc-name{ font-size:13px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ed-saved{ font-size:11px; color:#9A9A9A; flex:none; }
.ed-tabs{ display:flex; gap:2px; background:#E7E7E7; border-radius:8px; padding:3px; flex:none; }
.ed-tabs span{ font-size:12px; font-weight:600; color:var(--text-secondary); padding:5px 14px; border-radius:6px; }
.ed-tabs span.active{ background:#fff; color:var(--text-primary); box-shadow:0 1px 2px rgba(0,0,0,.07); }
.ed-bar-r{ display:flex; align-items:center; gap:10px; flex:1; justify-content:flex-end; }
.ed-prev{ font-size:12px; color:var(--text-secondary); font-weight:600; display:flex; align-items:center; gap:5px; }
.ed-x{ width:28px; height:28px; border:none; background:none; color:var(--text-secondary); border-radius:7px; cursor:pointer; display:flex; align-items:center; justify-content:center; font-size:15px; }
.ed-x:hover{ background:var(--bg-hover); color:var(--text-primary); }
/* 3패널 그리드 */
.ed-grid{ flex:1; display:grid; grid-template-columns:228px 1fr 248px; min-height:0; }
.ed-list{ border-right:1px solid var(--border); padding:16px 12px; overflow:auto; background:var(--bg-canvas); }
.ed-canvas{ overflow:auto; padding:26px 30px; background:var(--bg-canvas); }
.ed-set{ border-left:1px solid var(--border); padding:18px 16px; overflow:auto; background:var(--bg-canvas); }
/* 편집기 패널 — 얇은 스크롤바(.chat-scroll·.artifact-body 와 동일 컨벤션) */
.ed-list::-webkit-scrollbar, .ed-canvas::-webkit-scrollbar, .ed-set::-webkit-scrollbar { width: 4px; height: 4px; }
.ed-list::-webkit-scrollbar-thumb, .ed-canvas::-webkit-scrollbar-thumb, .ed-set::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
.ed-list-head{ font-size:12px; font-weight:700; color:var(--text-primary); padding:0 6px 10px; display:flex; justify-content:space-between; align-items:center; }
.ed-list-head .a{ font-size:11px; color:var(--text-secondary); font-weight:600; }
.ed-li-group{ background:#FBFBFC; border:none; border-radius:10px; padding:2px 6px 6px; margin-bottom:8px; }   /* 블록별 옅은 그레이 그룹 (보더 없음) */
.ed-sec-label{ font-size:10.5px; font-weight:500; letter-spacing:.04em; color:var(--text-primary); padding:8px 6px 4px; }   /* 카테고리 타이틀 = 블랙, 볼드 제거 */
.ed-li{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-tertiary); padding:8px; border-radius:7px; line-height:1.3; cursor:default; }   /* 비활성 = 한 톤 연한 텍스트, 갭 넉넉히 */
.ed-li:hover{ background:var(--bg-hover); }
.ed-li.active{ background:rgba(0,80,255,.10); color:var(--blue-deep); font-weight:500; }   /* 하이라이팅 문항 = 브랜드 블루 #0050FF, fill 10% */
.ed-li-tag{ font-size:9.5px; font-weight:700; color:var(--text-tertiary); flex:none; letter-spacing:.02em; }   /* 넘버 박스 제거 */
.ed-li.active .ed-li-tag{ color:var(--blue-deep); }
.ed-li-txt{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* 우: 문항 설정 */
.ed-set-head{ font-size:12px; font-weight:700; color:var(--text-primary); margin-bottom:8px; }
.ed-set-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--border); font-size:12px; }
.ed-set-row .k{ color:var(--text-secondary); flex:none; }
.ed-set-row .v{ color:var(--text-primary); font-weight:600; display:flex; align-items:center; gap:6px; text-align:right; }
.ed-toggle{ width:28px; height:16px; border-radius:9px; background:var(--blue-deep); position:relative; flex:none; }   /* ON = 브랜드 블루 #0050FF */
.ed-toggle::after{ content:''; position:absolute; top:2px; right:2px; width:12px; height:12px; border-radius:50%; background:#fff; }
.ed-toggle.off{ background:var(--border-strong); }
.ed-toggle.off::after{ left:2px; right:auto; }
.ed-logic-chip{ font-size:11px; color:var(--text-secondary); background:var(--bg-hover); border-radius:6px; padding:3px 8px; line-height:1.4; text-align:right; }
/* 설정 패널 — 유형별 구조 (응답 설정 / 문항 설정) */
.ed-set-sec{ display:flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:var(--text-tertiary); letter-spacing:.02em; margin:16px 0 2px; }
.ed-set-sec:first-of-type{ margin-top:10px; }
.ed-set-sec i{ font-size:14px; }
.ed-info{ font-size:12px; color:var(--text-tertiary); margin-left:3px; vertical-align:-1px; }
.ed-set-btn{ display:inline-flex; align-items:center; justify-content:center; font-size:14px; color:var(--text-tertiary); border:1px solid var(--border-strong); border-radius:6px; padding:4px 7px; cursor:pointer; transition:color var(--t-fast), border-color var(--t-fast); }
.ed-set-btn:hover{ color:var(--text-secondary); border-color:var(--text-tertiary); }
.ed-num{ font-size:11px; font-weight:600; color:var(--text-primary); border:1px solid var(--border-strong); border-radius:6px; padding:3px 8px; background:#fff; }
.ed-set-row.col{ flex-direction:column; align-items:stretch; gap:9px; }
.ed-set-rowtop{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
.ed-set-rowtop .k{ color:var(--text-secondary); }
.ed-set-acts{ display:flex; gap:8px; color:var(--text-tertiary); font-size:13px; }
.ed-set-acts i:first-child{ color:var(--text-secondary); }
.ed-logic-box{ background:var(--bg-hover); border:1px solid var(--border); border-radius:8px; padding:9px 10px; }
.ed-logic-cap{ font-size:10px; font-weight:700; color:var(--text-tertiary); margin-bottom:5px; }
.ed-logic-cond{ font-size:11.5px; color:var(--text-primary); background:#fff; border:1px solid var(--border); border-radius:6px; padding:6px 9px; line-height:1.45; }
.ed-radio-grp{ display:flex; flex-direction:column; gap:7px; }
.ed-radio-opt{ display:flex; align-items:center; gap:8px; font-size:11.5px; color:var(--text-secondary); background:var(--bg-hover); border-radius:7px; padding:7px 10px; }
.ed-radio-opt.on{ color:var(--blue-deep); background:rgba(0,80,255,.10); font-weight:600; }
.ed-radio{ width:13px; height:13px; border-radius:50%; border:1.5px solid var(--border-strong); flex:none; }
.ed-radio-opt.on .ed-radio{ border-color:var(--blue-deep); background:radial-gradient(circle, var(--blue-deep) 0 4px, #fff 4px); }
/* 중앙: 문항 카드 — 전체 설문이 위아래로 이어지는 스택(스크롤 시 스크리닝 문항이 그 안에 있음을 인지) */
.ed-canvas-col{ max-width:620px; margin:0 auto; display:flex; flex-direction:column; gap:12px; }
.ed-canvas-sec{ font-size:11px; font-weight:700; color:var(--text-primary); letter-spacing:.04em; padding:6px 2px 0; }
.ed-canvas-sec:first-child{ padding-top:0; }
.ed-card{ background:#fff; border:1px solid var(--border); border-radius:13px; padding:16px 18px 18px; }
.ed-card.focus{ border-color:var(--border-strong); box-shadow:0 6px 22px rgba(13,13,13,.07); }
.ed-card.compact{ padding:13px 16px; opacity:.72; }
.ed-card.compact:hover{ opacity:1; }
.ed-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.ed-card.compact .ed-card-top{ margin-bottom:8px; }
.ed-qn{ font-size:11px; font-weight:700; color:var(--blue-deep); }   /* 문항 넘버 = 블루 텍스트, 박스 없음 */
.ed-card.compact .ed-qn{ color:var(--blue-deep); }
.ed-qtype{ font-size:11px; color:var(--text-tertiary); padding:3px 0; display:flex; align-items:center; gap:5px; }
.ed-card-tools{ margin-left:auto; display:flex; gap:9px; color:#C8C8C8; font-size:14px; }
.ed-qtitle{ font-size:13px; font-weight:600; color:var(--text-primary); line-height:1.5; margin-bottom:3px; }
.ed-card.compact .ed-qtitle{ font-size:12px; margin-bottom:8px; }
.ed-qhint{ font-size:11px; color:#9A9A9A; margin-bottom:13px; }
.ed-copts{ display:flex; flex-wrap:wrap; gap:6px; }
.ed-copt{ font-size:11.5px; color:var(--text-secondary); background:var(--bg-hover); border-radius:7px; padding:5px 10px; }
.ed-copt-more{ color:var(--text-secondary); background:var(--bg-hover); font-weight:600; }
/* 컴팩트 카드 보기 — 번호 행 리스트 (제품 에디터 레퍼런스) */
.ed-optrows{ display:flex; flex-direction:column; gap:5px; }
.ed-optrow{ display:flex; align-items:center; gap:9px; font-size:12px; color:var(--text-secondary); background:var(--bg-hover); border-radius:8px; padding:8px 11px; }
.ed-optrow-n{ font-size:11px; font-weight:600; color:var(--text-tertiary); flex:none; min-width:11px; }
.ed-optrow.more{ background:transparent; color:var(--text-tertiary); font-weight:600; padding:3px 2px; }
/* 편집 액션 — 보기 추가(타이핑) */
.ed-opt.adding{ border-color:var(--blue-deep); box-shadow:0 0 0 3px rgba(0,80,255,.14); }
.ed-caret{ border-right:1.5px solid var(--text-primary); animation:edBlink 1s steps(1) infinite; padding-right:1px; }
.ed-opt-txt.ed-caret{ flex:0 0 auto; }   /* 타이핑 중엔 글자 폭만큼만 → caret이 글자 바로 뒤에 */
@keyframes edBlink{ 50%{ border-color:transparent; } }
/* 편집 액션 — 척도·문항유형 */
.ed-typebar{ display:inline-flex; gap:3px; background:#EEE; border-radius:8px; padding:3px; margin-bottom:14px; }
.ed-typebtn{ font-size:11.5px; font-weight:600; color:var(--text-secondary); padding:4px 11px; border-radius:6px; }
.ed-typebtn.active{ background:#fff; color:var(--blue-deep); box-shadow:0 1px 2px rgba(0,0,0,.07); }
.ed-scale{ display:flex; flex-direction:column; gap:8px; }
.ed-scale-pt{ display:flex; align-items:center; gap:11px; background:#fff; border:1px solid var(--border); border-radius:9px; padding:9px 12px; font-size:12px; transition:border-color .2s, background .2s; }
.ed-scale-pt.ed-edited-pt{ border-color:var(--blue-deep); background:rgba(0,80,255,.10); }
.ed-scale-dot{ width:20px; height:20px; border-radius:50%; background:var(--bg-hover); color:var(--text-secondary); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.ed-scale-lab{ color:var(--text-primary); }
/* 편집 액션 — 표시로직·파이핑 */
.ed-pipe-rule{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--text-secondary); background:var(--bg-hover); border:1px dashed var(--border-strong); border-radius:9px; padding:9px 12px; opacity:0; transform:translateY(-5px); transition:opacity .35s ease, transform .35s ease; }
.ed-pipe-rule.show{ opacity:1; transform:none; }
.ed-pipe-rule i{ font-size:14px; }
.ed-pipe-badge{ margin-left:auto; font-size:10.5px; font-weight:700; background:var(--text-secondary); color:#fff; border-radius:5px; padding:2px 7px; }
.ed-pipe-rows{ display:flex; flex-direction:column; gap:8px; margin-top:10px; }
.ed-pipe-row{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:9px; padding:9px 11px; font-size:12px; color:var(--text-primary); opacity:0; transform:translateY(7px); transition:opacity .3s ease, transform .3s ease; }
.ed-pipe-row.show{ opacity:1; transform:none; }
.ed-pipe-row .ed-opt-txt{ flex:1; }
.ed-pipe-tag{ margin-left:auto; font-size:10.5px; color:var(--text-secondary); background:var(--bg-hover); border-radius:5px; padding:2px 7px; flex:none; }
.ed-opts{ display:flex; flex-direction:column; }
.ed-opt{ display:flex; align-items:center; gap:10px; background:#fff; border:1px solid var(--border); border-radius:9px; padding:9px 11px; font-size:12px; color:var(--text-primary);
  transition:transform .42s cubic-bezier(.32,.72,0,1), box-shadow .2s ease, border-color .2s ease, background .2s ease; }
.ed-opt + .ed-opt{ margin-top:8px; }
.ed-grip{ color:#C8C8C8; font-size:15px; display:flex; flex:none; cursor:grab; }
.ed-opt-num{ width:20px; height:20px; border-radius:6px; background:var(--bg-hover); color:var(--text-secondary); font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; flex:none; }
.ed-opt-txt{ flex:1; }
.ed-opt-act{ display:flex; gap:9px; color:#D0D0D0; font-size:14px; flex:none; }
.ed-opt.dragging{ box-shadow:0 13px 30px rgba(13,13,13,.18); border-color:var(--border-strong); position:relative; z-index:5; }
.ed-opt.dragging .ed-grip{ color:var(--text-secondary); cursor:grabbing; }
.ed-opt.just-moved{ border-color:var(--blue-deep); background:rgba(0,80,255,.06); }
.ed-opt.just-moved .ed-opt-num{ background:rgba(0,80,255,.2); color:var(--blue-deep); }
.ed-add-opt{ display:flex; align-items:center; gap:6px; margin-top:11px; font-size:12px; color:var(--text-secondary); font-weight:600; padding:7px 4px; }
.ed-quote{ margin-top:15px; border-left:2px solid var(--border-strong); background:var(--bg-hover); border-radius:0 8px 8px 0; padding:8px 11px; font-size:11.5px; color:var(--text-secondary); line-height:1.5; }
/* ════ 교차분석 풀프레임 시나리오 ════ */
.xt-screen{ position:absolute; left:66px; top:12px; right:14px; bottom:14px; z-index:55; background:#fff; border:1px solid var(--border); border-radius:13px; overflow:hidden; display:flex; flex-direction:column; opacity:0; pointer-events:none; transform:translateY(10px) scale(.992); transition:opacity .32s ease, transform .42s cubic-bezier(.32,.72,0,1), left .46s cubic-bezier(.32,.72,0,1); }
.xt-screen.open{ opacity:1; pointer-events:auto; transform:none; }
/* 교차분석 중: 편집 화면과 동일하게 레일(52px)만 남기고 사이드바 접음 — 레일 호버/햄버거 클릭으로 펼침(편집기와 동일 액션) */
.app.xting{ grid-template-columns:52px 0px 1fr 0px; }
.app.xting:has(.rail:hover), .app.xting.rail-open, .app.xting.rail-open:has(.rail:hover){ grid-template-columns:200px 0px 1fr 0px; }
.app.xting:has(.rail:hover) ~ .xt-screen, .app.xting.rail-open ~ .xt-screen{ left:214px; }
.xt-top{ display:flex; align-items:center; gap:14px; height:46px; padding:0 16px; border-bottom:1px solid var(--border); flex:none; }
.xt-top-l{ display:flex; align-items:center; gap:8px; min-width:0; flex:1; }
.xt-logo svg{ width:18px; height:18px; display:block; }
.xt-brand{ font-size:13px; color:#0b1f44; font-weight:500; white-space:nowrap; } .xt-brand b{ font-weight:700; }
.xt-bc{ color:var(--border-strong); } .xt-bc-i{ color:var(--text-tertiary); font-size:14px; }
.xt-bc-back{ color:var(--text-secondary); font-size:16px; display:flex; cursor:pointer; border-radius:6px; padding:3px; margin:-3px; transition:color .15s, background .15s; }
.xt-bc-back:hover{ color:var(--text-primary); background:var(--bg-hover); }   /* 버튼 자체 색만 — 그리드 호버 트리거 없음(깜박임 X) */
.xt-bc-grp{ display:flex; align-items:baseline; gap:7px; min-width:0; flex:1; }
.xt-bc-title{ font-size:14px; font-weight:700; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xt-bc-status{ font-size:12.5px; color:var(--text-tertiary); flex:none; }
.xt-bc-name{ font-size:12.5px; color:var(--text-primary); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:340px; }
.xt-tabs{ display:flex; gap:18px; flex:none; }
.xt-tab{ font-size:13px; color:var(--text-secondary); font-weight:500; padding:13px 0; }
.xt-tab.active{ color:var(--blue); font-weight:700; box-shadow:inset 0 -2px 0 var(--blue); }
.xt-top-r{ flex:none; display:flex; justify-content:flex-end; color:var(--text-tertiary); }
.xt-body{ flex:1; display:grid; grid-template-columns:178px 1fr; min-height:0; }
.xt-side{ border-right:1px solid var(--border); padding:12px 10px; overflow:auto; background:#FAFBFC; }
/* 우측 분석 영역 = 분석 기준(가로 상단 드롭바) + 하단(분석 대상 세로 컬럼 + 표) */
.xt-analysis{ display:grid; grid-template-rows:auto minmax(0,1fr); min-height:0; min-width:0; }
.xt-basis-bar{ display:flex; align-items:center; gap:10px; padding:9px 14px; border-bottom:1px solid var(--border); background:#FAFBFC; flex-wrap:wrap; }
.xt-bar-h{ font-size:11px; font-weight:700; color:var(--text-secondary); flex:none; }
.xt-lower{ display:grid; grid-template-columns:150px minmax(0,1fr); min-height:0; min-width:0; }
/* 분석 대상 세로 드롭존 */
.xt-tg-drop{ display:flex; align-items:center; justify-content:center; gap:5px; border:1px dashed var(--border-strong); border-radius:7px; padding:9px; margin-top:6px; font-size:10.5px; color:var(--text-tertiary); min-height:35px; box-sizing:border-box; }
.xt-tg-drop i{ font-size:15px; color:var(--border-strong); }
.xt-tg-drop.xt-drop-hot{ border-style:solid; border-color:var(--blue); background:var(--bg-active); color:var(--blue); }
.xt-tg-drop.xt-drop-hot i{ color:var(--blue); }
.xt-side-h{ font-size:10.5px; font-weight:600; color:var(--text-tertiary); text-transform:uppercase; letter-spacing:.04em; margin:0 4px 8px; }
.xt-var{ padding:8px 9px; border:1px solid var(--border); border-radius:7px; background:#fff; margin-bottom:4px; min-height:35px; box-sizing:border-box; display:flex; flex-direction:column; justify-content:center; transition:background .12s, border-color .12s; }
.xt-var:hover{ border-color:var(--text-tertiary); }
.xt-var-skel{ pointer-events:none; opacity:.45; border-color:#EEF0F4; }
.xt-var-skel .skel-blk{ background:linear-gradient(100deg,#EDEFF3 30%,#F5F6F9 50%,#EDEFF3 70%); background-size:200% 100%; }
/* 드래그 가능 카드 + 드롭존 */
.xt-drag{ cursor:grab; } .xt-drag:active{ cursor:grabbing; }
.xt-dragging{ opacity:.4; }
.xt-basis-card.add.xt-drop-hot{ border-style:solid; border-color:var(--blue); background:var(--bg-active); }
.xt-basis-card.add.xt-drop-hot i{ color:var(--blue); }
.xt-basis-x{ margin-left:auto; cursor:pointer; font-size:11px; color:var(--text-tertiary); }
.xt-basis-x:hover{ color:var(--text-secondary); }
.xt-var-k{ font-size:9.5px; color:var(--text-tertiary); }
.xt-var-n{ font-size:11.5px; color:var(--text-primary); font-weight:400; line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xt-mid{ border-right:1px solid var(--border); padding:12px 10px; overflow:auto; background:#FAFBFC; }
.xt-mid-h{ font-size:11px; font-weight:700; color:var(--text-secondary); margin:0 2px 8px; }
.xt-basis{ display:flex; flex-direction:row; flex-wrap:wrap; align-items:center; gap:6px; }
.xt-basis-card{ border:1px dashed var(--border-strong); border-radius:7px; padding:8px 9px; font-size:10.5px; color:var(--text-tertiary); text-align:center; line-height:1.4; min-height:35px; box-sizing:border-box; display:flex; align-items:center; justify-content:center; }
.xt-basis-card.on{ border:1px solid var(--blue); background:var(--bg-active); color:var(--blue); gap:6px; justify-content:flex-start; font-weight:600; font-size:11.5px; padding:8px 11px; }
.xt-basis-card.add{ justify-content:center; padding:8px 9px; }
.xt-basis-card.add i{ font-size:18px; color:var(--border-strong); }
.xt-targets{ display:flex; flex-direction:column; gap:4px; }
.xt-tg{ display:flex; align-items:center; gap:6px; padding:8px 8px; border:1px solid var(--border); border-radius:7px; background:#fff; font-size:11.5px; color:var(--text-primary); line-height:1.4; min-height:35px; box-sizing:border-box; }
.xt-tg-t{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.xt-tg-i{ color:var(--text-tertiary); font-size:12px; flex:none; } .xt-tg-x{ margin-left:auto; color:var(--border-strong); font-size:11px; }
.xt-tg.on{ border-color:var(--blue); background:var(--bg-active); color:var(--blue); font-weight:600; }
.xt-tg-more{ font-size:10.5px; color:var(--text-tertiary); padding:5px 8px 2px; }
.xt-mid-hint{ font-weight:600; color:var(--text-tertiary); font-size:9px; border:1px solid var(--border-strong); border-radius:4px; padding:1px 5px; margin-left:5px; letter-spacing:.02em; }
.xt-basis-code{ font-weight:700; }
.xt-basis-sub{ margin-left:auto; color:var(--text-tertiary); font-weight:500; font-size:10px; }
.xt-main{ display:flex; flex-direction:column; min-height:0; min-width:0; position:relative; }
.xt-toolbar{ display:flex; align-items:center; gap:8px; padding:10px 16px; border-bottom:1px solid var(--border); flex:none; }
.xt-tg-btn{ font-size:11.5px; font-weight:600; color:var(--text-secondary); padding:5px 11px; border:1px solid var(--border); border-radius:7px; }
.xt-tg-btn.on{ background:var(--text-primary); color:#fff; border-color:var(--text-primary); }
.xt-tg-btn.ghost{ border:none; color:var(--text-tertiary); }
.xt-cmp{ font-size:11px; color:var(--text-tertiary); } .xt-cmp .hi{ color:#C2415C; } .xt-cmp .lo{ color:#3B6FD0; }
.xt-qhead{ padding:12px 16px 6px; flex:none; }
.xt-qn{ font-size:12px; font-weight:700; color:var(--text-primary); }
.xt-qdesc{ font-size:10.5px; color:var(--text-tertiary); line-height:1.5; margin-top:3px; }
.xt-thead{ padding:0 16px 6px; flex:none; }
.xt-th-grp{ font-size:10.5px; color:var(--blue); font-weight:600; }
.xt-table-wrap{ flex:1; overflow:auto; padding:0 16px 76px; }
.xt-table{ width:100%; border-collapse:collapse; font-size:11px; }
.xt-table th{ position:sticky; top:0; background:#F4F6FA; color:var(--text-secondary); font-weight:600; padding:7px 8px; border-bottom:1px solid var(--border); text-align:right; z-index:1; }
.xt-table th.xt-l{ text-align:left; }
.xt-table td{ padding:6px 8px; border-bottom:1px solid #F0F1F4; }
td.xt-l{ text-align:left; color:var(--text-primary); position:relative; white-space:nowrap; max-width:240px; overflow:hidden; text-overflow:ellipsis; }
.xt-ltext{ position:relative; z-index:1; }
.xt-bar{ position:absolute; left:0; top:50%; transform:translateY(-50%); height:62%; background:#E7ECF4; border-radius:3px; z-index:0; }
td.xt-c{ text-align:right; color:var(--text-secondary); font-variant-numeric:tabular-nums; transition:background-color .5s ease, color .5s ease; }   /* 컬러코딩 페이드인 */
td.xt-c.tot{ color:var(--text-primary); font-weight:600; }
td.xt-c.hi{ background:#FCE3E8; color:#C2415C; font-weight:600; }
td.xt-c.lo{ background:#E1ECFD; color:#3B6FD0; font-weight:600; }
.xt-base td{ font-weight:600; color:var(--text-primary); border-bottom:1px solid var(--border); }
.xt-tsum td{ font-weight:600; border-top:1px solid var(--border); }
.xt-aibar{ position:absolute; left:50%; bottom:16px; transform:translateX(-50%); display:flex; align-items:center; gap:8px; background:#fff; border:1px solid var(--blue); box-shadow:0 6px 22px rgba(20,40,90,.14); border-radius:22px; padding:10px 18px; font-size:12.5px; color:var(--text-primary); font-weight:500; cursor:pointer; white-space:nowrap; transition:background .15s; }
.xt-aibar.pressing{ background:var(--bg-active) !important; border-radius:22px !important; }   /* 전역 .pressing 반투명(rgba0,0,0,.06) 덮어써 뒤 표 비침 방지 */
.xt-aibar > i.ph{ line-height:1; display:flex; align-items:center; }   /* 캐럿도 세로 중앙 */
.xt-ai-ico{ display:inline-flex; align-items:center; flex:none; }
.xt-ai-ico .ai-hex, .xt-ai-ico svg{ width:16px; height:16px; display:block; }
/* 교차분석 → 챗 전환: 분석 화면 제자리 페이드아웃(위로 슬라이드 시 마블 배경 위를 지나가 비침 → 제자리 크로스페이드) */
.xt-screen.xt-morph-up{ opacity:0; transform:scale(.985); }
/* 챗 인라인 데이터 카드(파일 형태 + 표 미리보기) */
.xt-inline-card{ border:1px solid var(--border); border-radius:13px; overflow:hidden; margin:2px 0 8px; background:#fff; box-shadow:0 1px 3px rgba(20,40,90,.05); }
.xt-ic-head{ display:flex; align-items:center; gap:11px; padding:12px 14px; border-bottom:1px solid var(--border); background:#FBFCFE; }
.xt-ic-head .os-ic, .xt-ic-head .ftype-ic{ width:30px; height:30px; flex:none; }
.xt-ic-name{ font-size:13.5px; font-weight:600; letter-spacing:-0.3px; color:var(--text-primary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.xt-ic-sub{ font-size:11.5px; color:var(--text-tertiary); margin-top:2px; letter-spacing:-0.2px; }
.xt-ic-badge{ margin-left:auto; font-size:11px; font-weight:600; color:var(--blue); background:var(--blue-soft,#EAF1FF); border-radius:6px; padding:3px 8px; white-space:nowrap; }
.xt-ic-body{ max-height:248px; overflow:auto; padding:8px 12px 12px; }
.xt-ic-body .xt-qhead{ margin:4px 0 8px; }
.xt-ic-body .xt-table{ font-size:11.5px; }
/* AI 답변 (풀스크린 챗) */
.xt-ans.ai-prose > p.xt-ans-h{ font-size:15px; font-weight:700; color:var(--text-primary); margin:18px 0 8px; }
.xt-ans.ai-prose > p.xt-ans-h:first-child{ margin-top:2px; }
.xt-ans .md-ul{ margin:0 0 4px; padding-left:18px; }
.xt-ans .md-ul > li{ font-size:14px; color:var(--text-primary); line-height:1.7; margin-bottom:10px; }
.xt-ans .md-ul > li > strong{ color:var(--text-primary); font-weight:700; }
.xt-ans-sub{ display:block; font-size:13.5px; color:var(--text-secondary); line-height:1.65; margin-top:5px; }
.xt-ans-sub strong{ color:var(--text-primary); font-weight:600; }
.xt-cite{ display:inline-block; font-size:10px; color:var(--text-tertiary); background:var(--bg-hover); border-radius:5px; padding:1px 6px; margin-left:3px; vertical-align:middle; }
.xt-ans.ai-prose > p.xt-ans-note{ font-size:11.5px; color:var(--text-tertiary); line-height:1.6; background:#F7F8FA; border-radius:9px; padding:11px 13px; margin-top:16px; }