.journalComment {
  max-width: 680px;
  margin-top: clamp(72px, 10vw, 120px);
  padding-top: clamp(38px, 5vw, 58px);
  border-top: 1px solid var(--journal-line);
  font-family: "Noto Sans JP", "Yu Gothic", sans-serif;
}

.journalComment header { margin-bottom: 32px; }
.journalComment header p { margin: 0 0 10px; color: var(--journal-brass); font: 600 9px/1.5 Arial, sans-serif; letter-spacing: .18em; }
.journalComment h2 { margin: 0; color: var(--journal-text); font: 400 clamp(21px, 2.5vw, 28px)/1.6 "Yu Mincho", serif; letter-spacing: .055em; }
.journalComment form { display: grid; }
.journalComment label { margin-bottom: 10px; color: var(--journal-soft); font-size: 11px; letter-spacing: .08em; }
.journalComment label:not(:first-of-type) { margin-top: 26px; }
.journalComment label small { margin-left: 8px; color: var(--journal-muted); font-size: 9px; }
.journalComment input,
.journalComment textarea { width: 100%; border: 1px solid var(--journal-line); border-radius: 2px; padding: 13px 14px; color: var(--journal-text); background: #151515; font: inherit; line-height: 1.7; outline: none; transition: border-color .2s ease, background-color .2s ease; }
.journalComment textarea { min-height: 132px; resize: vertical; }
.journalComment input:focus,
.journalComment textarea:focus { border-color: rgba(185, 151, 98, .62); background: #181818; }
.journalCommentStatus { min-height: 1.8em; margin: 15px 0 0; color: var(--journal-muted); font-size: 11px; line-height: 1.8; }
.journalCommentStatus[data-state="error"] { color: var(--journal-soft); }
.journalComment button { justify-self: start; min-width: 112px; min-height: 42px; margin-top: 12px; border: 1px solid rgba(185, 151, 98, .52); border-radius: 2px; padding: 10px 22px; color: var(--journal-soft); background: transparent; font: 500 11px/1 Arial, sans-serif; letter-spacing: .14em; cursor: pointer; transition: color .2s ease, border-color .2s ease, background-color .2s ease; }
.journalComment button:hover:not(:disabled),
.journalComment button:focus-visible { color: var(--journal-text); border-color: var(--journal-brass); background: rgba(185, 151, 98, .06); }
.journalComment button:disabled { color: var(--journal-muted); border-color: var(--journal-line); cursor: wait; }

.journalHeader,
main,
.journalFooter { transition: opacity .45s ease; }
.journalConfirmationTransition .journalHeader,
.journalConfirmationTransition main,
.journalConfirmationTransition .journalFooter { opacity: 0; }
.journalConfirmation { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 24px; color: #d2d5d2; background: #080909; opacity: 0; visibility: hidden; transition: opacity .55s ease, visibility .55s ease; }
.journalConfirmation[hidden] { display: none; }
.journalConfirmation.isVisible { opacity: 1; visibility: visible; }
.journalConfirmationPanel { width: min(520px, 100%); padding: clamp(34px, 7vw, 64px); border-block: 1px solid rgba(210, 213, 210, .2); text-align: center; font-family: "Courier New", monospace; }
.journalConfirmationPanel > p { margin: 0; font-size: clamp(13px, 2vw, 16px); letter-spacing: .12em; }
.journalConfirmationKey { display: grid; gap: 15px; margin: clamp(48px, 8vw, 72px) 0; }
.journalConfirmationKey span { color: #898d89; font-size: 10px; letter-spacing: .2em; text-transform: uppercase; }
.journalConfirmationKey strong { color: #e2e5e2; font-family: inherit; font-size: clamp(42px, 10vw, 70px); font-variant-ligatures: none; font-weight: 500; line-height: 1; letter-spacing: .035em; }
.journalConfirmationPanel > small { color: #747874; font-size: 9px; letter-spacing: .16em; }
.journalConfirmationFooter { position: absolute; right: 24px; bottom: clamp(24px, 5vh, 48px); left: 24px; display: grid; justify-items: center; gap: 14px; opacity: 0; transition: opacity .7s ease; }
.journalConfirmationFooter.isVisible { opacity: 1; }
.journalConfirmationFooter p { margin: 0; color: #626762; font: 400 8px/1.6 "Courier New", monospace; letter-spacing: .13em; text-align: center; }
.journalConfirmationFooter a { padding: 7px 3px; border-bottom: 1px solid #343834; color: #888e89; font: 400 9px/1.4 "Courier New", monospace; letter-spacing: .14em; text-decoration: none; transition: color .2s ease, border-color .2s ease; }
.journalConfirmationFooter a:hover,
.journalConfirmationFooter a:focus-visible { border-color: #737a74; color: #c0c6c1; outline: none; }

@media (max-width: 700px) {
  .journalComment { margin-top: 68px; }
  .journalComment input,
  .journalComment textarea { font-size: 16px; }
  .journalComment button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .journalHeader,
  main,
  .journalFooter,
  .journalConfirmation { transition-duration: .01ms; }
}