/* Adapted from Geuljagi diary components; see 검수/A13b/쓴요소.md. */
.diary-photo {
  position: relative;
  box-sizing: border-box;
  width: min(100%, var(--diary-photo-width));
  margin: 54px auto var(--diary-photo-gap);
  padding: 12px 12px 46px;
  background:
    linear-gradient(145deg, color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent), transparent 44%),
    color-mix(in srgb, var(--notebook-paper) 90%, var(--nn-editor-warm-700));
  border: 1px solid color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  border-radius: 2px;
  box-shadow:
    inset 0 0 0 5px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent),
    0 2px 3px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent),
    0 10px 22px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  transform: rotate(-0.45deg);
}

.diary-photo__frame {
  position: relative;
  overflow: visible;
  padding: 8px;
  background: color-mix(in srgb, var(--notebook-paper) 78%, var(--nn-editor-warm-700));
  border: 1px solid color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  box-shadow:
    inset 0 0 0 3px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent),
    inset 0 1px 5px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
}

.diary-photo__frame::before,
.diary-photo__frame::after {
  position: absolute;
  z-index: 2;
  top: -24px;
  width: 76px;
  height: 25px;
  content: "";
  opacity: 0.78;
  background:
    linear-gradient(90deg, transparent 0 4px, color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent) 4px 7px, transparent 7px),
    color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  box-shadow: 0 1px 2px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
}

.diary-photo__frame::before {
  left: 9%;
  transform: rotate(-5deg);
}

.diary-photo__frame::after {
  right: 9%;
  transform: rotate(4deg);
}

.diary-photo__frame img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 520px;
  object-fit: cover;
  border-radius: 1px;
  box-shadow: 0 1px 3px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  filter: saturate(0.9) contrast(0.96) sepia(0.08);
}

.diary-photo__caption {
  position: absolute;
  z-index: 3;
  right: 7%;
  bottom: -17px;
  left: 7%;
  display: flex;
  align-items: baseline;
  gap: 14px;
  min-height: 36px;
  padding: 7px 20px 6px;
  color: var(--nn-editor-warm-700);
  font-family: "Nanum Pen Script", "Gaegu", sans-serif;
  line-height: 24px;
  background:
    repeating-linear-gradient(91deg, transparent 0 11px, color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent) 11px 12px),
    var(--diary-tape);
  box-shadow: 0 2px 4px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  clip-path: polygon(0 10%, 2% 0, 5% 7%, 8% 1%, 12% 6%, 16% 0, 20% 7%, 25% 2%, 30% 7%, 35% 1%, 40% 6%, 46% 0, 52% 6%, 58% 1%, 64% 7%, 70% 2%, 76% 7%, 82% 1%, 88% 6%, 94% 1%, 98% 7%, 100% 2%, 99% 92%, 96% 100%, 91% 94%, 86% 100%, 80% 94%, 74% 99%, 68% 93%, 62% 99%, 56% 94%, 50% 100%, 44% 94%, 38% 99%, 32% 93%, 26% 99%, 20% 94%, 14% 100%, 8% 94%, 3% 99%, 0 92%);
  transform: rotate(0.9deg);
}

.diary-photo__number {
  flex: 0 0 auto;
  font-family: "Gaegu", sans-serif;
  font-size: 0.78em;
  font-weight: 700;
  letter-spacing: 0.08em;
}

.diary-photo__text {
  min-width: 0;
}

.diary-postit {
  position: relative;
  box-sizing: border-box;
  width: fit-content;
  min-width: var(--diary-postit-min-width);
  max-width: var(--diary-postit-max-width);
  margin: 54px var(--diary-postit-right-gap) var(--diary-photo-gap) auto;
  padding: 34px 34px 30px;
  color: var(--nn-editor-warm-700);
  background:
    linear-gradient(155deg, color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent), transparent 36%),
    var(--diary-postit);
  box-shadow:
    2px 4px 3px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent),
    10px 14px 25px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  transform: rotate(0.7deg);
}

.diary-postit::before {
  position: absolute;
  top: -13px;
  left: 50%;
  width: 86px;
  height: 25px;
  content: "";
  background: color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  box-shadow: 0 1px 2px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  transform: translateX(-50%) rotate(-2deg);
}

.diary-postit--peach {
  background:
    linear-gradient(155deg, color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent), transparent 36%),
    var(--diary-postit-peach);
}

.diary-postit--green {
  background:
    linear-gradient(155deg, color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent), transparent 36%),
    var(--diary-postit-green);
}

.diary-postit--blue {
  background:
    linear-gradient(155deg, color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent), transparent 36%),
    var(--diary-postit-blue);
}

.diary-postit__title {
  display: block;
  margin-bottom: 12px;
  font-family: "Nanum Pen Script", "Gaegu", sans-serif;
  font-size: 1.3em;
  font-weight: 400;
}

.diary-postit p {
  margin: 0;
}

.diary-stickers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: -36px 0 36px;
}

.diary-sticker {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 2px 13px;
  color: var(--nn-editor-warm-700);
  font-size: 0.78em;
  line-height: 30px;
  background: var(--diary-sticker-blue);
  border: 1px solid color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
  border-radius: 48% 52% 50% 46% / 54% 46% 52% 48%;
  box-shadow: 1px 2px 3px color-mix(in srgb,var(--nn-editor-warm-700) 16%,transparent);
}

.diary-sticker:nth-child(2) {
  background: var(--diary-sticker-green);
  transform: rotate(-1deg);
}

.diary-sticker:nth-child(3) {
  background: var(--diary-sticker-peach);
  transform: rotate(1.2deg);
}