/* canvas.css — Linear/Canvas UI 도그마 4축 공통 스타일 (2026-04-28)
 * 메모리 project_linear_canvas_ui_doctrine_0428.md
 * A. Command Palette (⌘K)
 * B. Progressive Detail (Slide-over)
 * C. Card View (toggle)
 * D. Action Agent TopBar
 */

:root {
  --canvas-pink: #C8507A;
  --canvas-pink-soft: #FFE7F1;
  --canvas-pink-deep: #A23A60;
  /* 4색 시그니처 — 핑크·라벤더·노랑·베이지 */
  --canvas-grad-cta: linear-gradient(135deg, #FF6B8B 0%, #DDA0DD 33%, #EDD080 66%, #DABA65 100%);
  --canvas-grad-accent: linear-gradient(135deg, #FF6B8B 0%, #DDA0DD 33%, #EDD080 66%, #DABA65 100%);
  --canvas-grad-h: linear-gradient(90deg, #FF6B8B 0%, #DDA0DD 33%, #EDD080 66%, #DABA65 100%);
  --canvas-grad-soft: linear-gradient(135deg, rgba(255,107,139,.08) 0%, rgba(221,160,221,.06) 33%, rgba(237,208,128,.05) 66%, rgba(218,186,101,.04) 100%);
  --canvas-bg: #ffffff;
  --canvas-bg-alt: #f5f5f7;
  --canvas-text: #111111;
  --canvas-text-soft: #555;
  --canvas-text-muted: #888;
  --canvas-border: rgba(0, 0, 0, 0.08);
  --canvas-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.08);
  --canvas-shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.18);
  --canvas-radius: 8px;
  --canvas-radius-lg: 12px;
}

/* ============================================================
 * D. Action Agent TopBar (자동화 제안)
 * ============================================================ */
.action-agent {
  position: sticky;
  top: 52px;
  z-index: 40;
  margin: 0;
  background: var(--canvas-grad-soft);
  border-bottom: 1.5px solid transparent;
  border-image: var(--canvas-grad-h) 1;
  padding: 10px 16px;
  font-size: 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  box-sizing: border-box;
  width: 100%;
  overflow: hidden;
}
.action-agent__icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--canvas-grad-accent);
  display: inline-grid;
  place-items: center;
  flex-shrink: 0;
}
.action-agent__icon img {
  width: 22px;
  height: 22px;
  object-fit: contain;
}
.action-agent__text {
  flex: 1;
  min-width: 0;
  color: var(--canvas-text);
  line-height: 1.4;
}
.action-agent__text strong { color: var(--canvas-pink-deep); font-weight: 700; }
.action-agent__cta {
  background: var(--canvas-grad-cta);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 980px;
  font-weight: 600;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  flex-shrink: 0;
}
.action-agent__cta:hover { opacity: 0.95; }
.action-agent__dismiss {
  background: transparent;
  border: none;
  color: var(--canvas-text-muted);
  cursor: pointer;
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1;
}

/* ============================================================
 * A. Command Palette (⌘K)
 * ============================================================ */
.cmdk-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: var(--canvas-bg-alt);
  border: 1px solid var(--canvas-border);
  border-radius: 8px;
  font-size: 13px;
  color: var(--canvas-text-soft);
  cursor: pointer;
  font-family: inherit;
}
.cmdk-trigger:hover { background: #ececef; }
.cmdk-trigger kbd {
  font-family: ui-monospace, SFMono-Regular, monospace;
  background: #fff;
  border: 1px solid var(--canvas-border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 11px;
  color: var(--canvas-text-soft);
}

.cmdk-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(0, 0, 0, 0.45);
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding-top: 12vh;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.cmdk-overlay[data-open="true"] { display: flex; }

.cmdk-panel {
  width: 92%;
  max-width: 640px;
  background: var(--canvas-bg);
  border-radius: 14px;
  box-shadow: var(--canvas-shadow-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-height: 70vh;
}
.cmdk-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--canvas-border);
}
.cmdk-search__icon {
  color: var(--canvas-text-muted);
  font-size: 18px;
  line-height: 1;
}
.cmdk-search__input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 16px;
  font-family: inherit;
  background: transparent;
  color: var(--canvas-text);
}
.cmdk-search__hint {
  font-size: 11px;
  color: var(--canvas-text-muted);
  font-family: ui-monospace, SFMono-Regular, monospace;
}
.cmdk-list {
  overflow-y: auto;
  padding: 6px 0 10px;
}
.cmdk-section {
  padding: 8px 16px 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--canvas-text-muted);
  letter-spacing: 0.5px;
}
.cmdk-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  cursor: pointer;
  font-size: 15px;
  color: var(--canvas-text);
  border-left: 3px solid transparent;
}
.cmdk-item[data-active="true"] {
  background: var(--canvas-pink-soft);
  border-left-color: var(--canvas-pink);
}
.cmdk-item__icon {
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background: var(--canvas-bg-alt);
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  color: var(--canvas-pink-deep);
  flex-shrink: 0;
}
.cmdk-item__text { flex: 1; min-width: 0; }
.cmdk-item__title { font-weight: 500; }
.cmdk-item__sub { font-size: 12px; color: var(--canvas-text-muted); margin-top: 2px; }
.cmdk-item__shortcut {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
  color: var(--canvas-text-muted);
}
.cmdk-empty {
  padding: 28px 16px;
  text-align: center;
  color: var(--canvas-text-muted);
  font-size: 14px;
}

/* ============================================================
 * B. Progressive Detail (Slide-over)
 * ============================================================ */
.slide-over {
  position: fixed;
  inset: 0;
  z-index: 150;
  display: none;
}
.slide-over[data-open="true"] { display: block; }
.slide-over__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.40);
}
.slide-over__panel {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(560px, 92vw);
  background: var(--canvas-bg);
  box-shadow: var(--canvas-shadow-lg);
  display: flex;
  flex-direction: column;
  animation: slide-in-right 0.18s ease-out;
}
@keyframes slide-in-right {
  from { transform: translateX(100%); }
  to { transform: translateX(0); }
}
.slide-over__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--canvas-border);
  flex-shrink: 0;
}
.slide-over__title {
  font-size: 17px;
  font-weight: 700;
  margin: 0;
}
.slide-over__close {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 24px;
  line-height: 1;
  color: var(--canvas-text-muted);
  padding: 4px 8px;
}
.slide-over__body {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
}
.slide-over__foot {
  display: flex;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--canvas-border);
  flex-shrink: 0;
}
.slide-over__foot .btn { flex: 1; }

@media (max-width: 768px) {
  .slide-over__panel {
    width: 100vw;
    animation: slide-in-up 0.18s ease-out;
  }
  @keyframes slide-in-up {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
  }
}

/* ============================================================
 * C. View Toggle (List / Card / Board)
 * ============================================================ */
.view-toggle {
  display: inline-flex;
  align-items: center;
  background: var(--canvas-bg-alt);
  border-radius: 980px;
  padding: 3px;
  gap: 2px;
}
.view-toggle__btn {
  background: transparent;
  border: none;
  padding: 6px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--canvas-text-soft);
  border-radius: 980px;
  cursor: pointer;
  font-family: inherit;
}
.view-toggle__btn[data-active="true"] {
  background: var(--canvas-bg);
  color: var(--canvas-pink-deep);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* View pane visibility (data-pane-hidden 토글) */
[data-pane-hidden="true"] { display: none !important; }

/* sprint3.css .modal/.sheet — [hidden] 우선 적용 (display:grid 오버라이드 버그 픽스) */
.modal[hidden], .sheet[hidden], .slide-over[hidden] { display: none !important; }

/* Hero with view-toggle (orders·cs-inbox) */
.hero--with-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.hero--with-toggle > div { min-width: 0; flex: 1 1 auto; }
@media (max-width: 768px) {
  .hero--with-toggle {
    align-items: flex-start;
  }
  .hero--with-toggle > div { flex: 1 1 100%; }
  .hero--with-toggle .view-toggle { margin-top: 4px; flex: 0 0 auto; }
}

/* ============================================================
 * Card View — Kanban (orders) / Card stack (cs/tasks)
 * ============================================================ */
.kanban-board {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr));
  gap: 12px;
  margin-top: 16px;
  max-width: 100%;
}
body.page-orders, body.page-cs, body.page-tasks { overflow-x: hidden; }
.kanban-col {
  background: var(--canvas-bg-alt);
  border-radius: var(--canvas-radius-lg);
  padding: 12px;
  min-height: 200px;
  min-width: 0;
}
.kanban-col__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
  padding: 0 4px;
}
.kanban-col__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--canvas-text);
}
.kanban-col__count {
  font-size: 12px;
  font-weight: 600;
  color: var(--canvas-text-muted);
  background: var(--canvas-bg);
  padding: 1px 8px;
  border-radius: 980px;
}
.kanban-col__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.kanban-card {
  background: var(--canvas-bg);
  border: 1px solid var(--canvas-border);
  border-radius: var(--canvas-radius);
  padding: 10px 12px;
  font-size: 14px;
  cursor: pointer;
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.kanban-card:hover {
  transform: translateY(-1px);
  box-shadow: var(--canvas-shadow-md);
}
.kanban-card__title { font-weight: 600; margin: 0 0 4px; line-height: 1.3; }
.kanban-card__meta { font-size: 12px; color: var(--canvas-text-muted); margin: 0; }

/* CS card priority */
.cs-priority-section { margin-bottom: 18px; }
.cs-priority-section__head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 0 4px;
}
.cs-priority-section__title {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.cs-priority-section--urgent .cs-priority-section__title { color: #B91C1C; }
.cs-priority-section--vip .cs-priority-section__title { color: var(--canvas-pink-deep); }
.cs-priority-section--normal .cs-priority-section__title { color: var(--canvas-text-soft); }

.cs-card-list { display: flex; flex-direction: column; gap: 8px; }

/* Quick-reply template chips inside slide-over */
.quick-reply-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px 0 10px;
}
.quick-reply-chip {
  background: var(--canvas-bg-alt);
  border: 1px solid var(--canvas-border);
  border-radius: 980px;
  padding: 6px 12px;
  font-size: 12px;
  cursor: pointer;
  color: var(--canvas-text);
  font-family: inherit;
}
.quick-reply-chip:hover {
  background: var(--canvas-pink-soft);
  border-color: var(--canvas-pink);
  color: var(--canvas-pink-deep);
}
.quick-reply-hint {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--canvas-text-muted);
}

/* CS-inbox 명시 카피 (AI 답변 X 정직 표기) */
.cs-truth-banner {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--canvas-bg-alt);
  border-left: 3px solid var(--canvas-pink);
  border-radius: 6px;
  font-size: 13px;
  color: var(--canvas-text-soft);
}
.cs-truth-banner strong { color: var(--canvas-pink-deep); }

/* ============================================================
 * Sidebar Tree (slide-over: 카테고리 트리)
 * ============================================================ */
.tree-list { list-style: none; padding: 0; margin: 0; }
.tree-list__item {
  display: block;
  padding: 10px 12px;
  border-radius: var(--canvas-radius);
  cursor: pointer;
  font-size: 14px;
}
.tree-list__item:hover { background: var(--canvas-pink-soft); }
.tree-list__item--depth-2 { padding-left: 28px; font-size: 13px; color: var(--canvas-text-soft); }
.tree-list__item--depth-3 { padding-left: 44px; font-size: 13px; color: var(--canvas-text-muted); }

/* ============================================================
 * Confidence + change UX (번개장터 패턴)
 * ============================================================ */
.confidence-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--canvas-text-muted);
  margin-top: 4px;
}
.confidence-row__stars { color: #F59E0B; letter-spacing: 1px; }
.confidence-row__pct { font-variant-numeric: tabular-nums; font-weight: 600; }
.confidence-row__change {
  background: transparent;
  border: 1px solid var(--canvas-border);
  border-radius: 980px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  color: var(--canvas-pink-deep);
  font-family: inherit;
}
.confidence-row__change:hover {
  background: var(--canvas-pink-soft);
  border-color: var(--canvas-pink);
}

/* ============================================================
 * 모바일 768px 이하 보정
 * ============================================================ */
@media (max-width: 768px) {
  .action-agent {
    top: 52px;
    padding: 10px 14px;
    font-size: 13px;
    gap: 8px;
  }
  .action-agent__text {
    flex: 1 1 100%;
    order: 2;
    min-width: 0;
    font-size: 13px;
  }
  .action-agent__icon { order: 1; }
  .action-agent__cta {
    order: 3;
    padding: 7px 12px;
    font-size: 12px;
    flex: 1;
  }
  .action-agent__dismiss { order: 4; }
  /* 모바일: cmdk 버튼 숨김 (⌘K 단축키만) */
  .cmdk-trigger { display: none; }
  .cmdk-panel { max-height: 80vh; padding-top: 0; }
  .kanban-board { grid-template-columns: 1fr; }
  /* view-toggle 모바일에서 텍스트 축소 */
  .view-toggle__btn { padding: 6px 10px; font-size: 12px; }
  /* 페이지 hero(타이틀+토글) 모바일 정렬 */
  .page-orders .hero--compact,
  .page-cs .hero--compact {
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  .page-orders .view-toggle,
  .page-cs .view-toggle { margin-top: 8px; flex-shrink: 0; }
  /* 모바일에서 page-main 안쪽 wrapper 가 viewport 안에 머물도록 */
  body.page-orders .page-main,
  body.page-cs .page-main,
  body.page-tasks .page-main {
    max-width: 100vw;
    box-sizing: border-box;
    overflow-x: hidden;
  }
}

/* ============================================================
 * 다크모드 보정 (body.dark-mode)
 * ============================================================ */
body.dark-mode {
  --canvas-bg: #1a1a1c;
  --canvas-bg-alt: #272729;
  --canvas-text: #f5f5f7;
  --canvas-text-soft: #a8a8ad;
  --canvas-text-muted: #6e6e73;
  --canvas-border: rgba(255, 255, 255, 0.1);
  background: #000;
  color: var(--canvas-text);
}
body.dark-mode .cmdk-search__input { color: #f5f5f7; }
body.dark-mode .kanban-card { background: #272729; }
body.dark-mode .cs-truth-banner { background: #1a1a1c; }

/* 서브페이지 다크모드 컨테이너 톤 (qa-hotfix BUG-02) */
body.dark-mode .topbar,
body.dark-mode .wizard-header,
body.dark-mode .rp-header,
body.dark-mode .panel,
body.dark-mode .canvas-card,
body.dark-mode .wizard-card,
body.dark-mode .rp-card,
body.dark-mode .kanban-col,
body.dark-mode .mig-dropzone,
body.dark-mode .mig-preview-card,
body.dark-mode .mig-stat,
body.dark-mode .modal__content,
body.dark-mode .sheet__content,
body.dark-mode .slide-over__panel {
  background: var(--canvas-bg-alt);
  color: var(--canvas-text);
  border-color: var(--canvas-border);
}
body.dark-mode .mig-mapping-table th { background: #1a1a1c; color: var(--canvas-text); }
body.dark-mode .mig-mapping-table td { color: var(--canvas-text); border-color: var(--canvas-border); }
body.dark-mode .mig-mapping-select { background: var(--canvas-bg-alt); color: var(--canvas-text); border-color: var(--canvas-border); }
body.dark-mode .topbar__nav a { color: var(--canvas-text-soft); }
body.dark-mode .topbar__nav a.active { color: var(--canvas-text); }

/* 다크모드 토글 FAB (qa-hotfix BUG-02 — 5개 서브페이지 공용) */
.theme-fab {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 1px solid var(--canvas-border);
  background: var(--canvas-bg-alt);
  color: var(--canvas-text);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.18);
  transition: transform .12s ease;
  font-family: inherit;
}
.theme-fab:hover { transform: scale(1.05); }
.theme-fab svg { width: 22px; height: 22px; }