.shutdown-page { background: radial-gradient(ellipse at 50% 25%, #fffdf9, #faf5ee 65%, #f1e7df); }
.shutdown-notice { position: relative; width: min(480px, calc(100% - 40px)); margin: auto; padding: 44px 42px 38px; text-align: center; background: #fffdf9; border: 1px solid #e4d6d0; border-radius: 18px; box-shadow: 0 24px 80px #752b3b0a; }
.shutdown-notice::before { content: ''; position: absolute; inset: 9px; border: 1px solid #eee4dd; border-radius: 11px; pointer-events: none; }
.shutdown-emblem { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 25px; border: 1px solid #d7b5ba; border-radius: 50%; background: #f7eeeb; color: #752b3b; font: 28px Georgia, serif; }
.shutdown-eyebrow { display: block; color: #946c70; font-size: 11px; letter-spacing: 3px; }
.shutdown-notice h1 { margin: 15px 0 18px; color: #532d36; font: 500 34px/1.45 var(--entry-serif); letter-spacing: 2px; }
.shutdown-description { margin: 0 0 30px; color: #897674; font-size: 14px; line-height: 2; }
.shutdown-clock { display: flex; align-items: flex-start; justify-content: center; gap: 12px; font-variant-numeric: tabular-nums; }
.shutdown-unit { display: flex; flex-direction: column; align-items: center; gap: 11px; }
.shutdown-unit strong { display: grid; place-items: center; width: 78px; height: 86px; border: 1px solid #e6d4d2; border-radius: 9px; background: linear-gradient(#fcf7f1 49.5%, #f1e4de 50%, #f8eee7 50.5%); color: #752b3b; font: 400 45px/1 Georgia, 'Times New Roman', serif; }
.shutdown-unit > span { color: #9a7c7d; font-size: 11px; letter-spacing: 2px; }
.shutdown-colon { padding-top: 18px; color: #b49a99; font: 35px/1 Georgia, serif; }
.shutdown-date { margin: 18px 0 0; color: #927b7b; font-size: 11px; line-height: 1.8; letter-spacing: .4px; }
.shutdown-rule { width: 36px; height: 1px; margin: 26px auto 21px; background: #d8b9b7; }
.shutdown-explanation { margin: 0 0 25px; color: #897674; font-size: 12px; line-height: 2; }
.shutdown-notice .open-letter { gap: 20px; min-height: 48px; border-radius: 6px; font-size: 13px; letter-spacing: 1px; }
.shutdown-notice .open-letter:focus-visible { outline: 2px solid #752b3b; outline-offset: 5px; }
.shutdown-banner { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 30px; align-items: center; margin: 0 0 36px; padding: 30px 32px 20px; overflow: hidden; border: 1px solid #dfc5c7; border-radius: 14px; background: radial-gradient(ellipse at top left, #fffaf5, #f4e6e4); }
.shutdown-banner-copy h2 { margin: 12px 0 8px; color: #532d36; font: 500 30px/1.4 var(--entry-serif); letter-spacing: 1px; }
.shutdown-banner-copy > p { margin: 0; color: #927478; font: 14px/1.8 var(--entry-serif); }
.shutdown-banner .shutdown-clock { gap: 8px; }
.shutdown-banner .shutdown-unit { gap: 6px; }
.shutdown-banner .shutdown-unit strong { width: 58px; height: 63px; background: #fffaf6b3; border-color: #e3cdce; font-size: 35px; }
.shutdown-banner .shutdown-colon { padding-top: 10px; font-size: 30px; }
.shutdown-banner .shutdown-date { margin-top: 10px; text-align: center; font-size: 10px; }
.shutdown-banner-note { grid-column: 1 / -1; margin: 4px 0 0; padding-top: 15px; border-top: 1px solid #e4cfd0; color: #967e7f; font-size: 11px; line-height: 1.8; }
.shutdown-closed { padding-top: 56px; padding-bottom: 42px; }
.shutdown-closed .shutdown-explanation { margin-bottom: 0; }
.shutdown-renewal { margin-top: 26px; padding-top: 20px; border-top: 1px solid #e4d6d0; }
.shutdown-renewal p { color: #897674; font-size: 13px; line-height: 1.9; margin: 0 0 18px; }
.shutdown-renewal .shutdown-renewal-hint { margin: 14px 0 0; font-size: 11px; }
@media (max-width: 700px) {
  .shutdown-notice { padding: 32px 24px; }
  .shutdown-notice h1 { font-size: 29px; }
  .shutdown-notice .shutdown-clock { gap: 9px; }
  .shutdown-notice .shutdown-unit strong { width: 66px; height: 74px; font-size: 39px; }
  .shutdown-banner { grid-template-columns: 1fr; gap: 24px; padding: 24px 20px 18px; margin-bottom: 26px; text-align: center; }
  .shutdown-banner-copy h2 { font-size: 27px; }
  .shutdown-banner .shutdown-unit strong { width: 68px; height: 72px; font-size: 39px; }
  .shutdown-banner-note { margin-top: 0; text-align: left; }
}
@media (prefers-reduced-motion: no-preference) {
  .shutdown-notice { animation: shutdown-arrive .45s ease-out; }
  @keyframes shutdown-arrive { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
}