:root {
  --pw: 210mm;
  --ph: 297mm;
  --ptw: 170mm;
  --pth: 220mm;
  --al: 24mm;
  --th: 28mm;
}

* {
  box-sizing: border-box;
}

html {
  overflow: hidden;
}

body {
  margin: 0;
  min-height: 100vh;
  min-width: fit-content;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f3f4f6;
  font-family: Arial, "Microsoft YaHei", sans-serif;
}

.page {
  position: relative;
  width: var(--pw);
  height: var(--ph);
  background: #fff;
  border: var(--line-width, 1px) solid #999;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  overflow: hidden;
}

.text-area {
  position: absolute;
  width: var(--ptw);
  height: var(--th);
  /* Center the text area horizontally on the page */
  left: calc((var(--pw) - var(--ptw)) / 2);
  /* First find the top margin of the whole content block,
     then move down by one tag height */
  top: calc((var(--ph) - var(--th) - var(--pth) - var(--al)) / 2 + var(--al));
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.header-content {
  position: absolute;
  /* Move the header upward by one tag height */
  top: calc(-1 * var(--al));
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
}

.pattern {
  position: absolute;
  width: var(--ptw);
  height: var(--pth);
  /* Center the pattern horizontally on the page */
  left: calc((var(--pw) - var(--ptw)) / 2);
   /* Start from the top margin of the full block,
     then add tag height and text height */
  top: calc(
    (var(--ph) - var(--th) - var(--pth) - var(--al)) / 2 + var(--al) + var(--th)
  );
}

.title-block {
  height: var(--al);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  white-space: nowrap;
}

.title-main {
  /* Main title height = 30% of tag size */
  height: calc(0.3 * var(--al));
  line-height: calc(0.3 * var(--al));
  font-size: calc(0.18 * var(--al));
  font-weight: 700;
  color: #fbc43b;
}

.title-sub {
  /* Subtitle height = 20% of tag size */
  height: calc(0.2 * var(--al));
  line-height: calc(0.2 * var(--al));
  font-size: calc(0.12 * var(--al));
  font-weight: 700;
  color: #a5cb71;
}

.logo {
  display: block;
  width: var(--al);
  height: var(--al);
  flex: 0 0 var(--al);
  object-fit: fill;
  border: 0;
}

.qr-block {
  height: var(--al);
  margin-left: calc(0.2 * var(--al));
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  flex: 0 0 auto;
}

.qr {
  display: block;
  /* QR code size = 80% of tag size */
  width: calc(0.8 * var(--al));
  height: calc(0.8 * var(--al));
  border: 0;
}

.qr-text {
  /* QR text area height = 20% of tag size */
  height: calc(0.2 * var(--al));
  line-height: calc(0.2 * var(--al));
  font-size: calc(0.15 * var(--al));
  text-align: center;
  white-space: nowrap;
  color: #333;
  overflow: visible;
}

.tag {
  position: absolute;
  width: var(--al);
  height: var(--al);
}

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

.tag.tl {
  left: 0;
  top: 0;
}

.tag.tr {
  right: 0;
  top: 0;
}

.tag.bl {
  left: 0;
  bottom: 0;
}

.tag.br {
  right: 0;
  bottom: 0;
}

.line {
  position: absolute;
  z-index: 0;
  box-sizing: border-box;
  pointer-events: none;
}

/* horizontal tag space = pattern width - 2 * tag size */
/* dashed line length = 0.9 * horizontal tag space */
.top-line {
  top: 0;
  left: calc(var(--al) + (var(--ptw) - 2 * var(--al)) * 0.05);
  width: calc((var(--ptw) - 2 * var(--al)) * 0.9);
  border-top: var(--line-width, 1px) dashed rgb(52, 52, 52);
}

.bottom-line {
  bottom: 0;
  left: calc(var(--al) + (var(--ptw) - 2 * var(--al)) * 0.05);
  width: calc((var(--ptw) - 2 * var(--al)) * 0.9);
  border-top: var(--line-width, 1px) dashed rgb(52, 52, 52);
}

/* vertical tag space = pattern height - 2 * tag size */
/* dashed line length = 0.9 * vertical tag space */
.left-line {
  left: 0;
  top: calc(var(--al) + (var(--pth) - 2 * var(--al)) * 0.05);
  height: calc((var(--pth) - 2 * var(--al)) * 0.9);
  border-left: var(--line-width, 1px) dashed rgb(52, 52, 52);
}

.right-line {
  right: 0;
  top: calc(var(--al) + (var(--pth) - 2 * var(--al)) * 0.05);
  height: calc((var(--pth) - 2 * var(--al)) * 0.9);
  border-left: var(--line-width, 1px) dashed rgb(52, 52, 52);
}

.info {
  position: absolute;
  right: 8mm;
  bottom: 8mm;
  padding: 4mm 5mm;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid #ddd;
  font-size: 3.2mm;
  line-height: 1.6;
  color: #333;
}

@media print {
  body {
    background: #fff;
  }

  .page {
    box-shadow: none;
    border: none;
  }
}