/* ============================================================
   工作頁通用版型樣式 — Bento Grid 設計語言
   螢幕模式用 px，列印模式用 mm/pt
   ============================================================ */

/* ----------------------------------------------------------
   螢幕模式（預覽）
   ---------------------------------------------------------- */

/* A4 模擬容器 */
.ws-preview-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 32px 16px;
  min-height: 100dvh;
  background-color: var(--color-surface);
}

/* 工作頁本體：固定 A4 比例 */
.worksheet {
  width: 793px;
  height: 1122px;
  background: var(--color-white);
  border-radius: var(--radius-md);
  border: 1px solid rgba(0, 0, 0, 0.06);
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* --- Header --- */
.ws-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px 16px;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.ws-header-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ws-theme-icon {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  object-fit: cover;
}

.ws-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 700;
  color: var(--color-primary);
  line-height: 1.2;
}

.ws-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ws-theme-name {
  font-family: var(--font-text);
  font-size: 16px;
  color: var(--color-text-secondary);
  font-weight: 500;
}

/* --- Content --- */
.ws-content {
  flex: 1 1 auto;
  padding: 24px 28px;
  overflow: hidden;
}

/* --- Footer --- */
.ws-footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 12px 28px 20px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
  gap: 16px;
}

.ws-page-num {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--color-text-secondary);
  white-space: nowrap;
  margin-left: auto;
}

/* ----------------------------------------------------------
   難度標示元件
   ---------------------------------------------------------- */
.difficulty-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px;
  border-radius: 50px;
  background: var(--badge-bg, rgba(0, 0, 0, 0.05));
}

.difficulty-badge-icon {
  color: var(--badge-color);
  font-size: 10px;
  line-height: 1;
}

.difficulty-badge-label {
  font-family: var(--font-text);
  font-size: 13px;
  color: var(--badge-text, var(--color-text));
  font-weight: 500;
  line-height: 1;
}

/* ----------------------------------------------------------
   爸媽說說看元件
   ---------------------------------------------------------- */
.parent-hint {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  border: 1.5px dashed #F9A8D4;
  background: rgba(253, 242, 248, 0.5);
  flex: 1 1 auto;
  min-width: 0;
}

.parent-hint-icon {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.parent-hint-content {
  min-width: 0;
}

.parent-hint-label {
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--color-primary);
  font-weight: 600;
  display: block;
}

.parent-hint-text {
  font-family: var(--font-text);
  font-size: 14px;
  color: var(--color-text);
  margin: 2px 0 0;
  line-height: 1.4;
}

/* ----------------------------------------------------------
   螢幕響應式：小螢幕用 transform 縮放
   ---------------------------------------------------------- */
@media screen and (max-width: 840px) {
  .ws-preview-container {
    padding: 16px 0;
    align-items: flex-start;
  }

  .worksheet {
    transform-origin: top center;
    transform: scale(calc((100vw - 32px) / 793));
  }
}

/* ----------------------------------------------------------
   列印模式
   ---------------------------------------------------------- */
@media print {
  .ws-preview-container {
    display: contents;
    padding: 0;
    background: none;
  }

  .worksheet {
    width: 186mm;
    height: 277mm;
    background: white;
    border-radius: 0;
    box-shadow: none;
    border: none;
    overflow: hidden;
    page-break-after: always;
    break-after: page;
    margin: 0;
    padding: 0;
    transform: none;
  }

  /* Header */
  .ws-header {
    padding: 5mm 7mm 4mm;
    border-bottom: 0.5pt solid #D1D5DB;
  }

  .ws-theme-icon {
    width: 12mm;
    height: 12mm;
  }

  .ws-title {
    font-size: 18pt;
  }

  .ws-theme-name {
    font-size: 10pt;
  }

  /* Content */
  .ws-content {
    padding: 5mm 7mm;
  }

  /* Footer */
  .ws-footer {
    padding: 3mm 7mm 5mm;
    border-top: 0.5pt solid #D1D5DB;
  }

  .ws-page-num {
    font-size: 9pt;
  }

  /* 難度標示 */
  .difficulty-badge {
    padding: 0;
    background: none;
    gap: 2px;
  }

  .difficulty-badge-icon {
    font-size: 7pt;
  }

  .difficulty-badge-label {
    font-size: 9pt;
  }

  /* 爸媽說說看 */
  .parent-hint {
    border: 1pt dashed var(--color-secondary);
    padding: 2mm 3mm;
    gap: 2mm;
  }

  .parent-hint-icon {
    font-size: 14pt;
  }

  .parent-hint-label {
    font-size: 9pt;
  }

  .parent-hint-text {
    font-size: 10pt;
  }
}