/* 原稿比例：564 × 846。所有元素按画布比例定位，缩放不改变排版。 */
:root {
  --paper: #ebebed;
  --ink: #393436;
  --yellow: #e9e04b;
  --line: #a2a2a2;
}
* { 
  box-sizing: border-box; 
}
body {
  margin: 0;
  padding: 30px 20px;
  background: #f5f5f5;
  color: var(--ink);
}
.poster {
  position: relative;
  width: min(100%, 774px);
  aspect-ratio: 564 / 846;
  margin: 0 auto;
  overflow: hidden;
  background: var(--paper);
  container-type: inline-size;
}
.section { 
  display: contents; 
}
/* --x/--y 为原稿坐标；--w/--h 为元素宽高。 */
.placed {
  position: absolute;
  left: calc(var(--x) / 564 * 100%);
  top: calc(var(--y) / 846 * 100%);
  width: calc(var(--w) / 564 * 100%);
  height: calc(var(--h) / 846 * 100%);
  margin: 0;
}
.type img { 
  display: block; 
  width: 100%; 
  height: 100%; 
}
.bar, .food-disc, .star, .area-chart { 
  background: var(--yellow); 
}
.rule { 
  background: var(--line); 
}
.food-disc { 
  border-radius: 50%; 
}
.food { 
  object-fit: cover; 
  filter: grayscale(1); 
}
.rating-frame { 
  border: 0.18cqw solid var(--line); 
}
.star {
  clip-path: polygon(50% 0%,65% 33%,100% 38%,75% 64%,81% 100%,50% 82%,19% 100%,25% 64%,0% 38%,35% 33%);
}
.star-cover { 
  background: var(--paper); 
}
/* 五条分界线保持相同粗细。 */
.pie { 
  border-radius: 50%; 
  background: var(--yellow); 
  overflow: hidden; 
}
.pie span {
  position: absolute; 
  left: 48.5%; 
  top: 51.5%;
  width: 54%; 
  height: 1.6%; 
  background: var(--paper);
  transform-origin: 0 50%; 
  transform: translateY(-50%) rotate(var(--angle));
}
.time-arrow { 
  background: var(--line); 
  border-radius: 2px; 
}
.time-arrow::after {
  content: "";
  position: absolute;
  right: 0;
  top: 50%;
  width: 2.6cqw;
  height: 2.6cqw;
  border-right: 0.5cqw solid var(--line);
  border-top: 0.5cqw solid var(--line);
  border-radius: 0.3cqw;
  transform: translateY(-50%) rotate(45deg);
}

@media (max-width: 600px) { 
  body { 
    padding: 12px 8px; 
  } 
}


@media print {
  @page { 
    size: 188mm 282mm; 
    margin: 0; 
  }
  html, body { 
    margin: 0; 
    padding: 0; 
    background: var(--paper); 
  }
  .poster { 
    width: 188mm; 
    height: 282mm; 
  }
  * { 
    print-color-adjust: exact; 
    -webkit-print-color-adjust: exact; 
  }
}