/* ═══════════════════════════════════════════════════════════════════════════
   ═══ ★ NEW : 콘텐츠 영역 = 캔버스 + 템플릿 카드 배치 ★ ═══
   ═══════════════════════════════════════════════════════════════════════════ */

/* Content area (캔버스 컨테이너) */
.content{flex:1;overflow:auto;display:flex;flex-direction:column;}

/* Canvas toolbar (캔버스 상단 액션 바) */
.cv-toolbar{display:flex;align-items:center;justify-content:space-between;
  padding:.75rem 1.25rem;background:var(--glass);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--glass-border);flex-shrink:0;}
.cv-toolbar-l{display:flex;align-items:center;gap:.75rem;}
.cv-title{font-size:.95rem;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.cv-meta{font-size:.6rem;color:var(--text-muted);padding:.2rem .55rem;border-radius:999px;
  background:var(--surface);border:1px solid var(--glass-border);}
.cv-toolbar-r{display:flex;align-items:center;gap:.5rem;}
.cv-btn{display:flex;align-items:center;gap:.4rem;padding:.42rem .8rem;border-radius:10px;
  border:1px solid var(--glass-border);background:var(--surface);color:var(--text-sec);
  font-size:.68rem;font-weight:600;cursor:pointer;font-family:inherit;transition:all .2s;}
.cv-btn:hover{border-color:var(--primary);color:var(--primary);box-shadow:var(--glow-sm);}
.cv-btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:white;border-color:transparent;box-shadow:var(--glow-sm);}
.cv-btn.primary:hover{transform:translateY(-1px);box-shadow:var(--glow-md);}
.cv-btn svg{width:13px;height:13px;}

/* Canvas (실제 자유배치 영역) */
/* ★ padding 0 — 카드 left/top 이 캔버스 좌상단 (0,0) 기준이라 clamp 로직 단순 */
.canvas{flex:1;position:relative;padding:0;min-height:600px;overflow:hidden;
  background-image:radial-gradient(circle at 0.5px 0.5px,var(--glass-border) 0.5px,transparent 0);
  background-size:20px 20px;}

/* Template card (캔버스 위의 한 덩이) */
.tpl-card{position:absolute;background:var(--glass-strong);
  backdrop-filter:blur(20px) saturate(1.4);-webkit-backdrop-filter:blur(20px) saturate(1.4);
  border:1px solid var(--glass-border);border-radius:16px;
  box-shadow:0 8px 32px rgba(0,0,0,0.06),var(--glow-sm);
  display:flex;flex-direction:column;overflow:hidden;
  transition:box-shadow .25s,border-color .25s,transform .25s;}
.dark .tpl-card{box-shadow:0 8px 32px rgba(0,0,0,0.4),var(--glow-sm);}
.tpl-card:hover{border-color:rgba(108,92,231,.25);box-shadow:0 12px 40px rgba(0,0,0,0.08),var(--glow-md);}
.dark .tpl-card:hover{border-color:rgba(162,155,254,.3);box-shadow:0 12px 40px rgba(0,0,0,0.5),var(--glow-md);}

/* Template card header */
.tpl-head{display:flex;align-items:center;justify-content:space-between;padding:.65rem .9rem;
  border-bottom:1px solid var(--border-subtle);flex-shrink:0;background:var(--glass);}
.tpl-head-l{display:flex;align-items:center;gap:.55rem;}
.tpl-head-icon{width:24px;height:24px;border-radius:7px;display:flex;align-items:center;justify-content:center;
  font-size:.85rem;background:linear-gradient(135deg,rgba(108,92,231,.15),rgba(0,206,201,.1));
  border:1px solid rgba(108,92,231,.18);}
.tpl-head-title{font-size:.78rem;font-weight:700;color:var(--text);letter-spacing:-.01em;}
.tpl-head-bdg{font-size:.5rem;font-weight:700;color:var(--primary);padding:.1rem .4rem;
  border-radius:999px;background:rgba(108,92,231,.08);border:1px solid rgba(108,92,231,.18);
  text-transform:uppercase;letter-spacing:.05em;}
.tpl-head-r{display:flex;align-items:center;gap:.3rem;}
.tpl-head-btn{width:22px;height:22px;border-radius:6px;border:none;background:transparent;
  color:var(--text-muted);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s;}
.tpl-head-btn:hover{background:var(--surface-hover);color:var(--primary);}
.tpl-head-btn.danger:hover{background:rgba(255,71,87,.12);color:var(--red);}

/* Template card body */
.tpl-body{flex:1;overflow:auto;padding:.85rem;}

/* Empty slot (캔버스의 빈 자리 — 다음 카드 추가 안내) */
.tpl-empty{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px dashed var(--glass-border);border-radius:16px;color:var(--text-muted);
  background:rgba(108,92,231,.02);transition:all .25s;cursor:pointer;}
.tpl-empty:hover{border-color:var(--primary);color:var(--primary);background:rgba(108,92,231,.05);}
.tpl-empty .empty-icon{font-size:1.8rem;opacity:.4;margin-bottom:.5rem;}
.tpl-empty .empty-text{font-size:.7rem;font-weight:600;}
.tpl-empty .empty-sub{font-size:.55rem;color:var(--text-muted);margin-top:.2rem;}

/* ═══════════════════════════════════════════════════════════════════════════
   ═══ ★ EDIT MODE / DRAG / RESIZE / TOAST ★ ═══
   ═══════════════════════════════════════════════════════════════════════════ */

/* 편집 모드: 캔버스 격자 강조, 빈 자리 표시 */
.canvas.edit-mode{
  background-image:radial-gradient(circle at 0.5px 0.5px,rgba(108,92,231,.25) 0.5px,transparent 0);
  outline:1px dashed rgba(108,92,231,.18);outline-offset:-8px;}
.dark .canvas.edit-mode{background-image:radial-gradient(circle at 0.5px 0.5px,rgba(162,155,254,.3) 0.5px,transparent 0);}
.canvas.edit-mode .tpl-card{cursor:move;border-style:solid;border-color:rgba(108,92,231,.3);}
.canvas.edit-mode .tpl-card:hover{border-color:var(--primary);}
.canvas.edit-mode .tpl-card .tpl-head{background:linear-gradient(135deg,rgba(108,92,231,.08),rgba(0,206,201,.04));}

/* 보기 모드에서는 빈 자리(empty slot) 숨김 — 추가 자리는 편집 모드에서만 보임 */
.canvas:not(.edit-mode) .tpl-empty{display:none;}

/* 드래그 중 카드 강조 */
.tpl-card.dragging{box-shadow:0 24px 60px rgba(108,92,231,.35),var(--glow-lg);
  border-color:var(--primary);transform:rotate(.3deg);transition:none;z-index:50;}
.tpl-card.resizing{box-shadow:0 24px 60px rgba(0,206,201,.3),var(--glow-lg);
  border-color:var(--cyan);transition:none;z-index:50;}

/* 리사이즈 핸들 (우하단 모서리) — 편집 모드에서만 보임 */
.tpl-card .resize-handle{position:absolute;right:0;bottom:0;width:18px;height:18px;
  cursor:nwse-resize;display:none;align-items:center;justify-content:center;
  color:var(--text-muted);opacity:.6;transition:opacity .2s,color .2s;}
.tpl-card .resize-handle:hover{opacity:1;color:var(--primary);}
.canvas.edit-mode .tpl-card .resize-handle{display:flex;}
.tpl-card .resize-handle::before{content:'';position:absolute;right:3px;bottom:3px;
  width:10px;height:10px;
  background:linear-gradient(135deg,transparent 50%,currentColor 50%,currentColor 60%,transparent 60%,transparent 70%,currentColor 70%,currentColor 80%,transparent 80%);}

/* ── 카드 접기 = 미니 뷰 (★ 본문 숨김 X — 축소된 핵심 데이터만 표시) ── */
.tpl-card .tpl-mini-body{display:none;}
.tpl-card.collapsed .tpl-body{display:none;}
.tpl-card.collapsed .tpl-mini-body{display:flex;flex-direction:column;flex:1;
  overflow:hidden;padding:.65rem .8rem;gap:.5rem;}

/* 미니 본문 내부 — 카드 사이즈에 자동 적응 (auto-fit grid) */
.tpl-mini-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));
  gap:.45rem;flex:1;align-content:start;}
.tpl-mini-stat{padding:.55rem .65rem;border-radius:9px;background:var(--glass);
  border:1px solid var(--glass-border);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:center;min-height:54px;
  transition:all .2s;}
.tpl-mini-stat:hover{border-color:rgba(108,92,231,.25);}
.tpl-mini-stat .ms-label{font-size:.5rem;font-weight:600;color:var(--text-muted);
  text-transform:uppercase;letter-spacing:.06em;}
.tpl-mini-stat .ms-value{font-size:1.15rem;font-weight:800;color:var(--text);
  margin-top:.15rem;letter-spacing:-.02em;line-height:1;}
.tpl-mini-stat .ms-delta{font-size:.5rem;font-weight:700;margin-top:.15rem;color:var(--green);}
.tpl-mini-stat .ms-delta.down{color:var(--red);}
.tpl-mini-stat.success{border-color:rgba(0,184,148,.2);}
.tpl-mini-stat.success .ms-value{color:var(--green);}
.tpl-mini-stat.warn{border-color:rgba(253,203,110,.25);}
.tpl-mini-stat.warn .ms-value{color:var(--amber);}
.dark .tpl-mini-stat.warn .ms-value{color:var(--amber);}
.tpl-mini-stat.danger{border-color:rgba(255,71,87,.22);}
.tpl-mini-stat.danger .ms-value{color:var(--red);}

/* 미니 본문 하단의 요약 라인 */
.tpl-mini-foot{display:flex;align-items:center;justify-content:space-between;
  padding-top:.45rem;border-top:1px solid var(--border-subtle);
  font-size:.55rem;color:var(--text-muted);flex-shrink:0;}
.tpl-mini-foot b{color:var(--text);font-weight:700;}
.tpl-mini-foot .mini-link{color:var(--primary);font-weight:600;cursor:pointer;}
.tpl-mini-foot .mini-link:hover{text-decoration:underline;}

/* 접기 버튼 시각 피드백 (눌렀을 때 회전) */
.tpl-card.collapsed .tpl-head-btn[title*="접기"] svg{transform:rotate(180deg);}
.tpl-head-btn svg{transition:transform .25s;}
.tpl-head-btn.on{background:linear-gradient(135deg,rgba(108,92,231,.15),rgba(108,92,231,.05));
  color:var(--primary);}
.dark .tpl-head-btn.on{background:linear-gradient(135deg,rgba(162,155,254,.15),rgba(162,155,254,.05));}
