/* ============================================================
 * 拼音字帖生成器
 * - 配置面板
 * - 田字格 / 米字格 / 回宫格 / 四线三格
 * - A4 打印优化
 * ============================================================ */

/* —— 配置面板（与 math.css 保持视觉一致）—— */
.py-config {
  background: #fff;
  border: 1px solid #e8eaf2;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  box-shadow: 0 2px 8px rgba(45, 52, 80, .04);
}
.py-config h3 { margin: 0 0 12px; font-size: 16px; color: #2c3e50; font-weight: 700; }

.py-mode-tabs {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 4px;
  background: #f5f6fa;
  border-radius: 8px;
}
.py-mode-tabs label {
  flex: 1;
  min-width: 130px;
  text-align: center;
  cursor: pointer;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 13px;
  color: #5a6573;
  transition: all .15s;
  margin: 0;
}
.py-mode-tabs label:hover { background: rgba(255, 255, 255, .6); }
.py-mode-tabs input[type="radio"] { display: none; }
.py-mode-tabs input[type="radio"]:checked + span {
  background: #fff;
  color: #4f8cff;
  font-weight: 600;
  box-shadow: 0 2px 4px rgba(79, 140, 255, .15);
}
.py-mode-tabs span {
  display: block;
  padding: 6px 8px;
  border-radius: 5px;
  transition: all .15s;
}

.py-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 10px;
}
.py-field { display: flex; align-items: center; gap: 6px; }
.py-field label { margin: 0; font-size: 13px; color: #5a6573; font-weight: 500; }
.py-field select, .py-field input[type="number"], .py-field input[type="text"] {
  padding: 6px 10px;
  border: 1px solid #d8dde6;
  border-radius: 5px;
  font-size: 13px;
  background: #fff;
  height: auto;
  width: auto;
}
.py-field input[type="text"] { min-width: 120px; }

.py-check {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #f7f8fb;
  border: 1px solid #e6e9ef;
  border-radius: 5px;
  font-size: 13px;
  cursor: pointer;
  margin: 0;
  font-weight: 500;
  color: #3f4858;
}
.py-check input { margin: 0; }
.py-check:has(input:checked) {
  background: #e6f0ff;
  border-color: #4f8cff;
  color: #2c5fdb;
}

.py-textarea {
  width: 100%;
  min-height: 80px;
  padding: 10px 12px;
  border: 1px solid #d8dde6;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
  resize: vertical;
  background: #fff;
}

/* —— 操作按钮 —— */
.py-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
}
.py-actions button {
  padding: 9px 18px;
  border: 1px solid #d8dde6;
  background: #fff;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  font-weight: 500;
  color: #3f4858;
  transition: all .15s;
}
.py-actions button:hover { background: #f5f6fa; border-color: #b0b8c5; }
.py-btn-primary {
  background: linear-gradient(135deg, #4f8cff, #6ba6ff) !important;
  color: #fff !important;
  border-color: transparent !important;
  font-weight: 600 !important;
}
.py-btn-primary:hover { filter: brightness(1.05); }
.py-btn-print {
  background: #fff8eb !important;
  color: #cc7c00 !important;
  border-color: #ffd591 !important;
}
.py-btn-print:hover { background: #ffe5a3 !important; }

/* —— 字帖纸 —— */
.py-sheet {
  background: #fff;
  border: 1px solid #ecedf3;
  border-radius: 10px;
  padding: 18px 22px 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(45, 52, 80, .05);
  min-height: 600px;
}
.py-sheet-header {
  border-bottom: 2px solid #2c3e50;
  padding-bottom: 8px;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 12px;
}
.py-stitle { font-size: 18px; font-weight: 700; color: #2c3e50; }
.py-smeta {
  font-size: 13px;
  color: #5a6573;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.py-line {
  display: inline-block;
  min-width: 60px;
  border-bottom: 1px solid #aaa;
  padding: 0 4px;
}

/* —— 字帖网格（容器）—— */
.py-grid {
  display: grid;
  gap: 0;
}

/* 单个字单元（拼音 + 格子） */
.py-unit {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border: 1px solid transparent;  /* 调试用，正式打印用各格子自己的边框 */
}

.py-unit-pinyin {
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Times New Roman', 'KaiTi', serif;
  font-size: 18px;
  color: #1a2a4a;
  background: #fff;
  border-bottom: none;
}
.py-unit-pinyin.empty { color: transparent; }     /* 空拼音占位 */
.py-unit-pinyin.trace { color: #c8d0db; }         /* 描红用浅灰 */

/* 四线三格（拼音格） */
.py-pinyin-grid {
  height: 38px;
  position: relative;
  background: #fff;
  border-bottom: 1px solid #e0e3eb;  /* 仅最底，避免重复 */
}
.py-pinyin-grid::before,
.py-pinyin-grid::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 0;
  border-top: 1px solid #ffadad;
}
.py-pinyin-grid::before { top: 33%; }
.py-pinyin-grid::after  { top: 66%; }
.py-pinyin-grid > .top-line {
  position: absolute;
  left: 0; right: 0; top: 0;
  border-top: 1px solid #e0e3eb;
}
.py-pinyin-grid > .pinyin-text {
  position: absolute;
  left: 0; right: 0; top: 0; bottom: 0;
  display: flex; align-items: center; justify-content: center;
  font-family: 'Times New Roman', serif;
  font-size: 18px;
  color: #1a2a4a;
}
.py-pinyin-grid > .pinyin-text.trace { color: #d6dce6; }

/* 田字格 */
.py-cell {
  position: relative;
  background: #fff;
  border: 1px solid #c4304a;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.py-cell::before,
.py-cell::after {
  content: '';
  position: absolute;
  background: transparent;
  border-color: #c4304a;
}
.py-cell::before {
  left: 0; right: 0;
  top: 50%;
  border-top: 1px dashed #d97a8c;
}
.py-cell::after {
  top: 0; bottom: 0;
  left: 50%;
  border-left: 1px dashed #d97a8c;
}
.py-cell .py-char {
  font-family: 'KaiTi', '楷体', 'STKaiti', serif;
  color: #1a2a4a;
  z-index: 2;
  position: relative;
  line-height: 1;
}
.py-cell .py-char.trace { color: #cdd2dc; }   /* 描红：浅灰 */
.py-cell .py-char.empty { color: transparent; } /* 空格：让孩子写 */

/* 米字格：在田字格基础上加对角线 */
.py-cell.mi::before,
.py-cell.mi::after {
  /* 复用 ::before, ::after 做横竖虚线 */
}
.py-cell.mi {
  background-image:
    linear-gradient(45deg, transparent 49.4%, #d97a8c 49.4%, #d97a8c 50.6%, transparent 50.6%),
    linear-gradient(-45deg, transparent 49.4%, #d97a8c 49.4%, #d97a8c 50.6%, transparent 50.6%);
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 回宫格：田字格 + 内嵌小格 */
.py-cell.huigong::before,
.py-cell.huigong::after {
  /* 保留田字格的中间十字 */
}
.py-cell.huigong > .huigong-inner {
  position: absolute;
  left: 25%; right: 25%;
  top: 25%; bottom: 25%;
  border: 1px dashed #d97a8c;
  z-index: 1;
}

/* —— 单字尺寸 —— */
.py-grid.size-sm .py-cell { font-size: 28px; }
.py-grid.size-md .py-cell { font-size: 36px; }
.py-grid.size-lg .py-cell { font-size: 48px; }
.py-grid.size-sm .py-cell .py-char { font-size: 28px; }
.py-grid.size-md .py-cell .py-char { font-size: 36px; }
.py-grid.size-lg .py-cell .py-char { font-size: 48px; }

/* —— 单元布局：拼音格 + 田字格上下叠加 —— */
.py-unit {
  display: flex;
  flex-direction: column;
  /* 单元间距：横向间距 0（边框靠在一起）、纵向间距小 */
}

/* 行间距 */
.py-grid {
  row-gap: 14px;
  column-gap: 0;
}

/* —— 多音字提示 —— */
.py-poly-tip {
  display: inline-block;
  font-size: 10px;
  background: #fff3e0;
  color: #d68a00;
  padding: 1px 4px;
  border-radius: 2px;
  vertical-align: super;
  margin-left: 2px;
}

/* —— 提示与说明 —— */
.py-tip {
  background: #fff7e6;
  border: 1px solid #ffd591;
  border-radius: 6px;
  padding: 10px 14px;
  font-size: 13px;
  color: #5a4a1f;
  line-height: 1.7;
  margin-top: 14px;
}
.py-tip strong { color: #cc7c00; }

#pyCapacityTip {
  display: none;
  margin-bottom: 10px;
  padding: 9px 14px;
  background: #fff8e1;
  border: 1px solid #ffe082;
  border-radius: 6px;
  font-size: 13px;
  color: #7a5b1f;
}

/* —— 仅四线三格模式（无田字格） —— */
.py-grid.pinyin-only .py-cell { display: none; }
.py-grid.pinyin-only .py-unit-pinyin { height: 60px; }
.py-grid.pinyin-only .py-pinyin-grid { height: 60px; }

/* —— 移动端适配 —— */
@media (max-width: 576px) {
  .py-config { padding: 12px 14px; }
  .py-row { gap: 8px; }
  .py-mode-tabs label { min-width: 90px; font-size: 12px; padding: 6px 6px; }
  .py-actions { gap: 6px; }
  .py-actions button { padding: 8px 12px; font-size: 13px; }
  .py-grid.size-md .py-cell { font-size: 28px; }
  .py-grid.size-lg .py-cell { font-size: 36px; }
  .py-sheet { padding: 12px 14px; }
}

/* —— A4 打印优化 —— */
@media print {
  body { background: #fff; }
  /* 隐藏一切非字帖的内容 */
  .navbar, .breadcrumb, .py-config, .py-actions,
  #floatingContactCta, #mobileTabBar, .m-tabbar, nav.m-tabbar,
  #toolFavBtn,
  .copyright-area, .footer-area, footer, .py-tip,
  .qz-info-fold, .contact-cta, .float-cta, #pyCapacityTip,
  .container > div:not(.py-sheet) {
    display: none !important;
  }
  .py-sheet {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .py-sheet-header {
    page-break-after: avoid;
  }
  .py-grid {
    row-gap: 10px;
  }
  .py-unit {
    page-break-inside: avoid;
  }
  /* A4 页面 */
  @page {
    size: A4;
    margin: 12mm 15mm 12mm 15mm;
  }
  /* 拼音颜色更深，避免打印不清楚 */
  .py-pinyin-grid > .pinyin-text { color: #000; }
  .py-pinyin-grid::before, .py-pinyin-grid::after { border-color: #999; }
  .py-cell { border-color: #c00; }
  .py-cell::before, .py-cell::after { border-color: #d77; }
}