/* Final white UI reset. This file intentionally loads last. */
:root {
  --accent: #343941 !important;
  --accent-dark: #20242a !important;
  --accent-soft: #f2f4f7 !important;
  --surface: #ffffff !important;
  --bg: #f6f7f9 !important;
  --line: #e4e7ec !important;
  --text: #24272d !important;
  --muted: #7c838e !important;
  --y2k-pink: #343941 !important;
  --y2k-hot: #343941 !important;
  --y2k-lilac: #e4e7ec !important;
  --y2k-purple: #343941 !important;
  --y2k-pale: #ffffff !important;
  --y2k-lav: #f6f7f9 !important;
  --y2k-line: #e4e7ec !important;
  --y2k-ink: #24272d !important;
  --hy-pink: #343941 !important;
  --hy-purple: #343941 !important;
  --hy-pink-soft: #f2f4f7 !important;
  --hy-purple-soft: #f2f4f7 !important;
  --hy-pink-pale: #ffffff !important;
  --hy-border: #e4e7ec !important;
  --hm-bg: #f6f7f9 !important;
  --hm-ink: #24272d !important;
  --hm-line: #e4e7ec !important;
  --hm-pink2: #ffffff !important;
  --hm-lav3: #ffffff !important;
  --hm-blue2: #ffffff !important;
}

html,
body {
  background-color: #f6f7f9 !important;
  background-image: none !important;
  color: #24272d !important;
}

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

.site-page.active:not(.home-section)::before,
.encyclopedia-heading::before,
.encyclopedia-card::before,
.one-line-item::before,
footer::before,
footer::after {
  display: none !important;
  content: none !important;
  background: none !important;
}

body > header,
.header-inner,
.brand-row,
.retro-browser-window,
#pageContent {
  background-image: none !important;
}

body > header {
  border-bottom: 1px solid #e4e7ec !important;
  background-color: #fff !important;
}

body > header .brand {
  color: #1d2025 !important;
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif !important;
  text-transform: none !important;
  text-shadow: none !important;
}

body > header .brand span {
  display: none !important;
}

#mobileMainDrawer {
  border-color: #e4e7ec !important;
  background: #fff !important;
  background-image: none !important;
}

#mobileMainDrawer .mobile-drawer-heading,
#mobileMainDrawer .mobile-drawer-submenu {
  border-color: #e4e7ec !important;
  background-image: none !important;
}

#mobileMainDrawer > .nav-button:hover,
#mobileMainDrawer > .nav-button.active,
#mobileMainDrawer > .nav-dropdown > .nav-button:hover,
#mobileMainDrawer > .nav-dropdown > .nav-button.active {
  border-color: transparent !important;
  background: #f2f4f7 !important;
  color: #20242a !important;
}

#mobileMainDrawer > a[href*="page=encyclopedia"]::before {
  background: #edf4ff !important;
  color: #4b73aa !important;
}

.modern-shortcut-icon {
  background: #f2f4f7 !important;
}

.modern-shortcut-card.tone-violet .modern-shortcut-icon {
  background: #edf4ff !important;
}

/* Neutral white page shells. */
#pageContent > .site-page:not(.modern-home).active,
#pageContent .content-block,
#pageContent .page-header,
#pageContent .board-page-header,
#pageContent .feature-card,
#pageContent .board-card,
#pageContent .post-view,
#pageContent .panel,
#pageContent .calculator-panel,
#pageContent .visitor-card,
#pageContent .badge-owner-status,
#pageContent .attendance-shell,
#pageContent .coinshop-section,
#pageContent .game-shell,
#pageContent .new-game-shell,
#pageContent .rps-shell,
#pageContent .mole-shell,
#pageContent .typing-shell,
#pageContent .pc-typing-shell,
#pageContent .egg-shell,
#pageContent .bread-shell,
#pageContent .sushi-shell,
#pageContent .tteok-shell,
#pageContent .claw-shell,
#pageContent .lottery-shell,
#pageContent .jar-hunt-shell,
#pageContent .daily-bingo-shell,
#pageContent .daily-fortune-shell,
#pageContent .quiz-intro,
#pageContent .quiz-stage,
#pageContent .quiz-result,
#pageContent .mbti-selector-card,
#pageContent .mbti-result,
#pageContent .playground-card,
#pageContent .encyclopedia-card,
#pageContent .emoji-card,
#pageContent .waste-shell,
#pageContent .life-guide-shell,
#pageContent .name-dictionary-tools,
#pageContent .drawing-panel,
#pageContent .office-card,
#pageContent .worry-card,
#pageContent .inquiry-card {
  border-color: #e4e7ec !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #24272d !important;
  text-shadow: none !important;
  box-shadow: 0 7px 20px rgba(30, 38, 52, .055) !important;
}

#pageContent .page-header,
#pageContent .board-page-header,
#pageContent .game-head,
#pageContent .feature-heading,
#pageContent .attendance-header,
#pageContent .daily-bingo-head,
#pageContent .encyclopedia-heading,
#pageContent .waste-hero,
#pageContent .emoji-page-header,
#pageContent .claw-title-card,
#pageContent .daily-fortune-card-head,
#pageContent .panel-heading,
#pageContent .section-title,
#pageContent .badge-rank-title {
  border-color: #e4e7ec !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #24272d !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#pageContent h1,
#pageContent h2,
#pageContent h3,
#pageContent h4,
#pageContent .page-header h1,
#pageContent .section-title h2,
#pageContent .feature-heading h2 {
  color: #24272d !important;
  text-shadow: none !important;
}

#pageContent p,
#pageContent small,
#pageContent .help {
  text-shadow: none !important;
}

/* Standard controls: charcoal, white and light gray only. */
#pageContent button:not(.mine-cell):not(.color-killer-buttons button),
#pageContent .button-link,
#pageContent .gallery-button,
#pageContent .board-toolbar a,
#pageContent .board-write-bottom a,
#pageContent .pagination a,
#pageContent .game-tab,
#pageContent .attendance-tabs a,
#pageContent .name-category-tabs button,
#pageContent .name-category-tabs a,
#pageContent .waste-examples button,
#pageContent .coinshop-buy-button {
  border: 1px solid #dfe3e8 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #3f4650 !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

#pageContent .button-link:hover,
#pageContent .pagination a.active,
#pageContent .game-tab.active,
#pageContent .attendance-tabs a.active {
  border-color: #343941 !important;
  background-color: #343941 !important;
  background-image: none !important;
  color: #fff !important;
}

#pageContent input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
#pageContent textarea,
#pageContent select,
#pageContent .rich-post-editor {
  border-color: #dfe3e8 !important;
  border-radius: 8px !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #24272d !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Tables and boards lose lavender chrome. */
#pageContent .bbs-table,
#pageContent table {
  border-color: #e4e7ec !important;
  background: #fff !important;
}

#pageContent .bbs-table th,
#pageContent table th {
  border-color: #e4e7ec !important;
  background: #f6f7f9 !important;
  background-image: none !important;
  color: #4b525d !important;
}

#pageContent .bbs-table td,
#pageContent table td {
  border-color: #eceef1 !important;
  background-color: #fff !important;
}

/* My page: remove every Y2K window cue and rabbit treatment. */
.mypage-y2k-shell {
  gap: 14px !important;
}

.mypage-y2k-header,
.mypage-y2k-panel,
.mypage-info-card,
.mypage-login-required {
  border: 1px solid #e4e7ec !important;
  border-radius: 14px !important;
  background: #fff !important;
  background-image: none !important;
  color: #24272d !important;
  box-shadow: 0 7px 20px rgba(30, 38, 52, .055) !important;
}

.mypage-y2k-titlebar {
  display: none !important;
}

.mypage-y2k-welcome {
  border: 0 !important;
  background: #fff !important;
  background-image: none !important;
}

.mypage-pixel-bunny {
  display: grid !important;
  place-items: center !important;
  border: 1px solid #e1e5ea !important;
  border-radius: 50% !important;
  background: #f2f4f7 !important;
  background-image: none !important;
  color: #59616d !important;
  box-shadow: none !important;
  image-rendering: auto !important;
}

.mypage-y2k-welcome h1,
.mypage-panel-heading h2,
.mypage-login-required h1 {
  color: #24272d !important;
  font-family: Pretendard, "Noto Sans KR", Arial, sans-serif !important;
  letter-spacing: -.4px !important;
}

.mypage-panel-heading {
  border-bottom: 1px solid #e8eaee !important;
}

.mypage-panel-heading > span,
.mypage-card-icon {
  border: 0 !important;
  border-radius: 10px !important;
  background: #f2f4f7 !important;
  background-image: none !important;
  color: #59616d !important;
}

.mypage-page .mypage-nickname-row button,
.mypage-login-required a {
  border: 1px solid #343941 !important;
  border-radius: 8px !important;
  background: #343941 !important;
  background-image: none !important;
  color: #fff !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* Fortune is white and neutral instead of lavender. */
.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,
.pc-daily-fortune-preview {
  border-color: #e4e7ec !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #3f4650 !important;
  box-shadow: none !important;
}

.daily-fortune-kicker {
  border-color: #e1e5ea !important;
  background: #f2f4f7 !important;
  color: #59616d !important;
}

.daily-fortune-intro h2,
.daily-fortune-card-head h3,
.daily-fortune-lucky strong,
.daily-fortune-rabbit strong {
  color: #24272d !important;
}

.daily-fortune-input-row button,
.daily-fortune-reset {
  border-color: #343941 !important;
  background: #343941 !important;
  color: #fff !important;
}

/* Remove purple shells while preserving colors that are part of an actual game mechanic. */
.game-head,
.rps-hero,
.mole-hero,
.typing-hero,
.typing-hud > span,
.rps-scoreboard > span,
.mole-hud > span,
.color-killer-hud > span {
  border-color: #e4e7ec !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #24272d !important;
  box-shadow: none !important;
}

.rps-mascot,
.typing-hero > span,
.mole-hero-icon {
  background: #f2f4f7 !important;
  background-image: none !important;
  box-shadow: none !important;
  filter: none !important;
}

.daily-bingo-head,
.attendance-header,
.coinshop-section > header,
.claw-title-card,
.lottery-title-card {
  background: #fff !important;
  background-image: none !important;
  color: #24272d !important;
}

/* Emoji, encyclopedia and utilities: colored icons only, white cards. */
.encyclopedia-card-icon,
.waste-hero-icon,
.waste-detail-title > span,
.name-tool-heading > span,
.emoji-card-icon,
.playground-card-icon {
  border-color: #e1e5ea !important;
  background-color: #f2f4f7 !important;
  background-image: none !important;
  box-shadow: none !important;
}

.emoji-card.copied,
.emoji-page-header,
.name-dictionary-tools,
.waste-hero,
.encyclopedia-heading {
  border-color: #e4e7ec !important;
  background-color: #fff !important;
  background-image: none !important;
  box-shadow: none !important;
}

/* Dialogs and footer also follow the white system. */
dialog,
.dialog-form,
footer,
.site-footer {
  border-color: #e4e7ec !important;
  background-color: #fff !important;
  background-image: none !important;
  color: #4b525d !important;
  text-shadow: none !important;
  box-shadow: none !important;
}

/* The greeting input gets the full row; the submit button stays deliberately small. */
.modern-one-line-form {
  grid-template-columns: minmax(0, 1fr) auto !important;
  column-gap: 7px !important;
  row-gap: 6px !important;
}

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

.modern-one-line-form > input[name="content"] {
  grid-column: 1 !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  padding: 0 14px !important;
}

.modern-one-line-form > button {
  grid-column: 2 !important;
  align-self: center !important;
  width: 58px !important;
  min-width: 58px !important;
  height: 34px !important;
  padding: 0 7px !important;
  border: 1px solid #343941 !important;
  border-radius: 8px !important;
  background: #343941 !important;
  color: #fff !important;
  font-size: 10.5px !important;
}

.modern-one-line-list .one-line-meta {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 0 8px !important;
}

.modern-one-line-list .one-line-meta form {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
}

.modern-one-line-list .one-line-meta button {
  width: auto !important;
  min-width: 0 !important;
  height: 24px !important;
  padding: 0 6px !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #747b85 !important;
  font-size: 9px !important;
}

.modern-one-line-pagination {
  display: flex !important;
  justify-content: center !important;
  gap: 5px !important;
  margin-top: 12px !important;
}

.modern-one-line-pagination a {
  display: grid !important;
  place-items: center !important;
  width: 27px !important;
  height: 27px !important;
  padding: 0 !important;
  border: 1px solid #e1e4e8 !important;
  border-radius: 7px !important;
  background: #fff !important;
  color: #686f79 !important;
  font-size: 10px !important;
  text-decoration: none !important;
}

.modern-one-line-pagination a.active {
  border-color: #343941 !important;
  background: #343941 !important;
  color: #fff !important;
}

@media (max-width: 620px) {
  #pageContent > .site-page:not(.modern-home).active {
    border-radius: 14px !important;
  }

  .modern-one-line-form > input[name="content"] {
    height: 42px !important;
  }

  .modern-one-line-form > button {
    width: 54px !important;
    min-width: 54px !important;
    height: 32px !important;
  }

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