/* ============================================================
   깨알도구
   숫자 기억하기
   tool.css
   ============================================================ */

.tool-page {
  --tool-page-max-width: 860px;
}

/* ============================================================
   GAME
   ============================================================ */

.memory-game {
  width: 100%;
}

/* ============================================================
   STATUS
   ============================================================ */

.memory-status-bar {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 7px;

  margin-bottom: 10px;
}

.memory-status-item {
  min-width: 0;

  padding: 10px 8px;

  border: 1px solid var(--line);

  border-radius: 11px;

  background: #fff;

  text-align: center;
}

.memory-status-item span {
  display: block;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;
}

.memory-status-item strong {
  display: block;

  margin-top: 3px;

  color: var(--text);

  font-size: 16px;

  font-weight: 900;
}

.memory-status-item.highlight {
  background: var(--surface-soft);
}

.memory-status-item.highlight strong {
  color: var(--brand);
}

/* ============================================================
   BOARD
   ============================================================ */

.memory-board {
  position: relative;

  min-height: 480px;

  overflow: hidden;

  border: 1px solid var(--line);

  border-radius: 22px;

  background: linear-gradient(180deg, #fff 0%, #fbfaf7 100%);

  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.045);
}

/* ============================================================
   SCREEN
   ============================================================ */

.memory-screen {
  min-height: 480px;

  display: flex;

  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 36px 24px;

  text-align: center;
}

.memory-screen[hidden] {
  display: none;
}

/* ============================================================
   INTRO
   ============================================================ */

.memory-brain {
  font-size: 58px;

  line-height: 1;
}

.memory-intro-badge,
.memory-result-label,
.memory-gameover-label {
  margin-top: 13px;

  padding: 4px 8px;

  border-radius: 999px;

  background: var(--surface-soft);

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 900;

  letter-spacing: 0.8px;
}

.memory-intro-screen h2,
.memory-answer-screen h2,
.memory-correct-screen h2,
.memory-gameover-screen h2 {
  margin: 12px 0 0;

  color: var(--text);

  font-size: 24px;

  font-weight: 900;

  letter-spacing: -1px;
}

.memory-intro-screen > p,
.memory-answer-screen > p,
.memory-correct-screen > p {
  margin: 9px 0 0;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.65;
}

.memory-mini-rule {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 8px;

  margin-top: 18px;

  padding: 8px 12px;

  border-radius: 999px;

  background: var(--surface-soft);
}

.memory-mini-rule span {
  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;
}

.memory-mini-rule i {
  color: var(--text-soft);

  font-size: 12px;

  font-style: normal;
}

/* ============================================================
   BUTTON
   ============================================================ */

.memory-primary-button,
.memory-secondary-button {
  min-height: 48px;

  border-radius: 12px;

  font-size: 12px;

  font-weight: 900;

  cursor: pointer;
}

.memory-primary-button {
  min-width: 190px;

  margin-top: 20px;

  border: 0;

  background: var(--brand);

  color: #fff;
}

.memory-primary-button:hover {
  filter: brightness(0.96);
}

.memory-secondary-button {
  min-width: 130px;

  border: 1px solid var(--line);

  background: #fff;

  color: var(--text);
}

.memory-secondary-button:hover {
  background: var(--surface-soft);
}

/* ============================================================
   BEST
   ============================================================ */

.memory-best-box {
  margin-top: 18px;

  color: var(--text-soft);

  font-size: 12px;
}

.memory-best-box span {
  display: block;
}

.memory-best-box strong {
  display: block;

  margin-top: 3px;

  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}

/* ============================================================
   COUNTDOWN
   ============================================================ */

.memory-countdown-label {
  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;
}

.memory-countdown-number {
  margin-top: 9px;

  color: var(--brand);

  font-size: 96px;

  line-height: 1;

  font-weight: 900;

  animation: memory-pop 0.7s ease;
}

.memory-countdown-hint {
  margin-top: 17px;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   NUMBER
   ============================================================ */

.memory-number-screen {
  user-select: none;

  -webkit-user-select: none;
}

.memory-number-label {
  color: var(--text-soft);

  font-size: 12px;

  font-weight: 900;
}

.memory-number {
  max-width: 100%;

  margin-top: 22px;

  color: var(--text);

  font-size: clamp(34px, 8vw, 68px);

  line-height: 1.15;

  font-weight: 900;

  letter-spacing: 0.12em;

  overflow-wrap: anywhere;

  font-variant-numeric: tabular-nums;

  animation: memory-number-in 0.25s ease;
}

.memory-time-bar {
  width: min(340px, 80%);
  height: 6px;

  margin-top: 28px;

  overflow: hidden;

  border-radius: 999px;

  background: #eeeae4;
}

.memory-time-bar span {
  display: block;

  width: 100%;
  height: 100%;

  border-radius: inherit;

  background: var(--brand);

  transform-origin: left center;
}

.memory-show-time {
  margin-top: 7px;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   ANSWER
   ============================================================ */

.memory-question-icon {
  display: flex;

  align-items: center;
  justify-content: center;

  width: 62px;
  height: 62px;

  border-radius: 18px;

  background: var(--surface-soft);

  color: var(--brand);

  font-size: 32px;

  font-weight: 900;
}

.memory-answer-input-wrap {
  width: min(460px, 100%);

  margin-top: 19px;
}

.memory-answer-input-wrap input {
  width: 100%;
  height: 64px;

  padding: 0 16px;

  border: 2px solid var(--line);

  border-radius: 14px;

  background: #fff;

  color: var(--text);

  font-size: 26px;

  font-weight: 900;

  letter-spacing: 0.12em;

  text-align: center;

  outline: none;

  font-variant-numeric: tabular-nums;
}

.memory-answer-input-wrap input:focus {
  border-color: var(--brand);
}

.memory-answer-count {
  margin-top: 7px;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;
}

.memory-message {
  min-height: 19px;

  margin-top: 6px;

  color: #a34d42;

  font-size: 12px;

  font-weight: 800;
}

/* ============================================================
   CORRECT
   ============================================================ */

.memory-result-emoji {
  font-size: 54px;

  line-height: 1;
}

.memory-correct-number {
  margin-top: 16px;

  color: var(--brand);

  font-size: clamp(28px, 6vw, 48px);

  font-weight: 900;

  letter-spacing: 0.1em;

  overflow-wrap: anywhere;

  font-variant-numeric: tabular-nums;
}

.memory-round-score {
  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 16px;

  padding: 7px 11px;

  border-radius: 999px;

  background: var(--surface-soft);
}

.memory-round-score span {
  color: var(--text-soft);

  font-size: 12px;
}

.memory-round-score strong {
  color: var(--brand);

  font-size: 12px;

  font-weight: 900;
}

/* ============================================================
   GAME OVER
   ============================================================ */

.memory-gameover-label {
  background: #f5e7e3;

  color: #825046;
}

.memory-answer-compare {
  width: min(470px, 100%);

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;

  margin-top: 18px;
}

.memory-answer-compare > div {
  min-width: 0;

  padding: 12px;

  border: 1px solid var(--line);

  border-radius: 11px;

  background: #fff;
}

.memory-answer-compare span {
  display: block;

  color: var(--text-soft);

  font-size: 12px;
}

.memory-answer-compare strong {
  display: block;

  margin-top: 5px;

  color: var(--text);

  font-size: 15px;

  font-weight: 900;

  overflow-wrap: anywhere;

  letter-spacing: 0.05em;
}

.memory-final-grid {
  width: min(470px, 100%);

  display: grid;

  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 7px;

  margin-top: 10px;
}

.memory-final-grid > div {
  min-width: 0;

  padding: 10px 8px;

  border-radius: 10px;

  background: var(--surface-soft);

  text-align: center;
}

.memory-final-grid span {
  display: block;

  color: var(--text-soft);

  font-size: 12px;
}

.memory-final-grid strong {
  display: block;

  margin-top: 3px;

  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}

.memory-new-record {
  margin-top: 13px;

  padding: 6px 10px;

  border-radius: 999px;

  background: #f8efcf;

  color: #806621;

  font-size: 12px;

  font-weight: 900;

  animation: memory-pop 0.6s ease;
}

.memory-gameover-actions {
  display: flex;

  align-items: center;
  justify-content: center;

  gap: 7px;

  margin-top: 18px;
}

.memory-gameover-actions .memory-primary-button {
  margin-top: 0;
}

.memory-share-status {
  min-height: 18px;

  margin-top: 8px;

  color: var(--text-soft);

  font-size: 12px;
}

/* ============================================================
   RECORD PANEL
   ============================================================ */

.memory-record-panel {
  display: grid;

  grid-template-columns:
    1fr
    1fr
    auto;

  align-items: center;

  gap: 7px;

  margin-top: 10px;

  padding: 10px;

  border: 1px solid var(--line);

  border-radius: 12px;

  background: #fff;
}

.memory-record-panel > div {
  min-width: 0;

  padding: 3px 7px;
}

.memory-record-panel span {
  display: block;

  color: var(--text-soft);

  font-size: 12px;
}

.memory-record-panel strong {
  display: block;

  margin-top: 2px;

  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}

.memory-record-panel button {
  min-height: 34px;

  padding: 0 10px;

  border: 1px solid var(--line);

  border-radius: 9px;

  background: #fff;

  color: var(--text-soft);

  font-size: 12px;

  font-weight: 800;

  cursor: pointer;
}

.memory-record-panel button:hover {
  background: var(--surface-soft);
}

/* ============================================================
   GUIDE
   ============================================================ */

.memory-guide-grid {
  display: grid;

  grid-template-columns: repeat(3, minmax(0, 1fr));

  gap: 8px;

  margin-top: 12px;
}

.memory-guide-note {
  margin-top: 12px;

  padding: 11px 12px;

  border-radius: 10px;

  background: var(--surface-soft);
}

.memory-guide-note strong {
  color: var(--text);

  font-size: 12px;

  font-weight: 900;
}

.memory-guide-note p {
  margin: 5px 0 0;

  color: var(--text-soft);

  font-size: 12px;

  line-height: 1.6;
}

/* ============================================================
   EFFECTS
   ============================================================ */

.memory-board.flash-success {
  animation: memory-success-flash 0.55s ease;
}

.memory-board.shake-error {
  animation: memory-shake 0.42s ease;
}

@keyframes memory-pop {
  0% {
    opacity: 0;
    transform: scale(0.65);
  }

  65% {
    opacity: 1;
    transform: scale(1.08);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes memory-number-in {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.95);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes memory-success-flash {
  0%,
  100% {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.045);
  }

  45% {
    box-shadow: 0 0 0 5px rgba(123, 163, 105, 0.18);
  }
}

@keyframes memory-shake {
  0%,
  100% {
    transform: translateX(0);
  }

  20% {
    transform: translateX(-8px);
  }

  40% {
    transform: translateX(7px);
  }

  60% {
    transform: translateX(-5px);
  }

  80% {
    transform: translateX(3px);
  }
}

/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width: 560px) {
  .memory-status-bar {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memory-board,
  .memory-screen {
    min-height: 450px;
  }

  .memory-screen {
    padding: 28px 16px;
  }

  .memory-intro-screen h2,
  .memory-answer-screen h2,
  .memory-correct-screen h2,
  .memory-gameover-screen h2 {
    font-size: 21px;
  }

  .memory-number {
    font-size: clamp(30px, 10vw, 50px);

    letter-spacing: 0.08em;
  }

  .memory-answer-input-wrap input {
    height: 58px;

    font-size: 23px;
  }

  .memory-gameover-actions {
    width: 100%;

    flex-direction: column;
  }

  .memory-gameover-actions button {
    width: 100%;
  }

  .memory-record-panel {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .memory-record-panel button {
    grid-column: 1 / -1;
  }

  .memory-guide-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SMALL MOBILE
   ============================================================ */

@media (max-width: 380px) {
  .memory-answer-compare,
  .memory-final-grid {
    grid-template-columns: 1fr;
  }

  .memory-mini-rule {
    flex-direction: column;

    border-radius: 12px;
  }

  .memory-mini-rule i {
    transform: rotate(90deg);
  }
}