/* ============================================================
   组件：文档预览 (Document Preview)
   病例模板的实际排版样式
   ============================================================ */

/* ── 文档页面 ── */
.doc-page {
  padding: 98px 60px 72px;
  width: 100%;
  min-height: 1123px;
  position: relative;
}

/* ── 文档头部 ── */
.doc-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: var(--space-2);
}

.doc-title-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  min-width: 0;
}

.doc-logo {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
}

.doc-logo-image {
  width: 48px;
  height: 48px;
  display: block;
  object-fit: contain;
}

.doc-title {
  font-size: 28px;
  font-weight: 700;
  line-height: 48px;
  letter-spacing: 1px;
  white-space: nowrap;
  color: #111;
}

.doc-subtitle {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 6px;
  line-height: 1.2;
  margin-bottom: var(--space-3);
  color: #111;
}

/* ── 分隔线 ── */
.doc-rule {
  border-top: 2px solid #111;
  margin-bottom: var(--space-5);
}

/* ── 基础信息网格 ── */
.meta-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-3) var(--space-5);
  font-size: var(--text-base);
  margin-bottom: var(--space-8);
}

.meta-item {
  min-height: 22px;
}

.doc-label {
  font-weight: 700;
  margin-right: 4px;
}

/* ── 文档内容块 ── */
.doc-block {
  font-size: var(--text-base);
  line-height: 2;
  margin-bottom: var(--space-7);
  word-break: break-word;
  color: #111;
}

.doc-block-title {
  font-weight: 700;
}

.advice-wrap {
  display: inline-block;
  max-width: calc(100% - 98px);
  vertical-align: top;
}

.advice-line {
  display: block;
  padding-left: 10px;
  text-indent: -10px;
}

/* ── 文档底部 ── */
.doc-bottom {
  margin-top: var(--space-6);
  position: relative;
  min-height: 240px;
}

.doc-date {
  font-size: var(--text-base);
  margin-top: var(--space-3);
  color: #111;
}

/* ── 印章区域 ── */
.stamp-slot-group {
  position: absolute;
  left: 68px;
  bottom: 78px;
  z-index: 1;
}

.stamp-slot-label {
  position: relative;
  font-size: var(--text-base);
  font-weight: 700;
  color: #111;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  touch-action: none;
}

.stamp-slot-note {
  position: absolute;
  left: 50%;
  top: 24px;
  transform: translateX(-50%);
  font-size: var(--text-xs);
  color: #444;
  white-space: nowrap;
  pointer-events: none;
  user-select: none;
}

.stamp-area {
  position: absolute;
  left: 128px;
  bottom: 10px;
  width: 260px;
  height: 260px;
  opacity: 0.94;
  cursor: grab;
  user-select: none;
  touch-action: none;
  z-index: 8;
  transition: opacity var(--duration-fast) var(--ease-default);
}

.stamp-area:hover {
  opacity: 1;
}

.stamp-svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── 签名区域 ── */
.sign-area {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 250px;
  height: 190px;
}

.sign-label {
  position: absolute;
  right: 126px;
  bottom: 86px;
  font-size: var(--text-base);
  font-weight: 700;
  z-index: 2;
  white-space: nowrap;
  color: #111;
}

.sign-writing {
  position: absolute;
  right: 0;
  bottom: 70px;
  z-index: 3;
  color: rgba(10, 10, 10, 0.92);
  font-family: "STXingkai", "KaiTi", "STKaiti", "FZShuTi", "Microsoft YaHei", cursive;
  font-weight: 700;
  line-height: 1;
  transform-origin: right bottom;
  white-space: nowrap;
  cursor: grab;
  user-select: none;
  touch-action: none;
  display: inline-flex;
  align-items: flex-end;
}

/* ── 拖动状态 ── */
.stamp-slot-label.is-dragging,
.stamp-area.is-dragging,
.sign-writing.is-dragging {
  cursor: grabbing;
}

.signature-char {
  display: inline-block;
  transform-origin: center bottom;
  line-height: 1;
  vertical-align: baseline;
}

/* ── 底部备注 ── */
.doc-note {
  position: absolute;
  left: 60px;
  right: 60px;
  bottom: 38px;
  padding-top: var(--space-1);
  border-top: 2px solid #111;
  font-size: var(--text-xs);
  font-weight: 700;
  line-height: 1.8;
  color: #111;
}

/* ── 响应式 ── */
@media (max-width: 768px) {
  .meta-grid {
    grid-template-columns: 1fr 1fr;
  }
}