body {
  --wrong-scale: 1;
  --wrong-panel-scale: 1;
}

body.font-large {
  --wrong-scale: 1.23;
  --wrong-panel-scale: 1.16;
}

body.font-xlarge {
  --wrong-scale: 1.42;
  --wrong-panel-scale: 1.28;
}

.wrong-note-section {
  position: relative;
  min-height: calc(100vh - var(--header-height));
  padding: calc(120px * var(--wrong-scale)) 0 calc(140px * var(--wrong-scale));
  overflow: hidden;
  isolation: isolate;
}

.wrong-note-pattern {
  position: absolute;
  z-index: -1;
  border-radius: 50%;
}

.wrong-note-pattern-left {
  width: 620px;
  height: 620px;
  left: -220px;
  top: -190px;
  background: var(--color-bg-pattern-1);
}

.wrong-note-pattern-right {
  width: 380px;
  height: 380px;
  right: -80px;
  top: -150px;
  background: var(--color-bg-pattern-2);
}

.wrong-note-header {
  width: min(100%, calc(980px * var(--wrong-panel-scale)));
  margin: 0 auto calc(88px * var(--wrong-scale));
}

.wrong-note-eyebrow {
  margin-bottom: calc(10px * var(--wrong-scale));
  color: var(--color-accent);
  font-size: calc(0.9rem * var(--wrong-scale));
  font-weight: 900;
}

.wrong-note-header h1 {
  margin-bottom: calc(22px * var(--wrong-scale));
  font-size: calc(3.4rem * var(--wrong-scale));
  line-height: 1.1;
}

.wrong-note-header p:last-child {
  color: var(--color-text-sub);
  font-size: calc(1.05rem * var(--wrong-scale));
  line-height: 1.7;
  font-weight: 700;
}

.history-panel {
  width: min(100%, calc(980px * var(--wrong-panel-scale)));
  margin: 0 auto;
  padding: calc(56px * var(--wrong-scale)) calc(58px * var(--wrong-scale));
  border: 1px solid #ef8a33;
  border-radius: calc(8px * var(--wrong-scale));
  background: rgba(255, 255, 255, 0.72);
}

.history-panel h2 {
  margin-bottom: calc(34px * var(--wrong-scale));
  font-size: calc(1.7rem * var(--wrong-scale));
}

.history-list {
  display: grid;
  gap: calc(22px * var(--wrong-scale));
}

.history-card {
  min-height: calc(148px * var(--wrong-scale));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(32px * var(--wrong-scale));
  padding: calc(30px * var(--wrong-scale)) calc(34px * var(--wrong-scale));
  border: 1px solid transparent;
  border-radius: calc(8px * var(--wrong-scale));
}

body.font-large .history-panel {
  padding: calc(62px * var(--wrong-scale)) calc(66px * var(--wrong-scale));
}

body.font-large .history-card {
  min-height: calc(162px * var(--wrong-scale));
  padding: calc(34px * var(--wrong-scale)) calc(40px * var(--wrong-scale));
}

body.font-xlarge .history-panel {
  padding: calc(68px * var(--wrong-scale)) calc(74px * var(--wrong-scale));
}

body.font-xlarge .history-card {
  min-height: calc(176px * var(--wrong-scale));
  padding: calc(38px * var(--wrong-scale)) calc(46px * var(--wrong-scale));
}

.history-card.is-correct {
  border-color: #8acaa9;
  background: #e6f7ee;
}

.history-card.is-wrong {
  border-color: #f1aaa5;
  background: #ffe2df;
}

.history-meta {
  display: flex;
  align-items: center;
  gap: calc(14px * var(--wrong-scale));
  margin-bottom: calc(14px * var(--wrong-scale));
  color: var(--color-text-sub);
  font-size: calc(0.95rem * var(--wrong-scale));
  font-weight: 800;
}

.status-badge {
  min-width: calc(56px * var(--wrong-scale));
  padding: calc(7px * var(--wrong-scale)) calc(12px * var(--wrong-scale));
  border-radius: 999px;
  color: #ffffff;
  text-align: center;
  font-size: calc(0.85rem * var(--wrong-scale));
  font-weight: 900;
}

.is-correct .status-badge {
  background: var(--color-primary-dark);
}

.is-wrong .status-badge {
  background: #b93a32;
}

.history-card h3 {
  font-size: calc(1.2rem * var(--wrong-scale));
  line-height: 1.45;
}

.history-card button {
  min-width: calc(112px * var(--wrong-scale));
  min-height: calc(48px * var(--wrong-scale));
  padding: 0 calc(24px * var(--wrong-scale));
  border: 1px solid #9ca3af;
  border-radius: calc(8px * var(--wrong-scale));
  background: #ffffff;
  color: var(--color-text-main);
  font-size: calc(0.95rem * var(--wrong-scale));
  font-weight: 900;
}

.history-card.is-wrong button {
  border-color: #b93a32;
  background: #b93a32;
  color: #ffffff;
}

@media (max-width: 1024px) {
  .wrong-note-header,
  .history-panel {
    width: 100%;
  }

  .history-panel {
    padding: calc(44px * var(--wrong-scale)) calc(36px * var(--wrong-scale));
  }

  body.font-xlarge .history-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .wrong-note-section {
    padding: calc(72px * var(--wrong-scale)) 0 calc(96px * var(--wrong-scale));
  }

  .wrong-note-header {
    margin-bottom: calc(52px * var(--wrong-scale));
  }

  .history-panel {
    padding: calc(28px * var(--wrong-scale)) calc(20px * var(--wrong-scale));
  }

  .history-card {
    align-items: flex-start;
    flex-direction: column;
  }
}

/* 오답노트 카드: 틀린 이유만 간단하게 표시 */

.history-card .history-content {
  flex: 1;
  min-width: 0;
}

.wrong-note-simple-list {
  display: grid;
  gap: 12px;
  margin: 46px 0 20px 36px;
  padding: 0;
  list-style: none;
}

.wrong-note-simple-item {
  margin: 0;
  color: #111;
  font-size: clamp(24px, 2.2vw, 38px);
  font-weight: 900;
  line-height: 1.35;
  word-break: keep-all;
}

.wrong-note-reason-label {
  color: #c62828;
  font-weight: 900;
}

.wrong-note-empty-message {
  margin: 38px 0 10px 36px;
  font-size: 24px;
  font-weight: 900;
}

@media (max-width: 760px) {
  .wrong-note-simple-list,
  .wrong-note-empty-message {
    margin-left: 0;
  }

  .wrong-note-simple-item {
    font-size: 24px;
  }
}