@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

:root {
  /* Brand */
  --primary: #7C3AED;
  --primary-light: #EDE9FE;
  --primary-50: #F5F3FF;
  --primary-deep: #5B21B6;

  /* Domains (3분류) */
  --ad: #2563EB;        --ad-light: #DBEAFE;    --ad-deep: #1D4ED8;
  --store: #EA580C;     --store-light: #FFEDD5; --store-deep: #C2410C;
  --offsite: #059669;   --offsite-light: #D1FAE5; --offsite-deep: #047857;
  /* 스토어프론트 하위 — 할인 강조 */
  --promo: #DB2777;     --promo-light: #FCE7F3;
  /* legacy alias (insights/이전 참조 호환) */
  --crm: #059669;       --crm-light: #D1FAE5;

  /* Status */
  --good: #10B981;      --good-light: #D1FAE5;
  --warn: #B45309;      --warn-light: #FEF3C7;
  --danger: #DC2626;    --danger-light: #FEE2E2;

  /* Stone gray scale */
  --gray-50: #FAFAF9;
  --gray-100: #F5F5F4;
  --gray-200: #E7E5E4;
  --gray-300: #D6D3D1;
  --gray-400: #A8A29E;
  --gray-500: #78716C;
  --gray-600: #57534E;
  --gray-700: #44403C;
  --gray-800: #292524;
  --gray-900: #1C1917;

  --shadow-sm: 0 1px 2px rgba(28,25,23,.04), 0 1px 3px rgba(28,25,23,.05);
  --shadow-md: 0 2px 4px rgba(28,25,23,.05), 0 4px 12px rgba(28,25,23,.06);
  --shadow-lg: 0 8px 24px rgba(28,25,23,.08), 0 2px 8px rgba(28,25,23,.05);
  --shadow-primary: 0 6px 20px rgba(124,58,237,.18), 0 1px 3px rgba(124,58,237,.12);

  --radius-chip: 5px;
  --radius-btn: 9px;
  --radius-card: 16px;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  background: var(--gray-100);
  color: var(--gray-900);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

#root { height: 100%; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select, textarea { font-family: inherit; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--primary-light); color: var(--primary-deep); }

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--gray-300); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--gray-400); background-clip: content-box; }
::-webkit-scrollbar-track { background: transparent; }

/* Utility */
.app-shell { display: flex; height: 100%; min-width: 1024px; }
.fade-in { animation: riseIn .42s cubic-bezier(.22,1,.36,1) backwards; }
.slide-up { animation: riseIn .48s cubic-bezier(.22,1,.36,1) backwards; }

@keyframes riseIn { from { transform: translateY(9px); } to { transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes slideUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes breathe {
  0%, 100% { box-shadow: 0 0 0 0 rgba(124,58,237,.28), 0 0 0 1px var(--primary); }
  50% { box-shadow: 0 0 0 7px rgba(124,58,237,0), 0 0 0 1px var(--primary); }
}
@keyframes popIn { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: scale(1); } }

.breathe { animation: breathe 2.4s ease-in-out infinite; }

/* Magic gradient (agent autofill) */
.magic-gradient {
  background: linear-gradient(110deg, #7C3AED, #A855F7 45%, #C084FC 70%, #7C3AED);
  background-size: 220% 100%;
  animation: magicShift 4s linear infinite;
}
@keyframes magicShift { to { background-position: -220% 0; } }

.scroll-area { overflow-y: auto; overflow-x: hidden; }

/* GNB collapse/expand — 라벨 페이드 인/아웃 (폭 변화 중 줄바꿈 방지)
   기본(비애니메이션) 상태 = 보임 — 애니메이션이 멈춰도 텍스트가 사라지지 않도록 from에서만 숨김 */
.gnb-in  { animation: gnbLblIn .26s cubic-bezier(.22,1,.36,1); }
.gnb-out { animation: gnbLblOut .17s ease forwards; }
@keyframes gnbLblIn  { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: none; } }
@keyframes gnbLblOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateX(-6px); } }

/* 캠페인 메모 드로어 — 우측 슬라이드인 */
@keyframes drawerIn { from { transform: translateX(28px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
.drawer-in { animation: drawerIn .26s cubic-bezier(.22,1,.36,1) backwards; }

/* 워크스페이스 — 행/카드 hover 액션 */
.ws-row .ws-row-act { opacity: 0; transition: opacity .12s; }
.ws-row:hover .ws-row-act { opacity: 1; }

/* 뷰 탭 — 삭제 버튼 hover 노출 */
.view-tab-item .view-tab-del { opacity: 0; transition: opacity .12s; }
.view-tab-item:hover .view-tab-del { opacity: 1; }
.ws-card { position: relative; }
.ws-card .ws-card-act { opacity: 0; transition: opacity .12s; }
.ws-card:hover .ws-card-act { opacity: 1; }
.ws-col-drop { box-shadow: inset 3px 0 0 0 var(--primary) !important; }
/* 그룹 헤더 — 라이트한 위계 (리니어식) */
.ws-grouphead .ws-grip, .ws-grouphead .ws-grouphead-add { opacity: 0; transition: opacity .12s; }
.ws-grouphead:hover .ws-grip, .ws-grouphead:hover .ws-grouphead-add { opacity: 1; }
/* 프로젝트명 클릭 → 캔버스 진입 어포던스 (상시 노출 — 진입점임을 분명히) */
.ws-plan-name .ws-plan-go { opacity: .4; transition: opacity .12s, transform .12s; }
.ws-plan-name:hover .ws-plan-go { opacity: 1; transform: translateX(2px); }
.ws-plan-name:hover { text-decoration: none; }
.ws-plan-name:hover .ws-plan-label { text-decoration: underline; text-underline-offset: 3px; text-decoration-color: var(--primary-light); }

/* 액션 가이드 — 하위 액션 행(진입점) hover + 잠금 */
.ag-sub .ag-go { opacity: 0; transform: translateX(-4px); transition: opacity .14s, transform .14s; }
.ag-sub:hover { background: var(--primary-50) !important; border-color: var(--primary-light) !important; }
.ag-sub:hover .ag-go { opacity: 1; transform: translateX(2px); }
.ag-sub:active { transform: scale(.992); }
.ag-sub-soon { opacity: .72; }
.ag-enter { transition: transform .12s, background .18s; }
.ag-enter:hover { background: var(--primary-deep) !important; }
.ag-enter:active { transform: scale(.92); }
.jr-chip:hover { border-color: var(--gray-300) !important; box-shadow: var(--shadow-md) !important; transform: translateY(-1px); }

/* 확장 진입 — 포커스 노드 펄스 */
@keyframes focusPulse {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 50%, transparent); }
  70%  { box-shadow: 0 0 0 12px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
[data-pulse="1"] { animation: focusPulse 1.4s ease-out 2; }

/* 캠페인 캔버스 — 왼쪽 여백 고스트 */
@keyframes ccGhostIn { from { opacity: 0; transform: translateY(-50%) translateX(-8px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }
.cc-ghost { animation: ccGhostIn .18s ease-out; }

/* 우측 가장자리 실험 칩 — hover 시 떠오름 */
.cc-expedge-pill { opacity: 0; transform: translateX(-10px); transition: opacity .16s ease-out, transform .16s ease-out; }
.cc-cardwrap:hover .cc-expedge-pill, .cc-expedge:hover .cc-expedge-pill { opacity: 1; transform: translateX(0); }

/* 변형 카드 — 우측 펼침 딜인 */
@keyframes ccDeal { from { opacity: 0; transform: translateX(-16px) scale(.97); } to { opacity: 1; transform: translateX(0) scale(1); } }
.cc-varcard { animation: ccDeal .26s cubic-bezier(.22,1,.36,1) both; }

/* 프로젝트 노드 아래 실험 덱 */
.cv-deck-card { transition: transform .14s ease-out; }
.cv-deck:hover .cv-deck-card { transform: translateY(2px); }

/* 세팅 노드 느낌 — 옅은 사선 해치 (상시·기본값) */
.setting-hatch {
  background-image: repeating-linear-gradient(45deg,
    var(--gray-100) 0, var(--gray-100) 6px,
    transparent 6px, transparent 12px);
}
@keyframes overridePulse {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.override-flow { stroke-dasharray: 5 5; animation: dash 1s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -20; } }

/* ── 라운지(홈) — 대화 + 스크롤 시트 ── */
@keyframes typingBounce { 0%, 60%, 100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }
.typing-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--primary); animation: typingBounce 1.1s ease-in-out infinite; }
@keyframes caretBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.stream-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 1px; background: var(--primary); vertical-align: text-bottom; animation: caretBlink .9s step-end infinite; }
@keyframes handleFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(4px); } }
.scroll-hint-bob { animation: handleFloat 1.8s ease-in-out infinite; }
.lounge-scroll::-webkit-scrollbar { width: 0; height: 0; }
.msg-rise { animation: msgRise .34s cubic-bezier(.22,1,.36,1) backwards; }
@keyframes msgRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.convo-item:hover { background: rgba(55,53,47,.055) !important; }

/* 인사이트 성장 뷰 — 상품 행 hover 스왑 */
.ws-row .iv-rowact { opacity: 0; pointer-events: none; transition: opacity .12s; }
.ws-row:hover .iv-rowact { opacity: 1; pointer-events: auto; }
.ws-row:hover .iv-rowbadge { opacity: 0; }
.ws-card .ws-card-act { opacity: 0; }
.ws-card:hover .ws-card-act { opacity: 1; }

/* 고객 관리 보드 — 카드 hover 액션 */
.cust-card .cust-card-act { opacity: 0; transform: scale(.85); transition: opacity .13s, transform .13s; }
.cust-card:hover .cust-card-act { opacity: 1; transform: scale(1); }

/* 고객 관리 — 퍼널 레이아웃 (보드 + 오디언스 빌더 레일) */
.cust-funnel { display: grid; grid-template-columns: minmax(0, 1fr) 396px; gap: 22px; align-items: start; }
.cust-board { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 212px; gap: 16px; align-items: start; }
@media (max-width: 1280px) {
  .cust-board { grid-template-columns: repeat(4, minmax(140px, 1fr)) 190px; }
}
@media (max-width: 720px) {
  .cust-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* RFM 뷰 — 매트릭스 + 세그먼트 리스트 */
.rfm-layout { display: grid; grid-template-columns: minmax(0, 460px) minmax(0, 1fr); gap: 18px; align-items: start; }
@media (max-width: 1040px) { .rfm-layout { grid-template-columns: 1fr; } }

/* 오디언스 추가 플레이스홀더 */
.aud-ph { transition: border-color .14s, background .14s; }
.aud-ph:hover { border-color: var(--primary) !important; background: var(--primary-50) !important; }

/* 홈 — 메모 트리 / 블록 / 합치기 레일 */
.memo-node .memo-node-add { opacity: 0; transition: opacity .12s; }
.memo-node:hover .memo-node-add { opacity: 1; }

/* 홈 — 노션식 LNB
   디스클로저 셰브론은 아이콘 위에 겹쳐 호버 시에만 드러난다 (노션 패턴) */
.ntx-chev { opacity: 0; transition: opacity .06s ease; }
.memo-node:hover .ntx-chev { opacity: 1; }
.memo-node:hover .ntx-emoji { opacity: 0; }
.memo-node.is-exp .ntx-chev { opacity: 1; }
.memo-node.is-exp .ntx-emoji { opacity: 0; }
.ntx-emoji { transition: opacity .06s ease; }
.memo-block:hover .memo-handle { opacity: 1 !important; }
.add-rail:hover { background: color-mix(in srgb, var(--primary) 5%, transparent) !important; }
.add-rail:hover .add-rail-chip { opacity: 1 !important; transform: scale(1) !important; }
@keyframes isoIn { from { opacity: 0; transform: scale(.97) translateY(10px); } to { opacity: 1; transform: none; } }
.memo-isolate-in { animation: isoIn .42s cubic-bezier(.22,1,.36,1); }

/* 홈 — 메모 데이터베이스 (표 / 보드 / 갤러리 / 캘린더) */
.db-row { transition: background .1s; }
.db-row:hover { background: var(--gray-50); }
.db-row:hover .db-row-open { opacity: 1 !important; }
.db-card { transition: box-shadow .14s, border-color .14s, transform .1s; }
.db-card:hover { box-shadow: var(--shadow-md) !important; border-color: var(--gray-300) !important; }
.db-card:active { transform: scale(.99); }
.db-new-btn { transition: background .15s; }
.db-new-btn:hover { background: var(--primary-deep) !important; }
.db-head-grid { opacity: 0; transition: opacity .12s; }
.memo-node:hover .db-head-grid { opacity: 1; }
.memo-node:hover .hsec-x { opacity: 1 !important; }

/* ── 라이브러리 — 소재 꾸러미 카드 / 레이어 / 에디터 ── */
.lib-card .lib-card-act { opacity: 0; transition: opacity .14s; }
.lib-card:hover .lib-card-act { opacity: 1; }
.lib-layerrow .lib-layeract { opacity: 0; transition: opacity .12s; }
.lib-layerrow:hover .lib-layeract { opacity: 1; }
.lib-artboard input[type="number"]::-webkit-inner-spin-button { opacity: .3; }
.cc-creative:hover .cc-creative-edit { opacity: 1; }