/* ============================================================
   剪紙模組 — 列印專用樣式
   螢幕模式用 px，列印模式用 mm/pt
   ============================================================ */

/* ----------------------------------------------------------
   螢幕模式
   ---------------------------------------------------------- */

/* Grid 排列剪裁區塊 */
.cutting-grid {
  display: grid;
  grid-template-columns: repeat(var(--cutting-cols, 2), 1fr);
  gap: 20px;
  width: 100%;
  height: 100%;
  padding: 8px 0;
  align-items: center;
  justify-items: center;
}

/* 單一剪裁區 */
.cutting-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 12px;
  width: 100%;
  max-width: 280px;
}

/* 形狀容器（含剪刀定位參考） */
.cutting-shape-wrap {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* SVG 剪裁形狀 */
.cutting-shape {
  width: 100%;
  max-height: 160px;
  overflow: visible;
}

/* 粗實線剪裁路徑 */
.cutting-path {
  fill: none;
  stroke: var(--color-text, #1a1a1a);
  stroke-width: 3.5;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* 內部淡色裝飾文字 */
.cutting-decoration {
  font-size: 24px;
  opacity: 0.25;
  pointer-events: none;
}

/* 剪刀圖示 */
.cutting-scissors-wrap {
  position: absolute;
  top: -18px;
  width: 22px;
  height: 22px;
}

.cutting-scissors {
  width: 100%;
  height: 100%;
  color: var(--color-gray-500, #6b7280);
}

/* 形狀名稱標籤 */
.cutting-shape-name {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
  text-align: center;
}

/* 底部提示文字 */
.cutting-footer-note {
  text-align: center;
  font-size: 13px;
  color: var(--color-text-secondary, #6b7280);
  margin-top: 8px;
}

/* ----------------------------------------------------------
   互動模式 — Canvas 描線 + Demo + 飛散
   ---------------------------------------------------------- */

/* 繪製區域容器 */
.cutting-canvas-wrap {
  flex: 1 1 0;
  min-height: 0;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  touch-action: none;
}

/* 形狀 + Canvas 包裹 */
.cutting-shape-container {
  position: relative;
  width: 80%;
  max-width: 400px;
  aspect-ratio: 1;
}

/* SVG 形狀（居中） */
.cutting-shape-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cutting-shape-path {
  fill: none;
  stroke: var(--color-gray-300);
  stroke-width: 4;
  stroke-dasharray: 12 6;
  stroke-linejoin: round;
  stroke-linecap: round;
}

/* Canvas overlay */
.cutting-draw-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  touch-action: none;
}

/* 提示文字 */
.cutting-hint {
  font-family: var(--font-text);
  font-size: 1.2rem;
  color: var(--color-text-secondary);
  text-align: center;
  padding: var(--space-sm) var(--space-md);
  flex-shrink: 0;
}

/* 底部按鈕列 */
.cutting-bottom {
  flex-shrink: 0;
  padding: var(--space-md);
  padding-bottom: max(var(--space-md), env(safe-area-inset-bottom, 0px));
  display: flex;
  justify-content: center;
  gap: var(--space-md);
}

.cutting-bottom .btn {
  min-width: 120px;
  min-height: var(--touch-target-min);
  font-size: 1.1rem;
}

/* ── ✂️ Demo 剪刀動畫 ── */

.cutting-demo-scissor {
  position: absolute;
  font-size: 32px;
  pointer-events: none;
  z-index: 10;
  transform: translate(-50%, -50%);
  transition: opacity 300ms ease-out;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.15));
}

/* ── 紙片飛散動畫 ── */

.cutting-pieces {
  position: absolute;
  inset: 0;
  display: flex;
  pointer-events: none;
}

.cutting-piece {
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transition: transform 600ms ease-in, opacity 600ms ease-in;
}

/* 觸發飛散 */
.cutting-pieces.scatter .cutting-piece-left {
  transform: translateX(-200px) rotate(-15deg);
  opacity: 0;
}

.cutting-pieces.scatter .cutting-piece-right {
  transform: translateX(200px) rotate(15deg);
  opacity: 0;
}

/* ----------------------------------------------------------
   列印模式
   ---------------------------------------------------------- */
@media print {
  .cutting-grid {
    gap: 4mm;
    padding: 2mm 0;
  }

  .cutting-item {
    padding: 3mm;
    gap: 2mm;
  }

  .cutting-shape {
    max-height: 50mm;
  }

  /* 列印粗實線：適中粗細 */
  .cutting-path {
    stroke: #000;
    stroke-width: 1.2mm;
  }

  .cutting-decoration {
    font-size: 16pt;
    opacity: 0.15;
  }

  .cutting-scissors-wrap {
    top: -5mm;
    width: 6mm;
    height: 6mm;
  }

  .cutting-shape-name {
    font-size: 10pt;
  }

  .cutting-footer-note {
    font-size: 9pt;
    margin-top: 2mm;
  }

  /* 列印時隱藏互動元素 */
  .cutting-canvas-wrap,
  .cutting-draw-canvas,
  .cutting-demo-scissor,
  .cutting-pieces,
  .cutting-hint,
  .cutting-bottom {
    display: none !important;
  }
}

/* ----------------------------------------------------------
   Reduced motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .cutting-demo-scissor {
    transition-duration: 0.01ms !important;
  }

  .cutting-piece {
    transition-duration: 0.01ms !important;
  }
}