.signature-book {
  max-width: 1640px;
  padding: 37px 36px 55px;
}

.signature-book .page-heading { margin-bottom: 28px; }
.signature-book .book-toolbar { margin-bottom: 18px; padding: 0 8px; }
.signature-book .book-toolbar > span { font-size: .8rem; }

.guestbook-tabs {
  display: flex;
  justify-content: center;
  gap: 9px;
  margin: 0 0 27px;
}

.guestbook-tabs button {
  min-height: 41px;
  padding: 9px 23px;
  border: 1px solid transparent;
  border-radius: 100px;
  color: #a18381;
  background: transparent;
  font-size: .82rem;
  letter-spacing: .04em;
}

.guestbook-tabs button[aria-selected="true"] {
  border-color: #e7c6d0;
  color: #a65e79;
  background: #fbebf0;
}

.guestbook-tabs button:hover { color: #a65e79; background: #fbf0ef; }

.signature-admin-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: 13px 18px;
  margin: 19px 0 22px;
  padding: 19px 21px;
  border: 1px solid #ead1d9;
  border-radius: 13px;
  background: linear-gradient(120deg, #fffaf8, #fbecf1);
}

.signature-admin-layout h3 { margin: 0 0 5px; color: #a2617a; font-size: .93rem; }
.signature-admin-layout .field-help { margin: 0; color: #ab858e; font-size: .76rem; line-height: 1.8; }
.signature-admin-layout .button { padding: 9px 15px; font-size: .79rem; }
.signature-admin-layout > [role="status"] { grid-column: 1 / -1; color: #a26d83; font-size: .77rem; }
.signature-admin-layout > [role="status"]:empty { display: none; }

.signature-wall {
  width: 100%;
  margin: 0 auto;
}

.signature-wall-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 0 9px 16px;
}

.signature-wall-toolbar p {
  margin: 0;
  color: #a18082;
  font-size: .81rem;
  letter-spacing: .025em;
}

.signature-wall-toolbar p > span:first-child {
  margin-right: 7px;
  color: #bd7890;
  font-family: Georgia, serif;
  font-size: 1.2rem;
}

.signature-wall-touch-hint { display: none; }

.signature-wall-zoom {
  display: flex;
  flex: none;
  align-items: center;
  gap: 3px;
  padding: 3px;
  border: 1px solid #ead9d2;
  border-radius: 100px;
  background: #fffbf8;
}

.signature-wall-zoom button {
  display: grid;
  place-items: center;
  width: 35px;
  height: 35px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  color: #a5687b;
  background: transparent;
  font-size: 1.12rem;
  line-height: 1;
}

.signature-wall-zoom button[data-signature-zoom="fit"] {
  width: 53px;
  border-radius: 100px;
  font-size: .73rem;
}

.signature-wall-zoom button:hover:not(:disabled) { background: #f8e9ed; }
.signature-wall-zoom button:disabled { opacity: .3; }

.signature-wall-viewport {
  position: relative;
  width: 100%;
  height: min(calc((100vw - 72px) * var(--signature-canvas-ratio, .5625)), 78vh, calc(1568px * var(--signature-canvas-ratio, .5625)));
  min-height: 0;
  max-height: min(78vh, 940px);
  overflow: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-color: #dec1c9 #fff9f5;
  scrollbar-width: thin;
  border: 1px solid #ead8cd;
  border-radius: 28px;
  background: #fffdf7;
  box-shadow: 0 15px 55px #8f66700a, inset 0 0 0 7px #fff9f4;
  touch-action: pan-x pan-y;
}

.signature-wall-viewport::-webkit-scrollbar { width: 9px; height: 9px; }
.signature-wall-viewport::-webkit-scrollbar-thumb { border: 2px solid #fff9f5; border-radius: 10px; background: #dec1c9; }
.signature-wall-viewport::-webkit-scrollbar-track { background: #fff9f5; }

.signature-wall-size { position: relative; }

.signature-wall-world {
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: 0 0;
  background-color: #fffdf7;
  background-image:
    radial-gradient(ellipse at 0 0, #f8e0e680 0, transparent 29%),
    radial-gradient(ellipse at 100% 100%, #e9eed680 0, transparent 24%),
    radial-gradient(#c9b19426 .7px, transparent .7px);
  background-size: auto, auto, 19px 19px;
}

.signature-wall-world::before,
.signature-wall-world::after {
  position: absolute;
  z-index: 0;
  color: #e0bac17a;
  font-family: Georgia, serif;
  font-size: 94px;
  line-height: 1;
  pointer-events: none;
}

.signature-wall-world::before { content: '✿'; top: 17px; right: 27px; transform: rotate(19deg); }
.signature-wall-world::after { content: '❧'; bottom: 19px; left: 29px; color: #b5c39570; transform: rotate(-19deg); }

.signature-wall-paper-mark {
  position: absolute;
  z-index: 0;
  right: 47px;
  bottom: 24px;
  color: #c6ada3;
  font-family: Georgia, serif;
  font-size: 19px;
  font-style: italic;
  letter-spacing: .06em;
  pointer-events: none;
}

.signature-wall-paper-mark span { padding: 0 8px; color: #cca0af; }

.signature-mark {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: transparent;
  transform-origin: center;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  touch-action: pan-x pan-y;
}

.signature-mark::before {
  content: '';
  position: absolute;
  inset: -2px;
  z-index: -1;
  border-radius: 20px;
  background: #f7e4e968;
  opacity: 0;
  transition: opacity .18s;
}

.signature-mark:hover::before,
.signature-mark.is-open::before { opacity: 1; }
.signature-mark:focus-visible { outline: 2px dotted #b8758c; outline-offset: 7px; }

.signature-ink {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transition: opacity .2s;
}

.signature-ink.is-loaded { opacity: 1; }
.signature-mark.has-image-error::after { content: '♡'; color: #c69ca7; font-family: Georgia, serif; font-size: 30px; }

.signature-wall-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 15px;
  color: #ad7f8d;
  font-family: WeddingSerif, serif;
  font-size: 1.2rem;
  pointer-events: none;
}

.signature-wall-empty > span { font-family: Georgia, serif; font-size: 3rem; color: #c68a9e; line-height: 1; }
.signature-wall-viewport.is-empty { overflow: hidden; }
.signature-wall-pan-hint { display: none; margin: 14px 0 0; text-align: center; color: #aa8b86; font-size: .73rem; letter-spacing: .035em; }
.signature-wall.is-pannable .signature-wall-pan-hint { display: block; }

.signature-tooltip {
  position: fixed;
  z-index: 65;
  width: 325px;
  padding: 19px 23px;
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #e2bdc7;
  border-radius: 17px;
  background: #fff9f5;
  box-shadow: 0 12px 38px #80526724;
  color: #78575e;
  scrollbar-width: thin;
  scrollbar-color: #dec1c9 transparent;
}

.signature-tooltip-name {
  display: block;
  margin: 0 0 8px;
  color: #a45c78;
  font-family: WeddingSerif, serif;
  font-size: .91rem;
  font-weight: 600;
  overflow-wrap: anywhere;
}

.signature-tooltip-message {
  margin: 0;
  color: #8a6b70;
  font-size: .85rem;
  line-height: 1.85;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (hover: none), (pointer: coarse) {
  .signature-wall-desktop-hint { display: none; }
  .signature-wall-touch-hint { display: inline; }
}

@media (max-width: 640px) {
  .signature-book { padding: 26px 12px 38px; }
  .signature-book .page-heading { margin-bottom: 24px; padding: 0 10px; }
  .signature-book .page-heading h1 { font-size: 1.7rem; }
  .signature-book .page-heading p { font-size: .78rem; line-height: 1.85; }
  .signature-book .book-toolbar { padding: 0 3px; gap: 11px; }
  .signature-book .book-toolbar > span { max-width: 48%; font-size: .7rem; }
  .signature-book .book-toolbar .button { padding: 9px 14px; font-size: .75rem; }
  .guestbook-tabs { margin-bottom: 22px; gap: 6px; }
  .guestbook-tabs button { min-height: 38px; padding: 8px 20px; font-size: .76rem; }
  .signature-admin-layout { grid-template-columns: 1fr; gap: 14px; padding: 16px; }
  .signature-admin-layout .button { width: 100%; }
  .signature-wall-toolbar { gap: 10px; padding: 0 3px 13px; }
  .signature-wall-toolbar p { font-size: .68rem; }
  .signature-wall-toolbar p > span:first-child { margin-right: 3px; }
  .signature-wall-zoom { gap: 0; padding: 2px; }
  .signature-wall-zoom button { width: 30px; height: 32px; font-size: 1rem; }
  .signature-wall-zoom button[data-signature-zoom="fit"] { width: 43px; font-size: .68rem; }
  .signature-wall-viewport { height: min(calc((100vw - 24px) * var(--signature-canvas-ratio, .5625)), 72vh); min-height: 0; max-height: 72vh; border-radius: 19px; }
  .signature-tooltip { width: 290px; padding: 16px 19px; border-radius: 14px; }
  .signature-tooltip-name { font-size: .84rem; }
  .signature-tooltip-message { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .signature-ink, .signature-mark::before { transition: none; }
}