/*
 * COMPLETE WHITE SYSTEM v4
 * Final, site-wide visual system. It is intentionally loaded after every legacy file.
 */

:root {
  --pixel-font: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif !important;
  --hm-pixel: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif !important;
  --clean-page: #f5f6f8;
  --clean-surface: #ffffff;
  --clean-surface-soft: #f7f8fa;
  --clean-border: #e3e6eb;
  --clean-border-strong: #d7dbe2;
  --clean-ink: #23262c;
  --clean-copy: #555d68;
  --clean-muted: #858c96;
  --clean-action: #30353d;
  --clean-shadow: 0 8px 24px rgba(28, 36, 50, .055);
}

/* Remove the pixel/dot typeface everywhere, including pages injected by PJAX. */
body.clean-white-v4,
body.clean-white-v4 #brandHomeLink,
body.clean-white-v4 #mobileMainDrawer,
body.clean-white-v4 #mobileMainDrawer *,
body.clean-white-v4 #pageContent,
body.clean-white-v4 #pageContent .site-page.active,
body.clean-white-v4 #pageContent .site-page.active *,
body.clean-white-v4 dialog,
body.clean-white-v4 dialog *,
body.clean-white-v4 footer,
body.clean-white-v4 footer * {
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif !important;
}

body.clean-white-v4 {
  min-width: 0 !important;
  background: var(--clean-page) !important;
  background-color: var(--clean-page) !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
}

body.clean-white-v4::before,
body.clean-white-v4::after,
body.clean-white-v4 #brandHomeLink::before,
body.clean-white-v4 #brandHomeLink::after,
body.clean-white-v4 #pageContent .site-page.active::before,
body.clean-white-v4 #pageContent .site-page.active::after,
body.clean-white-v4 .encyclopedia-heading::before,
body.clean-white-v4 .encyclopedia-card::before,
body.clean-white-v4 .one-line-item::before,
body.clean-white-v4 footer::before,
body.clean-white-v4 footer::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

/* Header and drawer */
body.clean-white-v4 > header {
  position: sticky !important;
  z-index: 6000 !important;
  top: 0 !important;
  width: 100vw !important;
  max-width: none !important;
  height: 72px !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 > header .header-inner {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: none !important;
  height: 100% !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

body.clean-white-v4 #brandHomeLink {
  color: #171a1f !important;
  font-size: 26px !important;
  font-weight: 900 !important;
  letter-spacing: -1.4px !important;
  text-transform: none !important;
  text-shadow: none !important;
}

body.clean-white-v4 #mobileDrawerToggle {
  position: relative !important;
  z-index: 6100 !important;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  touch-action: manipulation !important;
  width: 42px !important;
  min-width: 42px !important;
  height: 42px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid var(--clean-border) !important;
  border-radius: 11px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

body.clean-white-v4 #mobileDrawerToggle span {
  width: 18px !important;
  height: 2px !important;
  background: #30353d !important;
  box-shadow: none !important;
}

body.clean-white-v4 #mobileMainDrawer {
  position: fixed !important;
  z-index: 9001 !important;
  top: 0 !important;
  bottom: 0 !important;
  left: 0 !important;
  display: flex !important;
  visibility: visible !important;
  flex-direction: column !important;
  width: 286px !important;
  max-width: 86vw !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-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: 18px 0 52px rgba(25, 32, 45, .15) !important;
  transform: translate3d(-105%, 0, 0) !important;
  transition: transform .22s ease !important;
  pointer-events: auto !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
}

body.clean-white-v4.mobile-drawer-open #mobileMainDrawer,
body.clean-white-v4 #mobileMainDrawer[data-clean-open="yes"] {
  transform: translate3d(0, 0, 0) !important;
}

body.clean-white-v4 #mobileDrawerOverlay {
  position: fixed !important;
  z-index: 9000 !important;
  inset: 0 !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  background: rgba(24, 29, 39, .38) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

body.clean-white-v4.mobile-drawer-open #mobileMainDrawer {
  z-index: 2147483647 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
  opacity: 1 !important;
}

body.clean-white-v4.mobile-drawer-open #mobileMainDrawer,
body.clean-white-v4.mobile-drawer-open #mobileMainDrawer * {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

body.clean-white-v4.mobile-drawer-open #mobileDrawerOverlay {
  z-index: 2147483645 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

body.clean-white-v4.mobile-drawer-open > header {
  z-index: 2147483646 !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  filter: none !important;
}

body.clean-white-v4 #mobileDrawerOverlay[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

body.clean-white-v4 #mobileMainDrawer .mobile-drawer-heading {
  min-height: 45px !important;
  margin: 0 0 8px !important;
  padding: 3px 7px 14px !important;
  border: 0 !important;
  border-bottom: 1px solid var(--clean-border) !important;
  background: #fff !important;
  color: var(--clean-ink) !important;
  box-shadow: none !important;
}

body.clean-white-v4 #mobileDrawerClose {
  display: grid !important;
  visibility: visible !important;
  place-items: center !important;
  width: 34px !important;
  height: 34px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #f1f3f5 !important;
  color: #4c535e !important;
  font-size: 21px !important;
  pointer-events: auto !important;
  cursor: pointer !important;
}

body.clean-white-v4 #mobileMainDrawer .nav-button,
body.clean-white-v4 #mobileMainDrawer .nav-dropdown > .nav-button {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  margin: 0 !important;
  padding: 0 12px !important;
  gap: 10px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #fff !important;
  background-image: none !important;
  color: #454c57 !important;
  font-size: 13px !important;
  font-weight: 750 !important;
  letter-spacing: -.2px !important;
  text-align: left !important;
  text-decoration: none !important;
  text-shadow: none !important;
  box-shadow: none !important;
  cursor: pointer !important;
}

/* Legacy nav underline must never remain after a drawer item is selected. */
body.clean-white-v4 #mobileMainDrawer .nav-button::after,
body.clean-white-v4 #mobileMainDrawer .nav-button:hover::after,
body.clean-white-v4 #mobileMainDrawer .nav-button:focus::after,
body.clean-white-v4 #mobileMainDrawer .nav-button:active::after,
body.clean-white-v4 #mobileMainDrawer .nav-button.active::after,
body.clean-white-v4 #mobileMainDrawer .nav-button:visited::after {
  display: none !important;
  content: none !important;
  width: 0 !important;
  height: 0 !important;
  background: none !important;
  transform: none !important;
}

body.clean-white-v4 #mobileMainDrawer .nav-button:focus:not(:focus-visible) {
  outline: 0 !important;
}

body.clean-white-v4 #mobileMainDrawer .nav-button:hover,
body.clean-white-v4 #mobileMainDrawer .nav-button.active,
body.clean-white-v4 #mobileMainDrawer .nav-dropdown > .nav-button:hover,
body.clean-white-v4 #mobileMainDrawer .nav-dropdown > .nav-button.active {
  border: 0 !important;
  background: #f1f3f5 !important;
  background-image: none !important;
  color: #20242a !important;
}

body.clean-white-v4 #mobileMainDrawer .mobile-drawer-submenu {
  position: static !important;
  width: auto !important;
  margin: 3px 0 6px 36px !important;
  padding: 5px !important;
  border: 0 !important;
  border-radius: 9px !important;
  background: #f6f7f9 !important;
  background-image: none !important;
  box-shadow: none !important;
}

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

body.clean-white-v4 #mobileMainDrawer .mobile-drawer-submenu .nav-button {
  min-height: 34px !important;
  padding: 8px 10px !important;
  border-radius: 7px !important;
  background: transparent !important;
  color: #626a75 !important;
  font-size: 12px !important;
}

body.clean-white-v4 #mobileMainDrawer .mobile-drawer-submenu .nav-button:hover,
body.clean-white-v4 #mobileMainDrawer .mobile-drawer-submenu .nav-button.active {
  background: #fff !important;
  color: #252a31 !important;
}

body.clean-white-v4 #mobileMainDrawer .modern-drawer-counter {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  color: #818893 !important;
}

body.clean-white-v4 #mobileMainDrawer .modern-drawer-counter b {
  color: #343a43 !important;
}

/* Page canvas and exact desktop width */
body.clean-white-v4 .retro-browser-window {
  width: min(1180px, calc(100% - 32px)) !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 22px auto 72px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent > .site-page.active:not(.modern-home) {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding-top: 0 !important;
  overflow: hidden !important;
  border: 1px solid var(--clean-border) !important;
  border-radius: 16px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  box-shadow: var(--clean-shadow) !important;
}

/* One consistent white component system across every menu page. */
body.clean-white-v4 #pageContent .site-page.active :is(
  [class$="-shell"],
  [class*="-shell "],
  [class$="-panel"],
  [class*="-panel "],
  [class$="-card"],
  [class*="-card "],
  [class$="-header"],
  [class*="-header "],
  [class$="-heading"],
  [class*="-heading "],
  [class$="-section"],
  [class*="-section "]
):not(.memory-card):not(.mine-cell):not(.daily-bingo-cell):not(.lottery-scratch-card) {
  border-color: var(--clean-border) !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  .page-header,
  .board-page-header,
  .game-head,
  .feature-heading,
  .panel-heading,
  .section-title,
  .attendance-header,
  .daily-bingo-head,
  .encyclopedia-heading,
  .waste-hero,
  .emoji-page-header,
  .claw-title-card,
  .lottery-title-card,
  .daily-fortune-card-head,
  .playground-hub-header,
  .admin-header
) {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(h1, h2, h3, h4, legend) {
  color: var(--clean-ink) !important;
  text-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.page-header, .board-page-header, .game-head, .feature-heading, .panel-heading, .section-title) p {
  color: var(--clean-muted) !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(input, textarea, select, .rich-post-editor) {
  border: 1px solid var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  button,
  .button-link,
  .gallery-button,
  .board-toolbar a,
  .board-write-bottom a,
  .pagination a,
  .game-tab,
  .attendance-tabs a,
  .name-category-tabs button,
  .name-category-tabs a,
  .waste-examples button,
  .coinshop-buy-button
):not(.mine-cell):not(.memory-card):not(.reaction-pad):not([data-color]) {
  border: 1px solid var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #414853 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  button[type="submit"],
  .game-begin,
  .quiz-start,
  .coinshop-buy-button,
  .attendance-check-button,
  .stamp-button,
  .name-generate-button
):not(.modern-register) {
  border-color: var(--clean-action) !important;
  background: var(--clean-action) !important;
  background-image: none !important;
  color: #fff !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  .pagination a.active,
  .game-tab.active,
  .attendance-tabs a.active,
  .board-section-tabs a.active,
  .name-category-tabs .active
) {
  border-color: var(--clean-action) !important;
  background: var(--clean-action) !important;
  color: #fff !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(table, .bbs-table) {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-copy) !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(table, .bbs-table) th {
  border-color: var(--clean-border) !important;
  background: #f5f6f8 !important;
  background-image: none !important;
  color: #48505b !important;
  text-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(table, .bbs-table) td {
  border-color: #eceef1 !important;
  background: #fff !important;
  color: #555d68 !important;
}

/* Page-specific legacy themes neutralized. */
body.clean-white-v4 #pageContent :is(
  .mypage-y2k-header,
  .mypage-y2k-panel,
  .mypage-info-card,
  .mypage-login-required,
  .daily-fortune-shell,
  .daily-fortune-form,
  .daily-fortune-card,
  .daily-fortune-score,
  .daily-fortune-lucky,
  .daily-fortune-rabbit,
  .playground-card-fortune,
  .pc-daily-fortune-card,
  .mbti-selector-card,
  .mbti-result,
  .quiz-intro,
  .quiz-stage,
  .quiz-result,
  .encyclopedia-card,
  .waste-result-card,
  .name-dictionary-tools,
  .emoji-card,
  .office-card,
  .drawing-panel,
  .attendance-shell,
  .coinshop-section,
  .admin-grid > *,
  .admin-unique-visitors
) {
  border-color: var(--clean-border) !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: var(--clean-shadow) !important;
}

body.clean-white-v4 .mypage-y2k-titlebar {
  display: none !important;
}

body.clean-white-v4 .mypage-y2k-welcome,
body.clean-white-v4 .mypage-panel-heading,
body.clean-white-v4 .daily-fortune-card-head,
body.clean-white-v4 .emoji-page-header,
body.clean-white-v4 .encyclopedia-heading,
body.clean-white-v4 .waste-hero {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 :is(.mypage-pixel-bunny, .mypage-card-icon, .mypage-panel-heading > span, .encyclopedia-card-icon, .waste-hero-icon, .playground-card-icon) {
  border-color: var(--clean-border) !important;
  background-color: #f2f4f6 !important;
  background-image: none !important;
  color: #59616c !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Main page proportions: 860px content + 300px right rail + 20px gap. */
body.clean-white-v4 #pageContent .modern-home.active {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Editable greeting across the top of the home page. */
body.clean-white-v4 .modern-welcome-card {
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
  min-height: 106px !important;
  margin: 0 0 14px !important;
  padding: 21px 24px !important;
  gap: 16px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--clean-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  box-shadow: var(--clean-shadow) !important;
}

body.clean-white-v4 .modern-welcome-icon {
  display: grid !important;
  flex: 0 0 48px !important;
  place-items: center !important;
  width: 48px !important;
  height: 48px !important;
  border-radius: 13px !important;
  background: #f2f4f6 !important;
  font-size: 24px !important;
}

body.clean-white-v4 .modern-welcome-copy {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}

body.clean-white-v4 .modern-welcome-card h1 {
  margin: 0 0 6px !important;
  color: #20242a !important;
  font-size: 21px !important;
  font-weight: 850 !important;
  line-height: 1.3 !important;
  letter-spacing: -.65px !important;
}

body.clean-white-v4 .modern-welcome-card p {
  margin: 0 !important;
  color: #6d747e !important;
  font-size: 13px !important;
  line-height: 1.65 !important;
  word-break: keep-all !important;
}

body.clean-white-v4 #pageContent .modern-welcome-card .modern-welcome-edit {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 34px !important;
  margin: 0 0 0 12px !important;
  padding: 0 11px !important;
  border: 1px solid var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #5f6670 !important;
  font-size: 11px !important;
  font-weight: 750 !important;
  box-shadow: none !important;
}

body.clean-white-v4 .modern-home-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 860px) 300px !important;
  align-items: start !important;
  justify-content: space-between !important;
  width: 100% !important;
  gap: 20px !important;
}

body.clean-white-v4 .modern-home-center {
  width: 100% !important;
  min-width: 0 !important;
}

body.clean-white-v4 .modern-home-right {
  display: flex !important;
  flex-direction: column !important;
  width: 300px !important;
  min-width: 300px !important;
  gap: 12px !important;
}

body.clean-white-v4 .modern-announcement {
  width: 100% !important;
  min-height: 58px !important;
  margin: 0 0 12px !important;
  padding: 0 17px !important;
  border: 1px solid var(--clean-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  box-shadow: var(--clean-shadow) !important;
}

body.clean-white-v4 .modern-announcement-label {
  border: 0 !important;
  border-radius: 7px !important;
  background: #f1f3f5 !important;
  color: #343a43 !important;
}

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

body.clean-white-v4 .modern-shortcut-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-start !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 112px !important;
  margin: 0 !important;
  padding: 16px 14px !important;
  gap: 11px !important;
  border: 1px solid var(--clean-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-align: left !important;
  text-decoration: none !important;
  box-shadow: var(--clean-shadow) !important;
}

body.clean-white-v4 .modern-shortcut-icon {
  display: grid !important;
  place-items: center !important;
  flex: 0 0 46px !important;
  width: 46px !important;
  height: 46px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 13px !important;
  font-size: 23px !important;
  box-shadow: none !important;
}

body.clean-white-v4 .modern-shortcut-card strong {
  display: block !important;
  margin: 0 0 4px !important;
  color: #282c33 !important;
  font-size: 14px !important;
  font-weight: 850 !important;
}

body.clean-white-v4 .modern-shortcut-card small {
  color: #7d848e !important;
  font-size: 10px !important;
  line-height: 1.45 !important;
}

body.clean-white-v4 :is(.modern-greeting-card, .modern-side-card) {
  width: 100% !important;
  border: 1px solid var(--clean-border) !important;
  border-radius: 13px !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: var(--clean-shadow) !important;
}

body.clean-white-v4 .modern-greeting-card {
  margin-top: 12px !important;
  padding: 18px !important;
}

body.clean-white-v4 .modern-side-card {
  margin: 0 !important;
  padding: 16px !important;
}

body.clean-white-v4 .modern-card-heading {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

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

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

body.clean-white-v4 .modern-one-line-form > input[name="content"] {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  margin: 0 !important;
  padding: 0 14px !important;
  border: 1px solid var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: var(--clean-ink) !important;
}

body.clean-white-v4 .modern-one-line-form > button {
  grid-column: 2 !important;
  width: 56px !important;
  min-width: 56px !important;
  height: 32px !important;
  margin: 0 !important;
  padding: 0 5px !important;
  border: 1px solid var(--clean-action) !important;
  border-radius: 7px !important;
  background: var(--clean-action) !important;
  color: #fff !important;
  font-size: 10px !important;
}

/* Restore every original purchased one-line effect after the global white reset. */
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-gold > .one-line-text {
  color: #c69200 !important;
  -webkit-text-fill-color: #c69200 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 rgba(255, 230, 130, .65) !important;
}
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-fire > .one-line-text {
  color: #d84a18 !important;
  -webkit-text-fill-color: #d84a18 !important;
  font-weight: 900 !important;
}
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-giant > .one-line-text {
  color: #2877d5 !important;
  -webkit-text-fill-color: #2877d5 !important;
  font-size: 1.14em !important;
  font-weight: 900 !important;
  line-height: 1.45 !important;
}
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-wave > .one-line-text {
  display: inline-flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  color: #2688b8 !important;
  -webkit-text-fill-color: #2688b8 !important;
  font-weight: 850 !important;
  text-shadow: 0 0 7px rgba(83, 201, 235, .38) !important;
}
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-wave .wave-char {
  display: inline-block !important;
  color: #2688b8 !important;
  -webkit-text-fill-color: #2688b8 !important;
  will-change: transform, filter, opacity !important;
  animation: hyeminine-wave-comment 1.55s ease-in-out infinite !important;
  animation-delay: calc(var(--wave-index, 0) * -0.065s) !important;
}
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-neon > .one-line-text {
  display: inline-block !important;
  width: max-content !important;
  max-width: none !important;
  color: #ff3aa8 !important;
  -webkit-text-fill-color: #ff3aa8 !important;
  font-weight: 900 !important;
  white-space: nowrap !important;
  text-shadow: 0 0 3px #fff, 0 0 7px rgba(255, 58, 168, .95), 0 0 13px rgba(80, 115, 255, .72) !important;
  will-change: transform, opacity, filter !important;
  animation: hyeminine-neon-comment 3.8s linear infinite, hyeminine-neon-flicker 1.2s steps(2, end) infinite !important;
}
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-neon {
  max-width: 100% !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-mini > .one-line-text {
  display: inline-block !important;
  color: #825a91 !important;
  -webkit-text-fill-color: #825a91 !important;
  font-size: .86em !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  letter-spacing: -.02em !important;
  transform-origin: left center !important;
}

body.clean-white-v4 #pageContent .modern-one-line-list .one-line-text-rainbow {
  display: inline !important;
  background-image: linear-gradient(90deg, #ef4444 0%, #f97316 16%, #d6a900 32%, #169b45 48%, #0891b2 64%, #2563eb 80%, #9333ea 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: #b4238f !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
}

body.clean-white-v4 dialog,
body.clean-white-v4 footer {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: #59616c !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

@media (max-width: 980px) {
  body.clean-white-v4 > header {
    height: 64px !important;
  }

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

  body.clean-white-v4 .modern-home-layout {
    grid-template-columns: minmax(0, 1fr) !important;
  }

  body.clean-white-v4 .modern-home-right {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    width: 100% !important;
    min-width: 0 !important;
    margin-top: 12px !important;
  }
}

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

  body.clean-white-v4 #brandHomeLink {
    font-size: 21px !important;
  }

  body.clean-white-v4 .retro-browser-window {
    margin-top: 14px !important;
  }

  body.clean-white-v4 .modern-welcome-card {
    align-items: flex-start !important;
    min-height: 0 !important;
    padding: 17px !important;
    gap: 12px !important;
  }

  body.clean-white-v4 .modern-welcome-icon {
    flex-basis: 42px !important;
    width: 42px !important;
    height: 42px !important;
    font-size: 21px !important;
  }

  body.clean-white-v4 .modern-welcome-card h1 {
    font-size: 18px !important;
  }

  body.clean-white-v4 .modern-welcome-card p {
    font-size: 12px !important;
  }

  body.clean-white-v4 #pageContent .modern-welcome-card .modern-welcome-edit {
    margin-left: 0 !important;
  }

  body.clean-white-v4 #pageContent > .site-page.active:not(.modern-home) {
    border-radius: 13px !important;
  }

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

  body.clean-white-v4 .modern-shortcut-card {
    flex-direction: column !important;
    justify-content: center !important;
    min-height: 100px !important;
    padding: 9px 3px !important;
    gap: 6px !important;
    text-align: center !important;
  }

  body.clean-white-v4 .modern-shortcut-icon {
    flex-basis: 40px !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 11px !important;
    font-size: 20px !important;
  }

  body.clean-white-v4 .modern-shortcut-card strong {
    margin: 0 !important;
    font-size: 11.5px !important;
  }

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

  body.clean-white-v4 .modern-home-right {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* =========================================================
   SITE-WIDE WHITE AUDIT PASS
   Neutralizes the remaining legacy purple/Y2K chrome on every page.
   Functional game colors and purchased text effects are restored below.
   ========================================================= */
body.clean-white-v4 #pageContent .site-page.active :is(
  .page-header,
  .board-page-header,
  .game-head,
  .feature-heading,
  .panel-heading,
  .section-title,
  .attendance-header,
  .daily-bingo-head,
  .lottery-winner-head,
  .playground-hub-header,
  .emoji-page-header,
  .encyclopedia-heading,
  .waste-hero,
  .claw-title-card,
  .daily-fortune-card-head,
  .admin-header
) {
  border: 1px solid var(--clean-border) !important;
  border-left-width: 1px !important;
  border-radius: 14px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  .page-header,
  .board-page-header,
  .game-head,
  .feature-heading,
  .panel-heading,
  .section-title,
  .attendance-header,
  .daily-bingo-head,
  .lottery-winner-head,
  .playground-hub-header,
  .emoji-page-header,
  .encyclopedia-heading,
  .waste-hero,
  .claw-title-card,
  .daily-fortune-card-head,
  .admin-header
) :is(h1, h2, h3, h4, strong) {
  color: var(--clean-ink) !important;
  text-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  .page-header,
  .board-page-header,
  .game-head,
  .feature-heading,
  .panel-heading,
  .section-title,
  .attendance-header,
  .daily-bingo-head,
  .playground-hub-header,
  .emoji-page-header,
  .encyclopedia-heading,
  .waste-hero
) p {
  color: var(--clean-muted) !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  .content-block,
  .board-list,
  .post-view,
  .comments-section,
  .full-page-editor,
  .admin-login,
  .gallery-card,
  .comment-item,
  .comment-reply-item,
  .comment-form,
  .comment-form-row,
  .prompt-copy-box,
  .filter-note,
  .board-level-guide,
  .rich-editor-field,
  .rich-editor-toolbar,
  .rich-post-editor,
  .image-sorter,
  .sortable-image,
  .worry-reply-form,
  .inquiry-form,
  .coin-status-table-wrap
) {
  border-color: var(--clean-border) !important;
  background-color: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.board-section-tabs, .game-tabs, .attendance-tabs, .emoji-category-tabs, .name-category-tabs) {
  border: 1px solid var(--clean-border) !important;
  border-radius: 11px !important;
  background: #f7f8fa !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  .board-section-tabs a,
  .game-tab,
  .attendance-tabs button,
  .attendance-tabs a,
  .emoji-category-tabs button,
  .name-category-tabs button,
  .name-category-tabs a,
  .post-nav-button,
  .pagination a,
  .pagination span,
  .quiz-prev
) {
  border: 1px solid var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  color: #555d68 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  .board-section-tabs a.active,
  .game-tab.active,
  .attendance-tabs .active,
  .emoji-category-tabs .active,
  .name-category-tabs .active,
  .pagination .active
) {
  border-color: var(--clean-action) !important;
  background: var(--clean-action) !important;
  background-image: none !important;
  color: #fff !important;
  text-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  input:not([type="checkbox"]):not([type="radio"]):not([type="color"]),
  textarea,
  select,
  .rich-post-editor
) {
  border: 1px solid var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
  outline-color: #aeb4bc !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  button,
  .button-link,
  .post-nav-button,
  .editor-image-button,
  .gallery-button,
  .quiz-option,
  .rps-choice,
  .coinshop-buy-button,
  .lottery-buy-button
):not(.reaction-pad):not(.mine-cell):not(.memory-card):not([data-color]) {
  border: 1px solid var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  color: #414853 !important;
  text-shadow: none !important;
  box-shadow: none !important;
  filter: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  button[type="submit"],
  .button-link.primary,
  .game-begin,
  .game-restart,
  .baseball-submit,
  .quiz-start,
  .quiz-retry,
  .rps-start,
  .mole-start,
  .mole-restart,
  .attendance-check-button,
  .stamp-button,
  .coinshop-buy-button,
  .lottery-buy-button
):not(.reaction-pad):not(.mine-cell):not(.memory-card):not([data-color]) {
  border-color: var(--clean-action) !important;
  background: var(--clean-action) !important;
  background-image: none !important;
  color: #fff !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.secondary, .danger-button, .text-danger) {
  border-color: var(--clean-border-strong) !important;
  background: #fff !important;
  background-image: none !important;
  color: #69717c !important;
  text-shadow: none !important;
}

/* Board, notices, post detail and writing editor. */
body.clean-white-v4 #pageContent #board.site-page.active,
body.clean-white-v4 #pageContent #write.site-page.active {
  background: #fff !important;
  background-image: none !important;
}

body.clean-white-v4 #pageContent #board.site-page.active :is(.bbs-table, .bbs-table th, .bbs-table td),
body.clean-white-v4 #pageContent #write.site-page.active :is(.rich-editor-toolbar, .rich-post-editor) {
  border-color: var(--clean-border) !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #board.site-page.active .bbs-table th {
  background: #f5f6f8 !important;
  color: #4d5560 !important;
}

body.clean-white-v4 #pageContent #board.site-page.active .bbs-table td,
body.clean-white-v4 #pageContent #write.site-page.active :is(.rich-editor-toolbar, .rich-post-editor) {
  background: #fff !important;
  color: #3f4650 !important;
}

body.clean-white-v4 #pageContent #write.site-page.active .rich-editor-toolbar button,
body.clean-white-v4 #pageContent #write.site-page.active .editor-image-button {
  border-color: var(--clean-border-strong) !important;
  background: #f7f8fa !important;
  color: #4d5560 !important;
}

body.clean-white-v4 #pageContent #board.site-page.active :is(.post-view-head, .comments-section, .comment-item, .comment-reply-item, .post-navigation) {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Game hubs and game chrome: white panels, neutral controls, no lavender skins. */
body.clean-white-v4 #pageContent #games.site-page.active :is(
  .games-layout,
  .games-main-column,
  .game-panel,
  .game-intro-panel,
  .rank-game-shell,
  .rank-game-board,
  .ranking-box,
  .games-page-ranking,
  .game-comments,
  .game-one-line-list,
  .game-status,
  .game-nickname,
  .nickname-row,
  .memory-nickname-row,
  .egg-nickname-row,
  .sushi-nickname-row,
  .tteok-nickname-row,
  .baseball-history,
  .baseball-guess,
  .memory-shell,
  .memory-board-wrap,
  .memory-progress,
  .memory-actions,
  .rps-shell,
  .rps-hero,
  .rps-arena,
  .rps-scoreboard,
  .rps-rule,
  .rps-ranking-box,
  .mole-shell,
  .mole-hero,
  .mole-intro,
  .mole-rule-cards > *,
  .mole-play,
  .mole-hud,
  .mole-tip,
  .typing-shell,
  .typing-play,
  .typing-rule,
  .typing-start-wrap,
  .pc-typing-shell,
  .pc-typing-hero,
  .pc-typing-intro,
  .pc-typing-rules,
  .pc-typing-game,
  .pc-typing-hud,
  .pc-typing-result,
  .pc-typing-result-grid > *,
  .egg-shell,
  .bread-shell,
  .sushi-shell,
  .tteok-shell,
  .egg-hud,
  .bread-hud,
  .sushi-hud,
  .tteok-hud,
  .egg-rule,
  .bread-rule,
  .sushi-kinds,
  .tteok-sign,
  .tteok-judge
) {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #games.site-page.active :is(.ranking-box li, .games-page-ranking li, .rps-ranking-box li, .game-one-line-list > *) {
  border-color: #eceef1 !important;
  background: #fff !important;
  color: #555d68 !important;
}

body.clean-white-v4 #pageContent #games.site-page.active :is(.mine-intro-panel, .mine-game-area, .memory-board) {
  border-color: var(--clean-border) !important;
  background: #f7f8fa !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #games.site-page.active :is(.mine-board, .mine-board-up) {
  border-color: #cfd4da !important;
  background: #e6e9ed !important;
  box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #c4c9d0 !important;
}

body.clean-white-v4 #pageContent #games.site-page.active :is(.mine-board button, .mine-board-up button, .mine-cell) {
  border-color: #cbd0d7 !important;
  background: #f2f4f6 !important;
  background-image: none !important;
  color: #424a55 !important;
  text-shadow: none !important;
}

body.clean-white-v4 #pageContent #games.site-page.active :is(.mine-board button.open, .mine-board-up button.open, .mine-cell.open) {
  background: #fff !important;
}

body.clean-white-v4 #pageContent #games.site-page.active .reaction-pad.waiting {
  background: #eef1f4 !important;
  color: #4e5661 !important;
}

body.clean-white-v4 #pageContent #games.site-page.active .reaction-pad.ready,
body.clean-white-v4 #pageContent #games.site-page.active .reaction-pad.go {
  background: #e7f5ec !important;
  color: #21613a !important;
}

body.clean-white-v4 #pageContent #games.site-page.active .reaction-pad.too-soon {
  background: #fff0ec !important;
  color: #9a4b35 !important;
}

body.clean-white-v4 #pageContent #games.site-page.active .mole-field {
  background: linear-gradient(#eef4f8 0 38%, #dce7df 38% 100%) !important;
}

body.clean-white-v4 #pageContent #games.site-page.active .typing-sky {
  background: #eef7fb !important;
}

body.clean-white-v4 #pageContent #games.site-page.active .typing-grass {
  background: #dcecdf !important;
}

body.clean-white-v4 #pageContent #games.site-page.active :is(.egg-stage, .bread-stage, .sushi-stage, .tteok-stage) {
  border-color: var(--clean-border-strong) !important;
  background: #f4f6f8 !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Playground, tests, attendance, shop and utility pages. */
body.clean-white-v4 #pageContent .site-page.active :is(
  .playground-hub,
  .playground-card,
  .playground-individual-test-card,
  .playground-desktop-tests-card,
  .quiz-stage,
  .quiz-intro,
  .quiz-result,
  .quiz-traits,
  .quiz-caution,
  .quiz-tip,
  .quiz-mbti,
  .quiz-result-grid > *,
  .attendance-shell,
  .attendance-member-bar,
  .attendance-summary,
  .attendance-login-guide,
  .badge-progress,
  .attendance-calendar,
  .badge-sections > section,
  .badge-sections article,
  .badge-card,
  .coinshop-preview,
  .coinshop-preview-grid,
  .coinshop-preview-card,
  .shop-notice,
  .daily-bingo-board-wrap,
  .daily-bingo-rewards,
  .daily-bingo-progress,
  .bingo-login-notice,
  .lottery-shell,
  .lottery-intro,
  .lottery-ticket,
  .lottery-stage,
  .lottery-controls,
  .lottery-winner-board,
  .jar-hunt-shell,
  .jar-hunt-intro,
  .jar-hunt-bet,
  .jar-hunt-result,
  .jar-hunt-warning,
  .daily-fortune-shell,
  .daily-fortune-form,
  .daily-fortune-card,
  .office-card,
  .calculator-card,
  .admin-summary,
  .admin-grid > *
) {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.playground-card-icon, .playground-hub-icon, .quiz-emoji, .quiz-result-emoji, .coinshop-preview-icon, .reward-icon) {
  border-color: var(--clean-border) !important;
  background: #f2f4f6 !important;
  background-image: none !important;
  color: #59616c !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.quiz-progress, .badge-progress i, .daily-bingo-progress) {
  background: #e9ecf0 !important;
  background-image: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.quiz-progress > *, .badge-progress i > *, .badge-progress-bar > span, .daily-bingo-progress > span) {
  background: #59616c !important;
  background-image: none !important;
}

body.clean-white-v4 #pageContent #attendance.site-page.active .attendance-calendar th {
  border-color: var(--clean-border) !important;
  background: #f5f6f8 !important;
  color: #4d5560 !important;
}

body.clean-white-v4 #pageContent #attendance.site-page.active .attendance-calendar td {
  border-color: #eceef1 !important;
  background: #fff !important;
  color: #59616c !important;
}

body.clean-white-v4 #pageContent #attendance.site-page.active :is(.attendance-calendar td.today, .attendance-calendar .today) {
  background: #eef4ff !important;
  outline-color: #8ba8cf !important;
}

body.clean-white-v4 #pageContent #attendance.site-page.active :is(.attendance-calendar td.checked, .attendance-calendar .checked, .attendance-calendar td.attended, .attendance-calendar .attended, .badge-card.earned, .badge-card.is-earned, .badge-card.unlocked) {
  border-color: #b8d8c2 !important;
  background: #eef8f1 !important;
  background-image: none !important;
  color: #2f6741 !important;
}

body.clean-white-v4 #pageContent :is(.daily-bingo-grid, .daily-bingo-grid > *, [data-bingo-cell]) {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: #4e5661 !important;
}

body.clean-white-v4 #pageContent :is(.daily-bingo-grid > *.is-done, [data-bingo-cell].is-done, .daily-bingo-grid > *.completed, [data-bingo-cell].completed) {
  border-color: #b8d8c2 !important;
  background: #eef8f1 !important;
  color: #2f6741 !important;
}

/* Remove the remaining Y2K window treatment from My Page. */
body.clean-white-v4 #pageContent .site-page.active :is(.mypage-y2k-shell, .mypage-y2k-header, .mypage-y2k-panel, .mypage-y2k-welcome, .mypage-info-card, .mypage-login-required) {
  border: 1px solid var(--clean-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .mypage-y2k-titlebar {
  display: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.mypage-y2k-welcome p, .mypage-y2k-welcome h1, .mypage-y2k-welcome small, .mypage-panel-heading h2, .mypage-panel-heading p) {
  color: inherit !important;
  text-shadow: none !important;
}

/* Dialogs live outside #pageContent and need their own final neutral pass. */
body.clean-white-v4 dialog,
body.clean-white-v4 dialog .dialog-form,
body.clean-white-v4 dialog :is(.coin-status-panel, .lottery-modal-card, .gifticon-product-manager, .member-withdraw-form) {
  border-color: var(--clean-border) !important;
  border-radius: 14px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 dialog :is(input, textarea, select) {
  border-color: var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  box-shadow: none !important;
}

body.clean-white-v4 dialog button:not(.dialog-x) {
  border: 1px solid var(--clean-border-strong) !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  color: #4d5560 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 dialog button[type="submit"] {
  border-color: var(--clean-action) !important;
  background: var(--clean-action) !important;
  color: #fff !important;
}

body.clean-white-v4 dialog .dialog-x {
  border-color: var(--clean-border) !important;
  background: #f2f4f6 !important;
  color: #59616c !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #mobileCoinshopMenu {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: var(--clean-shadow) !important;
}

body.clean-white-v4 #mobileCoinshopMenu .mobile-coinshop-item {
  border-color: transparent !important;
  background: #fff !important;
  color: #555d68 !important;
  text-shadow: none !important;
}

body.clean-white-v4 #mobileCoinshopMenu .mobile-coinshop-item.active {
  background: #f1f3f5 !important;
  color: #20242a !important;
}

/* Last-mile text/background cleanup for nested legacy labels. */
body.clean-white-v4 #pageContent .site-page.active :is(
  .board-comment-count,
  .board-comment-count-mobile,
  .board-section-label,
  .gallery-category,
  .home-post-category,
  .comment-head,
  .board-comment-admin-mark,
  .attendance-member,
  .attendance-summary strong,
  .attendance-summary b,
  .badge-progress strong,
  .badge-group h3,
  .playground-card h3,
  .playground-individual-test-card h3,
  .quiz-question,
  .quiz-result-title,
  .quiz-count,
  .quiz-kicker,
  .quiz-result-summary,
  .quiz-result-grid h3,
  .quiz-result-grid p,
  .quiz-mbti-list,
  .ranking-box .rank-number,
  .games-page-ranking .rank-number,
  .ranking-box strong,
  .games-page-ranking strong,
  .baseball-guess strong,
  .rps-scoreboard strong,
  .typing-word-bubble,
  .typing-focus-word,
  .pc-typing-prompt,
  .coinshop-preview-price,
  .reward-coins,
  .coin-status-balance,
  .lottery-kicker,
  .lottery-intro h2,
  .lottery-status strong,
  .lottery-ticket-head small,
  .lottery-ticket-head h3,
  .lottery-ticket-foot,
  .lottery-message,
  .lottery-rates span,
  .lottery-rates strong,
  .jar-hunt-status,
  .jar-hunt-warning,
  .daily-fortune-kicker,
  .daily-fortune-intro h2,
  .daily-fortune-card-head small,
  .daily-fortune-card-head h3,
  .daily-fortune-summary,
  .daily-fortune-score span,
  .daily-fortune-lucky,
  .daily-fortune-lucky strong,
  .daily-fortune-rabbit strong,
  .daily-fortune-rabbit p,
  .encyclopedia-kicker,
  .encyclopedia-card-copy small,
  .encyclopedia-card-copy strong,
  .encyclopedia-card-copy em,
  .encyclopedia-card-arrow,
  .waste-breadcrumb,
  .waste-breadcrumb a,
  .waste-hero small,
  .waste-detail-title small,
  .waste-search-form > label
) {
  color: #59616c !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(
  .attendance-summary > div,
  .calendar-cell,
  .badge-group,
  .quiz-result-grid > article,
  .quiz-mbti,
  .typing-track,
  .typing-word-bubble,
  .typing-focus-word,
  .pc-typing-prompt,
  .lottery-status > span,
  .lottery-rates > span,
  .daily-fortune-score,
  .daily-fortune-lucky,
  .daily-fortune-rabbit,
  .daily-bingo-reward-list > *,
  .encyclopedia-coming-soon
) {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: #59616c !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #attendance.site-page.active .calendar-cell.checked {
  border-color: #b8d8c2 !important;
  background: #eef8f1 !important;
  color: #2f6741 !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.coinshop-preview-card:hover, .playground-card:hover, .playground-individual-test-card:hover) {
  border-color: #cfd4da !important;
  background: #fff !important;
  box-shadow: var(--clean-shadow) !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.lottery-ticket-head, .lottery-ticket-foot, .lottery-jackpot-callout) {
  border-color: var(--clean-border) !important;
  background: #f7f8fa !important;
  background-image: none !important;
  color: #59616c !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.lottery-scratch-area, .lottery-canvas) {
  border-color: #d8b768 !important;
  background: #f7e7ad !important;
  background-image: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.jar-hunt-pot-body, .jar-hunt-pot-neck, .jar-hunt-pot-lid) {
  border-color: #9b7442 !important;
  background: #c9995c !important;
  background-image: none !important;
}

body.clean-white-v4 #pageContent .site-page.active .jar-hunt-pot-pattern {
  border-color: #e7d6bd !important;
}

body.clean-white-v4 #pageContent .site-page.active .jar-hunt-pot-glow {
  background: rgba(229, 176, 89, .22) !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.mypage-nickname-row input, .mypage-coupon, .mypage-coupon img) {
  border-color: var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.mypage-nickname-row button, .mypage-coupon a) {
  border-color: var(--clean-border-strong) !important;
  background: #fff !important;
  background-image: none !important;
  color: #4d5560 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 > header :is(.member-link, .admin-badge) {
  border-color: var(--clean-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  background-image: none !important;
  color: #4d5560 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 footer {
  border-top: 1px solid var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: #737b86 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Purchased board-title effects also survive the white audit. */
body.clean-white-v4 #pageContent .site-page.active .board-title-effect-gold {
  color: #b98400 !important;
  -webkit-text-fill-color: #b98400 !important;
  font-weight: 900 !important;
  text-shadow: 0 1px 0 #fff0a8, 0 0 7px rgba(255, 195, 0, .55) !important;
}

body.clean-white-v4 #pageContent .site-page.active .board-title-effect-fire {
  color: #ef4d22 !important;
  background: linear-gradient(180deg, #ffcf35 0%, #ff6c22 48%, #d72b1e 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  text-shadow: 0 0 7px rgba(255, 74, 20, .35) !important;
  animation: boardTitleFire .7s ease-in-out infinite alternate !important;
}

body.clean-white-v4 #pageContent .site-page.active .board-title-effect-giant {
  font-size: 1.32em !important;
  font-weight: 950 !important;
}

body.clean-white-v4 #pageContent .site-page.active .board-title-effect-wave {
  font-weight: 850 !important;
  animation: boardTitleWave 1.15s ease-in-out infinite !important;
}

body.clean-white-v4 #pageContent .site-page.active .board-title-effect-neon {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
  font-weight: 900 !important;
  text-shadow: 0 0 2px #ff69c9, 0 0 6px #ff69c9, 0 0 12px #447cdf, 0 0 18px #52c8ff !important;
}

body.clean-white-v4 #pageContent .site-page.active .board-title-effect-mini {
  font-size: .74em !important;
  font-weight: 800 !important;
  opacity: .9 !important;
}

/* =========================================================
   FINAL RESPONSIVE LAYOUT PASS v5
   Separates desktop and mobile home order and fixes hub grids.
   ========================================================= */

/* Drawer submenus always expand vertically inside the drawer. */
body.clean-white-v4 #mobileMainDrawer > .nav-dropdown {
  position: static !important;
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

body.clean-white-v4 #mobileMainDrawer > .nav-dropdown > :is(.mobile-drawer-submenu, .nav-dropdown-menu, .playground-desktop-menu) {
  position: static !important;
  inset: auto !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  float: none !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 3px 0 6px 36px !important;
  padding: 5px !important;
  transform: none !important;
  translate: none !important;
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

body.clean-white-v4 #mobileMainDrawer > .nav-dropdown > :is(.mobile-drawer-submenu, .nav-dropdown-menu, .playground-desktop-menu)[hidden] {
  display: none !important;
}

body.clean-white-v4 #mobileMainDrawer > .nav-dropdown > :is(.mobile-drawer-submenu, .nav-dropdown-menu, .playground-desktop-menu):not([hidden]) {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) !important;
}

/* PC home: the notice list stays in the right rail, so remove the duplicate center notice. */
@media (min-width: 981px) {
  body.clean-white-v4 #home.modern-home.active .modern-home-center > .modern-announcement {
    display: none !important;
  }

  /* Remove the old empty rabbit icon column from one-line greetings. */
  body.clean-white-v4 #pageContent #home.modern-home.active .modern-one-line-list .one-line-item {
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    justify-content: space-between !important;
    column-gap: 0 !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
  }

  body.clean-white-v4 #pageContent #home.modern-home.active .modern-one-line-list .one-line-item::before {
    display: none !important;
    content: none !important;
  }

  body.clean-white-v4 #pageContent #home.modern-home.active .modern-one-line-list .one-line-content {
    grid-column: auto !important;
    grid-row: auto !important;
    width: auto !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
  }

  body.clean-white-v4 #pageContent #home.modern-home.active .modern-one-line-list .one-line-meta {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  /* Playground landing: exactly four cards in one row. */
  body.clean-white-v4 #pageContent #playground.site-page.active {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.clean-white-v4 #pageContent #playground.site-page.active .playground-hub {
    width: min(1040px, 100%) !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
  }

  body.clean-white-v4 #pageContent #playground.site-page.active .playground-layout {
    display: block !important;
    width: 100% !important;
  }

  body.clean-white-v4 #pageContent #playground.site-page.active .playground-card-grid {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    width: 100% !important;
    gap: 12px !important;
  }

  body.clean-white-v4 #pageContent #playground.site-page.active .playground-card {
    min-height: 230px !important;
    padding: 20px 12px !important;
  }

  /* Tests page stays centered in the actual content column. */
  body.clean-white-v4 #pageContent #tests.site-page.active {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.clean-white-v4 #pageContent #tests.site-page.active .tests-hub-page {
    position: static !important;
    left: auto !important;
    width: min(1040px, 100%) !important;
    max-width: 1040px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

/* PC-only coin menu hub: two cards per row, three rows. */
body.clean-white-v4 .coinshop-route-hub {
  display: none !important;
}

@media (min-width: 981px) {
  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-hub {
    display: block !important;
    width: min(720px, calc(100% - 40px)) !important;
    margin: 22px auto 0 !important;
    padding: 22px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--clean-border) !important;
    border-radius: 14px !important;
    background: #fff !important;
    background-image: none !important;
    box-shadow: var(--clean-shadow) !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-heading {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-heading > span {
    display: grid !important;
    flex: 0 0 44px !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    background: #f5f6f8 !important;
    font-size: 22px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-heading h2 {
    margin: 0 0 3px !important;
    color: var(--clean-ink) !important;
    font-size: 18px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-heading p {
    margin: 0 !important;
    color: var(--clean-muted) !important;
    font-size: 12px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid a {
    display: flex !important;
    align-items: center !important;
    min-width: 0 !important;
    min-height: 72px !important;
    padding: 12px 15px !important;
    gap: 11px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--clean-border) !important;
    border-radius: 11px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--clean-ink) !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid a:hover {
    border-color: #cbd0d7 !important;
    background: #f8f9fa !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid a > span {
    display: grid !important;
    flex: 0 0 38px !important;
    place-items: center !important;
    width: 38px !important;
    height: 38px !important;
    border-radius: 10px !important;
    background: #f2f4f6 !important;
    font-size: 19px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid strong {
    color: #343a43 !important;
    font-size: 14px !important;
  }
}

/* Mobile/tablet home order: welcome, notice, login, shortcuts, greeting, side lists. */
@media (max-width: 980px) {
  body.clean-white-v4 #home.modern-home.active .modern-home-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    gap: 0 !important;
  }

  body.clean-white-v4 #home.modern-home.active :is(.modern-home-center, .modern-home-right) {
    display: contents !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-announcement {
    display: flex !important;
    order: 1 !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-login-card {
    order: 2 !important;
    width: 100% !important;
    margin: 0 0 11px !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-shortcut-grid {
    order: 3 !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-greeting-card {
    order: 4 !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-home-right > .modern-post-card:nth-child(2) {
    order: 5 !important;
    margin-top: 12px !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-home-right > .modern-post-card:nth-child(3) {
    order: 6 !important;
    margin-top: 12px !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-visitors-card {
    order: 7 !important;
    margin-top: 12px !important;
  }

  body.clean-white-v4 #pageContent :is(#playground, #tests).site-page.active {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    transform: none !important;
  }

  body.clean-white-v4 #pageContent #tests.site-page.active .tests-hub-page {
    position: static !important;
    left: auto !important;
    width: 100% !important;
    max-width: 760px !important;
    margin: 0 auto !important;
    transform: none !important;
  }
}

@media (max-width: 620px) {
  body.clean-white-v4 #home.modern-home.active .modern-welcome-card {
    flex-wrap: wrap !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-welcome-copy {
    width: calc(100% - 54px) !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-welcome-edit {
    margin-left: 54px !important;
  }

  body.clean-white-v4 #home.modern-home.active .modern-login-card,
  body.clean-white-v4 #home.modern-home.active .modern-greeting-card,
  body.clean-white-v4 #home.modern-home.active .modern-post-card,
  body.clean-white-v4 #home.modern-home.active .modern-visitors-card {
    box-sizing: border-box !important;
  }

  body.clean-white-v4 #pageContent #tests.site-page.active .tests-page-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
  }

  body.clean-white-v4 #pageContent #tests.site-page.active .playground-card {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

/* =========================================================
   FINAL DETAIL AND INTERACTION PASS v6
   Greeting paging/effects, neutral controls, and clean layouts.
   ========================================================= */

body.clean-white-v4 .retro-browser-status {
  display: none !important;
}

body.clean-white-v4 #oneLineGreeting {
  scroll-margin-top: 88px !important;
}

/* Keep the level option compact and beside its label on every screen. */
body.clean-white-v4 #pageContent #home.modern-home.active .modern-one-line-form .one-line-level-option {
  display: inline-flex !important;
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  align-items: center !important;
  width: max-content !important;
  min-width: 0 !important;
  min-height: 18px !important;
  margin: 0 0 2px !important;
  padding: 0 !important;
  gap: 5px !important;
  border: 0 !important;
  background: transparent !important;
  color: #626a75 !important;
  font-size: 11px !important;
  line-height: 1 !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #home.modern-home.active .modern-one-line-form .one-line-level-option > span {
  display: inline !important;
  color: inherit !important;
  font-size: inherit !important;
  line-height: 1 !important;
}

body.clean-white-v4 #pageContent #home.modern-home.active .modern-one-line-form .one-line-level-option > input[type="checkbox"] {
  appearance: auto !important;
  -webkit-appearance: checkbox !important;
  flex: 0 0 13px !important;
  width: 13px !important;
  min-width: 13px !important;
  max-width: 13px !important;
  height: 13px !important;
  min-height: 13px !important;
  max-height: 13px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 1px solid #cbd0d7 !important;
  border-radius: 2px !important;
  background: #fff !important;
  box-shadow: none !important;
  accent-color: #4c535d !important;
}

/* Purchased greeting effects: fire is larger and rainbow visibly sparkles. */
body.clean-white-v4 #pageContent .modern-one-line-list .one-line-content-fire > .one-line-text {
  display: inline-block !important;
  font-size: 1.2em !important;
  line-height: 1.45 !important;
  letter-spacing: -.015em !important;
  text-shadow: 0 0 5px rgba(244, 104, 28, .28) !important;
}

body.clean-white-v4 #pageContent .modern-one-line-list .one-line-text-rainbow,
body.clean-white-v4 #pageContent .modern-one-line-list :is(
  .one-line-content-gold,
  .one-line-content-fire,
  .one-line-content-giant,
  .one-line-content-wave,
  .one-line-content-neon,
  .one-line-content-mini
) > .one-line-text-rainbow {
  display: inline-block !important;
  background-image: linear-gradient(90deg, #ef4444 0%, #f97316 14%, #eab308 28%, #16a34a 42%, #0891b2 56%, #2563eb 70%, #9333ea 84%, #ef4444 100%) !important;
  background-size: 260% 100% !important;
  background-position: 0 50% !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: #b4238f !important;
  -webkit-text-fill-color: transparent !important;
  font-weight: 900 !important;
  will-change: background-position, filter, opacity !important;
  animation: hyeminine-rainbow-sparkle 1.35s linear infinite !important;
}

@keyframes hyeminine-rainbow-sparkle {
  0% { background-position: 0% 50%; filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
  35% { filter: brightness(1.32) drop-shadow(0 0 3px rgba(255, 213, 79, .75)); }
  50% { background-position: 100% 50%; filter: brightness(1.08) drop-shadow(0 0 1px rgba(109, 179, 255, .55)); }
  78% { filter: brightness(1.38) drop-shadow(0 0 4px rgba(255, 112, 196, .75)); }
  100% { background-position: 200% 50%; filter: brightness(1) drop-shadow(0 0 0 rgba(255, 255, 255, 0)); }
}

/* Logged-in profile actions stay white and neutral. */
body.clean-white-v4 #pageContent #home.modern-home.active .modern-profile > span {
  border: 0 !important;
  background: #f2f4f6 !important;
  background-image: none !important;
  color: #59616c !important;
}

body.clean-white-v4 #pageContent #home.modern-home.active .modern-profile > div > a,
body.clean-white-v4 #pageContent #home.modern-home.active .modern-profile > div > button,
body.clean-white-v4 > header .member-menu .member-link {
  border: 1px solid var(--clean-border) !important;
  background: #fff !important;
  background-image: none !important;
  color: #4d5560 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #home.modern-home.active .modern-profile > div > a:hover,
body.clean-white-v4 #pageContent #home.modern-home.active .modern-profile > div > button:hover,
body.clean-white-v4 > header .member-menu .member-link:hover {
  border-color: #cbd0d7 !important;
  background: #f7f8fa !important;
  color: #30353d !important;
}

/* Comments: remove purple remnants and redundant nested outlines. */
body.clean-white-v4 #pageContent .site-page.active .comments-section {
  border: 0 !important;
  border-top: 1px solid var(--clean-border) !important;
  border-radius: 0 !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active .comments-section > h2 {
  min-height: 0 !important;
  margin: 0 0 16px !important;
  padding: 0 0 12px !important;
  border: 0 !important;
  border-bottom: 1px solid #eceef1 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  color: var(--clean-ink) !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active .comments-section > h2 span,
body.clean-white-v4 #pageContent .site-page.active :is(.comment-head strong, .comment-head, .comment-reply-details > summary) {
  color: #59616c !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.board-comment-admin-mark, .comment-admin-label) {
  border: 0 !important;
  border-radius: 5px !important;
  background: #f2f4f6 !important;
  background-image: none !important;
  color: #4d5560 !important;
  -webkit-text-fill-color: #4d5560 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.comment-form, .comment-form-row) {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.comment-form textarea, .comment-reply-form textarea, .comment-form-row input, .comment-delete-form input) {
  border: 1px solid var(--clean-border-strong) !important;
  background: #fff !important;
  color: var(--clean-ink) !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.comment-form-row button, .comment-reply-form button[type="submit"]) {
  border: 1px solid #3b414a !important;
  background: #3b414a !important;
  background-image: none !important;
  color: #fff !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active :is(.comment-item, .comment-reply-item) {
  border: 0 !important;
  border-bottom: 1px solid #eceef1 !important;
  border-radius: 0 !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active .comment-reply-form {
  border: 0 !important;
  border-radius: 9px !important;
  background: #f7f8fa !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent .site-page.active .comment-replies {
  border-left-color: var(--clean-border) !important;
}

/* Jar status labels must remain readable after the white reset. */
body.clean-white-v4 #pageContent #jar_hunt.site-page.active .jar-hunt-shell {
  border: 0 !important;
}

body.clean-white-v4 #pageContent #jar_hunt.site-page.active .jar-hunt-status span {
  border: 1px solid var(--clean-border) !important;
  background: #f2f4f6 !important;
  background-image: none !important;
  color: #343a43 !important;
  opacity: 1 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #jar_hunt.site-page.active .jar-hunt-status strong {
  color: #171a1f !important;
  -webkit-text-fill-color: #171a1f !important;
}

/* Keep one outline per component instead of stacked two/three-level borders. */
body.clean-white-v4 #pageContent #lottery_room.site-page.active :is(
  .lottery-shell,
  .lottery-intro,
  .lottery-stage,
  .lottery-controls,
  .lottery-winner-board
),
body.clean-white-v4 #pageContent #jar_hunt.site-page.active :is(.jar-hunt-intro, .jar-hunt-bet, .jar-hunt-result),
body.clean-white-v4 #pageContent #attendance.site-page.active :is(.attendance-member-bar, .attendance-summary, .badge-progress, .badge-sections > section) {
  border: 0 !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #lottery_room.site-page.active .lottery-winner-board {
  margin-top: 20px !important;
  padding: 18px 0 0 !important;
  border-top: 1px solid var(--clean-border) !important;
  border-radius: 0 !important;
}

body.clean-white-v4 #pageContent #lottery_room.site-page.active .lottery-winner-head {
  border: 0 !important;
  border-bottom: 1px solid #eceef1 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #lottery_room.site-page.active .lottery-winner-item {
  border: 0 !important;
  border-bottom: 1px solid #eceef1 !important;
  border-radius: 0 !important;
  background: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Badge collection count uses a strong neutral foreground. */
body.clean-white-v4 #pageContent #attendance.site-page.active .badge-progress > span[data-badge-progress] {
  position: relative !important;
  z-index: 2 !important;
  display: inline-block !important;
  padding: 3px 7px !important;
  border: 0 !important;
  border-radius: 7px !important;
  background: #fff !important;
  background-image: none !important;
  color: #20242a !important;
  -webkit-text-fill-color: #20242a !important;
  opacity: 1 !important;
  font-weight: 900 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Bingo: reset the old left shift and align board/rewards from the same top line. */
body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-layout {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 230px !important;
  align-items: start !important;
  width: min(1040px, 100%) !important;
  max-width: 1040px !important;
  margin: 0 auto !important;
  gap: 20px !important;
}

body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-board-wrap {
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-grid {
  display: grid !important;
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 7px !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
}

body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-cell {
  min-width: 0 !important;
  box-sizing: border-box !important;
}

body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-rewards {
  align-self: start !important;
  width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
  transform: none !important;
}

/* Coin shop route chooser remains exactly two columns by three rows on PC. */
@media (min-width: 981px) {
  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    grid-auto-rows: minmax(72px, auto) !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid > a {
    width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
  }
}

@media (max-width: 700px) {
  body.clean-white-v4 #oneLineGreeting {
    scroll-margin-top: 76px !important;
  }

  body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-layout {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 16px !important;
  }

  body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-board-wrap,
  body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-grid,
  body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-rewards {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }

  body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-grid {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
    gap: 4px !important;
  }

  body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-cell {
    min-height: 74px !important;
    padding: 17px 3px 6px !important;
  }

  body.clean-white-v4 #pageContent #bingo.site-page.active .daily-bingo-cell strong {
    font-size: 9px !important;
    line-height: 1.25 !important;
  }

  body.clean-white-v4 #pageContent #bingo.site-page.active .bingo-cell-state {
    font-size: 8px !important;
  }
}

/* Every non-home menu gets breathing room and a centered content canvas. */
body.clean-white-v4 #pageContent > .site-page.active:not(.modern-home) {
  width: min(1120px, 100%) !important;
  max-width: 1120px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  padding: 30px 28px 34px !important;
  box-sizing: border-box !important;
}

body.clean-white-v4 #pageContent > .site-page.active:not(.modern-home) > :is(
  .page-header,
  .board-page-header,
  .section-title,
  .playground-hub,
  .quiz-shell,
  .mbti-shell,
  .content-block,
  .community-page,
  .feature-card,
  .attendance-shell,
  .daily-fortune-shell,
  .jar-hunt-shell,
  .lottery-shell,
  .claw-shell,
  .admin-page,
  .drawing-page
) {
  margin-left: auto !important;
  margin-right: auto !important;
}

@media (max-width: 980px) {
  body.clean-white-v4 #pageContent > .site-page.active:not(.modern-home) {
    width: 100% !important;
    max-width: 100% !important;
    padding: 24px 18px 28px !important;
  }
}

@media (max-width: 620px) {
  body.clean-white-v4 #pageContent > .site-page.active:not(.modern-home) {
    padding: 20px 12px 24px !important;
  }
}

/* Mobile coin shop opens with the same two-by-three route card collection. */
@media (max-width: 980px) {
  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-hub {
    display: block !important;
    width: 100% !important;
    max-width: 720px !important;
    margin: 18px auto 22px !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-heading {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    margin: 0 0 13px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-heading > span {
    display: grid !important;
    flex: 0 0 40px !important;
    place-items: center !important;
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f2f4f6 !important;
    font-size: 20px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-heading h2 {
    margin: 0 0 2px !important;
    color: var(--clean-ink) !important;
    font-size: 16px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-heading p {
    margin: 0 !important;
    color: var(--clean-muted) !important;
    font-size: 11px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    grid-auto-flow: row !important;
    gap: 8px !important;
    width: 100% !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid > a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    min-height: 64px !important;
    margin: 0 !important;
    padding: 10px !important;
    gap: 8px !important;
    box-sizing: border-box !important;
    border: 1px solid var(--clean-border) !important;
    border-radius: 10px !important;
    background: #fff !important;
    background-image: none !important;
    color: var(--clean-ink) !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid > a > span {
    display: grid !important;
    flex: 0 0 34px !important;
    place-items: center !important;
    width: 34px !important;
    height: 34px !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #f2f4f6 !important;
    font-size: 17px !important;
  }

  body.clean-white-v4 #pageContent #coinshop.site-page.active .coinshop-route-grid > a > strong {
    min-width: 0 !important;
    color: #343a43 !important;
    font-size: 12px !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
  }
}

/* Compact encyclopedia index: four cards per row on PC, two per row on mobile. */
body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  margin-top: 16px !important;
}

body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card {
  display: flex !important;
  align-items: center !important;
  gap: 9px !important;
  width: 100% !important;
  min-width: 0 !important;
  min-height: 108px !important;
  padding: 13px 12px !important;
  box-sizing: border-box !important;
  border: 1px solid var(--clean-border) !important;
  border-radius: 11px !important;
  background: #fff !important;
  box-shadow: none !important;
}

body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card:hover {
  transform: translateY(-1px) !important;
  border-color: #cfd5dc !important;
  background: #fff !important;
  box-shadow: 0 6px 18px rgba(28, 36, 50, 0.06) !important;
}

body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-icon {
  display: grid !important;
  flex: 0 0 40px !important;
  place-items: center !important;
  width: 40px !important;
  height: 40px !important;
  border: 0 !important;
  border-radius: 10px !important;
  background: #f2f4f6 !important;
  font-size: 20px !important;
}

body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy {
  display: flex !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
  flex-direction: column !important;
  gap: 3px !important;
}

body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy small {
  color: #8a929d !important;
  font-family: inherit !important;
  font-size: 9px !important;
  line-height: 1.25 !important;
}

body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy strong {
  overflow: hidden !important;
  color: #2f343b !important;
  font-family: inherit !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy em {
  overflow: hidden !important;
  color: #737b86 !important;
  font-family: inherit !important;
  font-size: 10px !important;
  font-style: normal !important;
  line-height: 1.35 !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-arrow {
  position: static !important;
  flex: 0 0 auto !important;
  color: #9ca3ad !important;
  font-family: inherit !important;
  font-size: 14px !important;
}

@media (max-width: 980px) {
  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 13px !important;
  }

  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card {
    min-height: 98px !important;
    padding: 11px 9px !important;
    gap: 7px !important;
  }

  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-icon {
    flex-basis: 36px !important;
    width: 36px !important;
    height: 36px !important;
    font-size: 18px !important;
  }

  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy strong {
    font-size: 12px !important;
  }

  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy em {
    font-size: 9px !important;
  }

  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-arrow {
    display: none !important;
  }
}

@media (max-width: 380px) {
  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card {
    min-height: 92px !important;
    padding: 9px 7px !important;
  }

  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-icon {
    flex-basis: 32px !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 16px !important;
  }

  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy small,
  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy em {
    display: none !important;
  }

  body.clean-white-v4 #pageContent #encyclopedia.site-page.active .encyclopedia-card-copy strong {
    overflow: visible !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    text-overflow: clip !important;
    white-space: normal !important;
    word-break: keep-all !important;
  }
}