/*
 * HYEMININE clean card redesign v2
 * Loaded after every legacy style block so the old Y2K theme cannot win.
 */

:root {
  --clean-bg: #f6f7f9;
  --clean-card: #ffffff;
  --clean-text: #22252b;
  --clean-muted: #7c838f;
  --clean-line: #e5e8ed;
  --clean-pink: #ee6f8c;
  --clean-pink-soft: #fff0f3;
  --clean-shadow: 0 8px 24px rgba(34, 42, 58, .065);
}

html,
body {
  min-width: 0 !important;
  margin: 0 !important;
  background: var(--clean-bg) !important;
  color: var(--clean-text) !important;
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif !important;
}

body::before,
body::after {
  display: none !important;
}

/* Header: logo at upper-left, one compact menu trigger beside it. */
body > header {
  position: sticky !important;
  z-index: 3000 !important;
  top: 0 !important;
  width: 100% !important;
  height: 76px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--clean-line) !important;
  background: rgba(255, 255, 255, .97) !important;
  box-shadow: none !important;
  backdrop-filter: blur(12px);
}

body > header .header-inner {
  display: flex !important;
  align-items: center !important;
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body > header .brand-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
}

body > header .mobile-menu-brand-wrap {
  display: flex !important;
  flex-direction: row-reverse !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 11px !important;
}

body > header .brand-with-player {
  display: flex !important;
  align-items: center !important;
}

body > header .brand {
  display: inline-flex !important;
  align-items: center !important;
  margin: 0 !important;
  color: #16181d !important;
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif !important;
  font-size: 27px !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  letter-spacing: -1.5px !important;
  text-decoration: none !important;
  text-shadow: none !important;
}

body > header .brand span {
  margin: -7px 0 0 5px !important;
  color: #ff91aa !important;
  font-size: 16px !important;
}

body > header .mobile-drawer-toggle {
  display: flex !important;
  flex: 0 0 42px !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 5px !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body > header .mobile-drawer-toggle span {
  display: block !important;
  width: 18px !important;
  height: 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 99px !important;
  background: #31353d !important;
}

body > header .persistent-bgm {
  margin-left: 16px !important;
}

body > header .header-actions {
  display: flex !important;
  align-items: center !important;
}

body > header .member-link,
body > header .admin-badge {
  border-color: var(--clean-line) !important;
  border-radius: 9px !important;
  background: #fff !important;
  color: #555c67 !important;
  box-shadow: none !important;
}

/* One left slide drawer on both desktop and mobile. */
#mobileMainDrawer {
  display: flex !important;
  position: fixed !important;
  z-index: 4100 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  grid-template-columns: none !important;
  flex-direction: column !important;
  align-items: stretch !important;
  width: 286px !important;
  max-width: min(86vw, 286px) !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 18px 14px 28px !important;
  gap: 3px !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  border: 0 !important;
  border-right: 1px solid var(--clean-line) !important;
  background: #fff !important;
  box-shadow: 18px 0 50px rgba(20, 27, 40, .14) !important;
  white-space: normal !important;
  transform: translate3d(-105%, 0, 0) !important;
  transition: transform .24s ease !important;
}

body.mobile-drawer-open #mobileMainDrawer {
  transform: translate3d(0, 0, 0) !important;
}

body.mobile-drawer-open {
  overflow: hidden !important;
}

#mobileMainDrawer .mobile-drawer-heading {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  margin: 0 0 8px !important;
  padding: 4px 7px 15px !important;
  border-bottom: 1px solid var(--clean-line) !important;
}

#mobileMainDrawer .mobile-drawer-heading strong {
  color: #24272d !important;
  font-size: 18px !important;
  font-weight: 850 !important;
}

#mobileMainDrawer .mobile-drawer-close {
  display: grid !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f3f4f6 !important;
  color: #555b64 !important;
  font-size: 22px !important;
  line-height: 1 !important;
}

#mobileMainDrawer > .nav-button,
#mobileMainDrawer > .nav-dropdown,
#mobileMainDrawer > .nav-dropdown > .nav-button {
  flex: 0 0 auto !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
}

#mobileMainDrawer > .nav-button,
#mobileMainDrawer > .nav-dropdown > .nav-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  min-height: 43px !important;
  padding: 0 12px !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: transparent !important;
  color: #454b55 !important;
  font-size: 14px !important;
  font-weight: 750 !important;
  line-height: 1.2 !important;
  letter-spacing: -.25px !important;
  text-align: left !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  white-space: nowrap !important;
}

#mobileMainDrawer > .nav-button::before,
#mobileMainDrawer > .nav-dropdown > .nav-button::before {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 25px !important;
  width: 25px !important;
  height: 25px !important;
  border-radius: 8px !important;
  background: #f1f3f6 !important;
  color: #59616e !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

#mobileMainDrawer > a[href*="page=home"]::before { content: "⌂"; background: #fff0f3 !important; color: #e55e7d !important; }
#mobileMainDrawer > a[href*="page=notice"]::before { content: "!"; background: #fff4e5 !important; color: #dd8a28 !important; }
#mobileMainDrawer > a[href*="page=board"]::before { content: "≡"; background: #eaf2ff !important; color: #4d7ed1 !important; }
#mobileMainDrawer > a[href*="page=share"]::before { content: "↗"; background: #edf8f3 !important; color: #4b9a73 !important; }
#mobileMainDrawer > a[href*="page=encyclopedia"]::before { content: "책"; background: #f0eeff !important; color: #705fd0 !important; font-size: 9px !important; }
#mobileMainDrawer > a[href*="page=emoji"]::before { content: "☺"; background: #fff0f6 !important; color: #dd6697 !important; }
#mobileMainDrawer > a[href*="page=attendance"]::before { content: "★"; background: #fff7df !important; color: #d99b1d !important; }
#mobileMainDrawer > .playground-dropdown > .nav-button::before { content: "▶"; background: #eaf8ee !important; color: #45a563 !important; font-size: 9px !important; }
#mobileMainDrawer > a[href*="page=office"]::before { content: "일"; background: #eef1f5 !important; color: #667085 !important; font-size: 9px !important; }
#mobileMainDrawer > a[href*="page=worries"]::before { content: "?"; background: #eaf8f4 !important; color: #31967b !important; }
#mobileMainDrawer > .coinshop-dropdown > .nav-button::before { content: "C"; background: #fff6dc !important; color: #d6941c !important; }
#mobileMainDrawer > a[href*="page=inquiries"]::before { content: "✉"; background: #fff0eb !important; color: #d96f50 !important; }
#mobileMainDrawer > a[href*="page=admin"]::before { content: "⚙"; background: #eff1f5 !important; color: #5e6672 !important; }

#mobileMainDrawer > .nav-button:hover,
#mobileMainDrawer > .nav-button.active,
#mobileMainDrawer > .nav-dropdown > .nav-button:hover,
#mobileMainDrawer > .nav-dropdown > .nav-button.active {
  background: var(--clean-pink-soft) !important;
  color: #db5272 !important;
}

#mobileMainDrawer .dropdown-arrow {
  margin-left: auto !important;
  color: #9aa0aa !important;
  font-size: 10px !important;
}

#mobileMainDrawer .mobile-drawer-submenu {
  position: static !important;
  display: block !important;
  width: auto !important;
  min-width: 0 !important;
  margin: 3px 0 6px 36px !important;
  padding: 5px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f6f7f9 !important;
  box-shadow: none !important;
}

#mobileMainDrawer .mobile-drawer-submenu[hidden] {
  display: none !important;
}

#mobileMainDrawer .mobile-drawer-submenu .nav-button {
  display: block !important;
  width: 100% !important;
  min-height: 35px !important;
  margin: 0 !important;
  padding: 9px 10px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #666d78 !important;
  font-size: 12px !important;
  font-weight: 650 !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

#mobileMainDrawer .mobile-drawer-submenu .nav-button:hover,
#mobileMainDrawer .mobile-drawer-submenu .nav-button.active {
  background: #fff !important;
  color: #db5272 !important;
}

.mobile-drawer-overlay {
  position: fixed !important;
  z-index: 4000 !important;
  inset: 0 !important;
  display: block !important;
  background: rgba(22, 27, 37, .38) !important;
  backdrop-filter: blur(2px);
}

.mobile-drawer-overlay[hidden] {
  display: none !important;
}

.modern-drawer-counter {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 18px !important;
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 15px 12px !important;
  border-top: 1px solid var(--clean-line) !important;
  color: #8a909b !important;
  font-size: 10px !important;
  font-weight: 800 !important;
}

.modern-drawer-counter b {
  margin-left: 4px !important;
  color: #df5776 !important;
  font-size: 14px !important;
}

/* Remove every remaining visual shell from the former browser theme. */
.retro-browser-titlebar,
.retro-browser-toolbar,
.retro-address-bar,
.retro-favorites-bar,
.retro-site-strip,
.home-legacy-section {
  display: none !important;
}

.retro-browser-window {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: none !important;
  min-height: 0 !important;
  margin: 24px auto 72px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.retro-browser-window > main,
#pageContent {
  width: 100% !important;
  max-width: none !important;
  min-height: 60vh !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Every inner menu page receives a simple white shell. Game logic and boards stay untouched. */
#pageContent > .site-page:not(.modern-home).active {
  overflow: hidden !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 18px !important;
  background: #fff !important;
  box-shadow: var(--clean-shadow) !important;
}

#pageContent .page-header,
#pageContent .section-title,
#pageContent .panel-heading {
  border-color: var(--clean-line) !important;
  background: transparent !important;
  color: var(--clean-text) !important;
  text-shadow: none !important;
}

#pageContent input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
#pageContent textarea,
#pageContent select {
  border-color: #dfe3e9 !important;
  border-radius: 9px !important;
  background-color: #fff !important;
  box-shadow: none !important;
}

/* Main page: announcement + exact 3 by 3 card arrangement + one-line greeting. */
.modern-home.active {
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.modern-home-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 300px !important;
  align-items: start !important;
  width: 100% !important;
  gap: 18px !important;
}

.modern-home-center,
.modern-home-right {
  min-width: 0 !important;
}

.modern-announcement {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 0 14px !important;
  padding: 0 18px !important;
  gap: 12px !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 14px !important;
  background: #fff !important;
  box-shadow: var(--clean-shadow) !important;
}

.modern-announcement-label {
  flex: 0 0 auto !important;
  padding: 7px 11px !important;
  border-radius: 8px !important;
  background: var(--clean-pink-soft) !important;
  color: #dd5675 !important;
  font-size: 12px !important;
  font-weight: 900 !important;
}

.modern-announcement a,
.modern-announcement > span:not(.modern-announcement-label) {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #3a3f47 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  text-decoration: none !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.modern-announcement time {
  flex: 0 0 auto !important;
  margin-left: auto !important;
  color: #a0a6af !important;
  font-size: 11px !important;
}

.modern-shortcut-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  width: 100% !important;
  gap: 11px !important;
}

.modern-shortcut-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  min-height: 122px !important;
  margin: 0 !important;
  padding: 18px 15px !important;
  gap: 11px !important;
  overflow: hidden !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  color: var(--clean-text) !important;
  text-decoration: none !important;
  box-shadow: var(--clean-shadow) !important;
  transform: none !important;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease !important;
}

.modern-shortcut-card:hover {
  border-color: #d8dce3 !important;
  box-shadow: 0 13px 28px rgba(34, 42, 58, .1) !important;
  transform: translateY(-3px) !important;
}

.modern-shortcut-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 50px !important;
  width: 50px !important;
  height: 50px !important;
  margin: 0 !important;
  border-radius: 15px !important;
  background: #f0eeff !important;
  font-size: 25px !important;
  line-height: 1 !important;
}

.modern-shortcut-card > span:not(.modern-shortcut-icon) {
  display: block !important;
  min-width: 0 !important;
}

.modern-shortcut-card strong {
  display: block !important;
  margin: 0 0 5px !important;
  color: #292d34 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -.4px !important;
}

.modern-shortcut-card small {
  display: block !important;
  color: var(--clean-muted) !important;
  font-size: 10.5px !important;
  line-height: 1.45 !important;
  word-break: keep-all !important;
}

.modern-shortcut-card i {
  position: absolute !important;
  right: 12px !important;
  bottom: 10px !important;
  color: #bcc1c9 !important;
  font-size: 13px !important;
  font-style: normal !important;
}

.modern-shortcut-card.tone-green .modern-shortcut-icon { background: #e9f7ed !important; }
.modern-shortcut-card.tone-blue .modern-shortcut-icon { background: #eaf2ff !important; }
.modern-shortcut-card.tone-amber .modern-shortcut-icon { background: #fff3dc !important; }
.modern-shortcut-card.tone-slate .modern-shortcut-icon { background: #eef1f5 !important; }
.modern-shortcut-card.tone-mint .modern-shortcut-icon { background: #e8f8f3 !important; }
.modern-shortcut-card.tone-yellow .modern-shortcut-icon { background: #fff6d9 !important; }
.modern-shortcut-card.tone-coral .modern-shortcut-icon { background: #fff0ea !important; }
.modern-shortcut-card.tone-pink .modern-shortcut-icon { background: #ffedf3 !important; }

.modern-greeting-card,
.modern-side-card {
  border: 1px solid var(--clean-line) !important;
  border-radius: 15px !important;
  background: #fff !important;
  box-shadow: var(--clean-shadow) !important;
}

.modern-greeting-card {
  width: 100% !important;
  margin: 14px 0 0 !important;
  padding: 19px !important;
}

.modern-card-heading {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  min-height: 24px !important;
  margin: 0 0 14px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.modern-card-heading > div {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.modern-card-heading h2 {
  margin: 0 !important;
  color: #2b2f36 !important;
  font-size: 15px !important;
  font-weight: 850 !important;
  letter-spacing: -.35px !important;
}

.modern-card-heading small,
.modern-card-heading > b {
  color: #9298a2 !important;
  font-size: 10.5px !important;
  font-weight: 700 !important;
}

.modern-card-heading > a {
  padding: 5px 8px !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #707681 !important;
  font-size: 10px !important;
  text-decoration: none !important;
}

.modern-one-line-form {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: center !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modern-one-line-form .one-line-level-option {
  display: flex !important;
  align-items: center !important;
  gap: 4px !important;
  color: #767d88 !important;
  font-size: 10px !important;
  white-space: nowrap !important;
}

.modern-one-line-form > input[name="content"] {
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 13px !important;
  border: 1px solid #dfe3e9 !important;
  border-radius: 9px !important;
  background: #fafbfc !important;
  color: #333840 !important;
  font-size: 12px !important;
}

.modern-one-line-form > button {
  width: auto !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 17px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #343941 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.modern-one-line-list {
  width: 100% !important;
  margin: 12px 0 0 !important;
  padding: 0 !important;
}

.modern-one-line-list .one-line-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  min-height: 38px !important;
  margin: 0 !important;
  padding: 8px 3px !important;
  gap: 10px !important;
  border: 0 !important;
  border-bottom: 1px solid #f0f1f3 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.modern-one-line-list .one-line-content {
  min-width: 0 !important;
  color: #545a64 !important;
  font-size: 11.5px !important;
}

.modern-one-line-list time {
  flex: 0 0 auto !important;
  color: #a1a6af !important;
  font-size: 10px !important;
}

/* Right column: login, notice, share, today's named visitors. */
.modern-home-right {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.modern-side-card {
  width: 100% !important;
  margin: 0 !important;
  padding: 17px !important;
}

.modern-login-form {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 8px !important;
}

.modern-login-form > input {
  width: 100% !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  border: 1px solid #dfe3e9 !important;
  border-radius: 9px !important;
  background: #fafbfc !important;
  font-size: 12px !important;
}

.modern-login-form > label {
  color: #767d88 !important;
  font-size: 10.5px !important;
}

.modern-login-form > button {
  width: 100% !important;
  height: 41px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #343941 !important;
  color: #fff !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  box-shadow: none !important;
}

.modern-login-form > .modern-register {
  height: 26px !important;
  background: transparent !important;
  color: #777e88 !important;
  font-size: 10.5px !important;
}

.modern-profile {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 5px !important;
  text-align: center !important;
}

.modern-profile > span {
  display: grid !important;
  place-items: center !important;
  width: 56px !important;
  height: 56px !important;
  border-radius: 50% !important;
  background: var(--clean-pink-soft) !important;
  font-size: 28px !important;
}

.modern-profile small {
  color: #878e99 !important;
  font-size: 10.5px !important;
}

.modern-profile > b {
  margin-top: 3px !important;
  color: #555b65 !important;
  font-size: 11px !important;
}

.modern-profile em {
  color: #df5776 !important;
  font-style: normal !important;
}

.modern-profile > div {
  display: flex !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

.modern-profile a,
.modern-profile button {
  padding: 7px 10px !important;
  border: 1px solid var(--clean-line) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #626974 !important;
  font-size: 10px !important;
  text-decoration: none !important;
  box-shadow: none !important;
}

.modern-post-card ol {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

.modern-post-card li {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.modern-post-card li > a {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 34px !important;
  padding: 7px 1px !important;
  gap: 7px !important;
  border-bottom: 1px solid #f0f1f3 !important;
  color: #555b65 !important;
  font-size: 11px !important;
  text-decoration: none !important;
}

.modern-post-card li:last-child > a {
  border-bottom: 0 !important;
}

.modern-post-card li span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.modern-post-card li time {
  flex: 0 0 auto !important;
  color: #a2a7b0 !important;
  font-size: 9.5px !important;
}

.modern-visitor-list {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  width: 100% !important;
  gap: 8px !important;
}

.modern-visitor-list > span {
  display: flex !important;
  align-items: center !important;
  min-width: 0 !important;
  gap: 7px !important;
}

.modern-visitor-list i {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 27px !important;
  width: 27px !important;
  height: 27px !important;
  border-radius: 50% !important;
  background: #eef2f7 !important;
  color: #647188 !important;
  font-size: 10px !important;
  font-style: normal !important;
}

.modern-visitor-list b {
  min-width: 0 !important;
  overflow: hidden !important;
  color: #606772 !important;
  font-size: 10.5px !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.modern-home .empty {
  margin: 0 !important;
  color: #969ca6 !important;
  font-size: 11px !important;
}

@media (max-width: 980px) {
  body > header {
    height: 66px !important;
  }

  body > header .header-inner,
  .retro-browser-window {
    width: min(760px, calc(100% - 24px)) !important;
  }

  body > header .brand {
    font-size: 23px !important;
  }

  body > header .persistent-bgm,
  body > header .header-actions .member-menu {
    display: none !important;
  }

  .retro-browser-window {
    margin-top: 16px !important;
  }

  .modern-home-layout {
    grid-template-columns: 1fr !important;
  }

  .modern-home-right {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
  }
}

@media (max-width: 620px) {
  body > header .header-inner,
  .retro-browser-window {
    width: calc(100% - 20px) !important;
  }

  body > header .brand {
    font-size: 21px !important;
  }

  body > header .mobile-drawer-toggle {
    flex-basis: 38px !important;
    width: 38px !important;
    height: 38px !important;
  }

  .modern-announcement {
    min-height: 50px !important;
    padding: 0 11px !important;
    margin-bottom: 10px !important;
  }

  .modern-announcement-label {
    padding: 6px 8px !important;
  }

  .modern-shortcut-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .modern-shortcut-card {
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 105px !important;
    padding: 10px 3px !important;
    gap: 6px !important;
    text-align: center !important;
  }

  .modern-shortcut-icon {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 42px !important;
    border-radius: 12px !important;
    font-size: 21px !important;
  }

  .modern-shortcut-card strong {
    margin: 0 !important;
    font-size: 12px !important;
  }

  .modern-shortcut-card small,
  .modern-shortcut-card i {
    display: none !important;
  }

  .modern-greeting-card,
  .modern-side-card {
    padding: 14px !important;
  }

  .modern-one-line-form {
    grid-template-columns: minmax(0, 1fr) auto !important;
  }

  .modern-one-line-form .one-line-level-option {
    grid-column: 1 / -1 !important;
  }

  .modern-one-line-list .one-line-item:nth-child(n + 5) {
    display: none !important;
  }

  .modern-home-right {
    display: flex !important;
  }
}