.trm-guestbook-hero {
  position: relative;
  overflow: hidden;
  border-radius: 16px;
  min-height: 300px;
  margin-bottom: 28px;
  box-shadow: 0 22px 56px -36px rgba(22, 28, 32, 0.55);
}

.trm-guestbook-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.trm-guestbook-hero-shade {
  position: absolute;
  inset: 0;
  background: linear-gradient(130deg, rgba(22, 28, 32, 0.7), rgba(89, 66, 43, 0.5));
}

.trm-guestbook-hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
  padding: 24px 20px 28px;
}

.trm-guestbook-hero-content h1 {
  margin: 0 0 8px;
  color: #fff;
  font-size: 34px;
}

.trm-guestbook-subtitle {
  margin: 0 0 10px;
  font-size: 16px;
  font-weight: 600;
}

.trm-guestbook-note {
  margin: 0 0 18px;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.8;
}

.trm-guestbook-open {
  min-width: 160px;
}

.trm-guestbook-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

.trm-guestbook-card {
  border: 1px solid rgba(19, 36, 44, 0.1);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 14px 34px -28px rgba(16, 24, 30, 0.5);
  padding: 16px;
}

.trm-guestbook-card-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 10px;
}

.trm-guestbook-name {
  font-weight: 700;
  color: #24404d;
}

.trm-guestbook-date {
  font-size: 12px;
  color: #7b8a93;
}

.trm-guestbook-text-wrap {
  position: relative;
}

.trm-guestbook-text {
  margin: 0;
  color: #37454d;
  line-height: 1.85;
  white-space: pre-wrap;
}

.trm-guestbook-text-wrap.is-collapsed .trm-guestbook-text {
  max-height: 11.8em;
  overflow: hidden;
}

.trm-guestbook-text-wrap.is-collapsed::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64px;
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.98));
}

.trm-guestbook-toggle {
  margin-top: 10px;
  border: 0;
  background: none;
  padding: 0;
  color: #9a7b4f;
  font-weight: 700;
}

.trm-guestbook-image {
  margin-top: 12px;
  border-radius: 10px;
  width: 100%;
  max-height: 240px;
  object-fit: cover;
}

.trm-guestbook-reply {
  margin-top: 12px;
  padding: 10px 12px;
  border-left: 3px solid rgba(154, 123, 79, 0.55);
  background: rgba(154, 123, 79, 0.08);
  border-radius: 8px;
  color: #4a3c2b;
  font-size: 14px;
  line-height: 1.75;
}

.trm-guestbook-ending {
  margin: 24px 0 34px;
  color: #5b676e;
  line-height: 1.9;
}

.trm-guestbook-ending p {
  margin: 0;
}

.trm-guestbook-layer {
  position: fixed;
  inset: 0;
  z-index: 100050;
  display: none;
}

.trm-guestbook-layer.is-open {
  display: block;
}

.trm-guestbook-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(18, 25, 29, 0.55);
}

.trm-guestbook-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(620px, calc(100vw - 44px));
  max-height: calc(100vh - 56px);
  overflow: auto;
  transform: translate(-50%, -50%);
  border-radius: 16px;
  background: #fff;
  padding: 22px 18px;
}

.trm-guestbook-close {
  position: absolute;
  right: 12px;
  top: 10px;
  border: 0;
  background: transparent;
  font-size: 28px;
  line-height: 1;
  color: #65737c;
}

.trm-guestbook-form {
  display: grid;
  gap: 14px;
}

.trm-guestbook-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 13px;
  color: #667780;
}

.trm-guestbook-field input,
.trm-guestbook-field select,
.trm-guestbook-field textarea {
  width: 100%;
  border: 1px solid rgba(19, 36, 44, 0.14);
  border-radius: 8px;
  padding: 10px 12px;
  background: #fff;
}

.trm-guestbook-optional {
  border: 1px solid rgba(19, 36, 44, 0.1);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(249, 247, 243, 0.8);
}

.trm-guestbook-optional summary {
  cursor: pointer;
  color: #57646b;
  font-size: 13px;
  font-weight: 600;
}

.trm-guestbook-upload-hint {
  margin-bottom: 8px;
  color: #7a878f;
  font-size: 12px;
}

.trm-guestbook-preview {
  margin-top: 10px;
}

.trm-guestbook-preview img {
  max-width: 100%;
  border-radius: 8px;
}

.trm-guestbook-action-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
}

@media (min-width: 992px) {
  .trm-guestbook-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1460px) {
  .trm-guestbook-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 768px) {
  .trm-guestbook-hero {
    min-height: 270px;
  }

  .trm-guestbook-hero-content {
    padding: 22px 16px 24px;
  }

  .trm-guestbook-hero-content h1 {
    font-size: 30px;
  }

  .trm-guestbook-panel {
    left: 0;
    right: 0;
    top: auto;
    bottom: 0;
    width: 100%;
    max-height: min(82vh, 720px);
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    border-top-left-radius: 18px;
    border-top-right-radius: 18px;
    transform: none;
    padding-bottom: 22px;
    animation: trmSheetIn 0.2s ease-out;
  }
}

@keyframes trmSheetIn {
  from {
    transform: translateY(10%);
    opacity: 0;
  }

  to {
    transform: translateY(0);
    opacity: 1;
  }
}