.safety-page {
  min-height: 100vh;
  background:
    repeating-linear-gradient(4deg, #8c5e3510 0 1px, transparent 1px 11px, #fff7eb55 12px 13px, transparent 14px 31px),
    linear-gradient(122deg, #f2e3cc, #e4c7a4);
}
.safety-page [aria-current="page"] {
  background: #e1e9eb;
  border-color: #647f8c;
  font-weight: 700;
}
.safety-content {
  width: min(calc(100% - 44px), 1050px);
  margin-inline: auto;
  padding-block: clamp(25px, 4vw, 52px) 48px;
}
.safety-draft, .safety-rules {
  padding: clamp(20px, 4vw, 42px);
  border: 1px solid #b99773;
  border-radius: 16px;
  background: #fff7eb;
  box-shadow: 0 5px 0 #d8b995, 0 9px 22px #5232191c;
}
.safety-draft {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(14px, 5vw, 55px);
}
.safety-draft .desk-ribbon { margin-bottom: 19px; }
.safety-draft h2 {
  font-size: clamp(1.05rem, 2.6vw, 1.55rem);
  line-height: 1.45;
  text-wrap: balance;
}
.safety-status {
  display: inline-block;
  width: fit-content;
  padding: 3px 10px;
  border: 1px solid #bb9969;
  border-radius: 6px;
  background: #f7e5c5;
  color: #513d29;
  font-size: .78rem;
  font-weight: 700;
}
.safety-draft .safety-status { margin-top: 12px; }
.safety-diary {
  position: relative;
  width: clamp(72px, 18vw, 164px);
  aspect-ratio: 1.13;
  margin: 8px;
  transform: rotate(-9deg);
  border: 3px solid #293f51;
  border-radius: 12px 19px 17px 12px;
  background: linear-gradient(145deg, #48677b, #354f65 62%);
  box-shadow: inset 8px 0 #293f51, 0 7px #f2dcb3, 0 10px #293f51, 3px 15px 16px #52321939;
}
.safety-diary::before {
  content: "";
  position: absolute;
  inset: 10% 9% 10% 14%;
  border: 1px dashed #9cb1b9;
  border-radius: 5px 11px 11px 5px;
}
.safety-diary span {
  position: absolute;
  inset: 44% -7% auto auto;
  width: 33%;
  height: 32%;
  border: 2px solid #835826;
  border-radius: 6px;
  background: linear-gradient(#e8b965, #c89142);
  box-shadow: 1px 3px 4px #17191257;
}
.safety-diary span::before {
  content: "";
  position: absolute;
  width: 66%;
  height: 80%;
  bottom: 100%;
  left: 17%;
  border: 3px solid #c89142;
  border-bottom: 0;
  border-radius: 10px 10px 0 0;
}
.safety-rules { margin-top: 26px; }
.safety-rules header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.safety-rules h2 { font-size: clamp(1.14rem, 2.3vw, 1.42rem); }
.safety-rules ul { list-style: none; padding: 0; margin: 17px 0 0; }
.safety-rules li { padding: 15px 0; border-top: 1px solid #dbc4a9; }
.safety-rules li:last-child { padding-bottom: 0; }
.safety-rules h3 { font-size: .98rem; }
.safety-rules li p { margin-top: 3px; color: #5d4a37; font-size: .88rem; }
@media (max-width: 480px) {
  .safety-content { width: calc(100% - 28px); }
  .safety-draft { grid-template-columns: minmax(0, 1fr); position: relative; }
  .safety-draft .desk-ribbon { max-width: calc(100% - 76px); }
  .safety-diary { position: absolute; top: 15px; right: 12px; width: 53px; }
}