:root {
  --museum-paper: #f5f0e5;
  --museum-paper-deep: #e8deca;
  --museum-ink: #35291d;
  --museum-muted: #766956;
  --museum-gold: #9b783f;
  --museum-brown: #493523;
  --museum-line: rgba(126, 96, 53, .28);
}

.museum-topic-page,
.room4-index-page {
  color: var(--museum-ink);
  font-family: Georgia, "Noto Serif SC", "Songti SC", SimSun, serif;
}

.museum-topic-page .mp-hero { padding: 42px 0 46px; }
.museum-topic-page .mp-hero-kicker { color: var(--museum-gold); font-size: 10px; letter-spacing: .24em; }
.museum-topic-page .mp-hero h1 { font-size: 40px; font-weight: 400; letter-spacing: .03em; line-height: 1.3; }
.museum-topic-page .mp-hero p { color: var(--museum-muted); }
.museum-topic-page .mp-section-head { gap: 14px; }
.museum-topic-page .mp-section-head h2 { font-weight: 500; letter-spacing: .04em; }
.museum-topic-page .mp-section-head .en { color: var(--museum-gold); font-size: 10px; letter-spacing: .18em; }
.museum-topic-page .mp-section-head .rule { background: var(--museum-line); }
.museum-topic-page .mp-empty { padding: 28px 18px; border-top: 1px solid var(--museum-line); border-bottom: 1px solid var(--museum-line); color: var(--museum-muted); font-style: normal; line-height: 1.8; }
.letter-topic-page .mp-snowwall { border-radius: 2px; border-color: var(--museum-line); box-shadow: none; }

.museum-system-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 68px;
  border-bottom: 1px solid var(--museum-line);
}

.museum-breadcrumbs,
.museum-header-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.museum-breadcrumbs a,
.museum-header-links a {
  color: var(--museum-muted);
  font-size: 12px;
  text-decoration: none;
}

.museum-breadcrumbs a:hover,
.museum-header-links a:hover { color: var(--museum-brown); }
.museum-breadcrumbs i { color: rgba(118, 105, 86, .52); font-style: normal; }

.museum-room-mark {
  color: var(--museum-gold);
  font: 9px Georgia, serif;
  letter-spacing: .18em;
  text-transform: uppercase;
}

.museum-title-system { text-align: center; }
.museum-title-system .museum-room-mark { display: block; }
.museum-title-system h1 { margin: 12px 0 11px; color: var(--museum-ink); font-size: 42px; font-weight: 400; line-height: 1.2; letter-spacing: 0; }
.museum-title-system .museum-title-rule { width: 58px; height: 1px; margin: 0 auto 16px; background: var(--museum-gold); opacity: .68; }
.museum-title-system > p { max-width: 650px; margin: 0 auto; color: var(--museum-muted); font-size: 13px; line-height: 1.9; }

.museum-column-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin: 46px 0 20px;
}

.museum-column-heading h2 { margin: 0; color: var(--museum-ink); font-size: 22px; font-weight: 500; white-space: nowrap; }
.museum-column-heading span { color: var(--museum-gold); font: 9px Georgia, serif; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; }
.museum-column-heading::after { content: ""; flex: 1; height: 1px; background: var(--museum-line); }

.museum-button-primary,
.museum-button-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid var(--museum-brown);
  border-radius: 2px;
  font-size: 12px;
  text-decoration: none;
}

.museum-button-primary { background: var(--museum-brown); color: #f4ead4; }
.museum-button-primary:hover { background: #5b432d; }
.museum-button-secondary { border-color: var(--museum-line); background: transparent; color: var(--museum-brown); }
.museum-button-secondary:hover { border-color: var(--museum-gold); background: rgba(255, 255, 255, .36); }
.museum-button-secondary[aria-disabled="true"] { color: #9c9385; cursor: default; }

.museum-light-container { border: 1px solid var(--museum-line); background: rgba(255, 252, 244, .38); }

.museum-empty-state {
  padding: 28px 18px;
  border-top: 1px solid var(--museum-line);
  border-bottom: 1px solid var(--museum-line);
  color: var(--museum-muted);
  font-size: 13px;
  line-height: 1.8;
  text-align: center;
}

.museum-index-list { border-top: 1px solid var(--museum-line); }
.museum-index-item {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr) auto;
  align-items: center;
  gap: 14px;
  min-height: 68px;
  padding: 10px 4px;
  border-bottom: 1px solid var(--museum-line);
  color: var(--museum-ink);
  text-decoration: none;
}
.museum-index-item em { color: var(--museum-gold); font: 9px Georgia, serif; font-style: normal; letter-spacing: .1em; }
.museum-index-item strong, .museum-index-item small { display: block; }
.museum-index-item strong { font-size: 15px; font-weight: 500; }
.museum-index-item small { margin-top: 3px; color: var(--museum-muted); font-size: 10px; }
.museum-index-item > span:last-child { color: var(--museum-gold); font-size: 11px; }
.museum-index-item:hover { background: rgba(255, 255, 255, .28); }

@media (max-width: 680px) {
  .museum-system-header { align-items: flex-start; min-height: 0; padding: 17px 0; }
  .museum-breadcrumbs { gap: 5px; max-width: 70%; }
  .museum-breadcrumbs a, .museum-header-links a { font-size: 11px; }
  .museum-header-links a:not(:last-child) { display: none; }
  .museum-title-system h1 { font-size: 31px; }
  .museum-title-system > p { font-size: 12px; line-height: 1.75; }
  .museum-column-heading { gap: 9px; margin-top: 36px; }
  .museum-column-heading h2 { font-size: 19px; }
  .museum-column-heading span { font-size: 8px; letter-spacing: .13em; }
  .museum-index-item { grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; }
  .museum-topic-page .mp-hero { padding: 30px 0 34px; }
  .museum-topic-page .mp-hero h1 { font-size: 28px; letter-spacing: .02em; }
  .museum-topic-page .mp-hero-kicker { font-size: 8px; letter-spacing: .16em; }
  .gift-topic-page .mp-months,
  .letter-topic-page .mp-months { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 7px; scrollbar-width: thin; }
  .gift-topic-page .mp-month-btn,
  .letter-topic-page .mp-month-btn { flex: 0 0 auto; }
}